Horizontal alignment of an image

This question already has an answer here:

How to make an image center (vertically & horizontally) inside a bigger div 36 answers

Centering image horizontally and vertically [duplicate] 5 answers

---

Wrap the image inside an element and use text-align: center; ...

Demo

<div class="center">
    <img src="http://www.google.com/intl/en_ALL/images/logos/images_logo_lg.gif" alt="Google" />
</div>

.center {
   text-align: center;
}

Alternatively if you are aware, that what's the image width, you can also use margin: auto; with display: block; as img tag is inline element by default and of course, the width property

img {
   width: 276px;
   display: block;
    margin: auto;
}

Demo 2

---

Try this css to horizontally center

display: block;    
margin: 0 auto;

= the top and bottom margin 0 , and the left and right margin auto

---

Use CSS text-align: center; . And don't forget to set width on the div or it will look left-aligned.

  <div style="text-align: center; width: 100%; border: 1px solid black;">Centered</div>

链接地址: http://www.djcxy.com/p/75748.html

上一篇: 绝对位置div中的图像

下一篇: 图像的水平对齐