Question

我正在尝试将大图像水平居中。因为我使用的是HTML5，所以我无法使用<center>。我可以使用left:400px，但这不适用于不同的屏幕尺寸。

Answer 1

将图像包裹在元素中并使用text-align: center; ...

<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;
}

或者，如果您知道图像宽度是什么，那么您也可以margin: auto;使用display: block;作为img标记默认为inline元素，当然， width属性

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

Demo 2

Answer 2

尝试将此css水平居中

display: block;    
margin: 0 auto;

=上边距和下边距0以及左边距和右边距auto

Answer 3

使用CSS text-align: center;。并且不要忘记在div上设置宽度，否则它将看起来是左对齐的。

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

Answer 4

如果您的element具有width属性，请将其margin:auto;。

Answer 5

根据您的具体情况，这在几个项目中对我有用：

<style>
    .outer{float: left; position: relative; left: 50%;}
    .inner{float: left; position: relative; left: -50%;}
</style>
<div class="outer">
     <div class="inner">content you want to center, image, text, whatevs</div>
</div>

Answer 6

默认情况下，IMG元素是内联的。因此，正如其他人指出的那样，您有两种选择：

1）保持内联，并使用text-align: center;。

2）使用display: block;将其设为块元素，然后使用仅适用于块元素的margin: auto;。我认为这个解决方案更好。设置宽度只是强制它成为块元素的另一种方式，但对于稍后可能会读取代码的人来说，它不太明显。因此，明确将display类型设置为block更易于提高可读性。

图像的水平对齐

6 个答案: