css►image

Centering image in a div CSS

By: Ryan Wong at

One Way is the following:

1
2
3
<div class="container">
 <img src="blah">
</div>

CSS

1
2
3
4
5
6
7
8
9
10
.container{
 width: 100%;
}

.container img{
 display:block;
 width: 80%;
 margin-left: auto;
 margin-right: auto;
}

The other way is:

1
2
3
4
5
6
7
8
.container {
 text-align: center;
 width:100%;
}

.container img {
 display: inline-block;
}

Hope it helps you out.