3

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

4

6 回答 6

7

将图像包装在元素内并使用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;with display: block;as imgtag is inlineelement 默认情况下，当然还有width属性

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

演示 2

于 2013-07-09T05:04:21.153 回答
5

试试这个 CSS 水平居中

display: block;    
margin: 0 auto;

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

于 2013-07-09T05:05:34.227 回答
1

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

  <div style="text-align: center; width: 100%; border: 1px solid black;">Centered</div>
于 2013-07-09T05:04:12.463 回答
0

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

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

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

于 2013-07-09T05:15:41.960 回答
0

如果你有财产，那就给element它。widthmargin:auto;

于 2013-07-09T05:04:46.310 回答
0

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

<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>
于 2013-07-09T05:07:10.690 回答