Question

如何将这样的内容水平放置在页面中间？

HTML -

 <div class="inner">
<img src="img/shoplove-design.png" alt="Recipe App" />
</div>

CSS
.inner {
width: 800px;          
 }

Answer 1

您应该使用margin-left:auto margin-right:auto为img指定水平对齐的宽度。

 .inner {
   width: 800px;
   border:1px solid black;
 }

 img{
   display:block;
   margin:0 auto;
   width:200px;
 }

JSFiddle

或者您可以将img与inline-block对齐，并为其父级提供text-align:center

 .inner {
   width: 800px;
   border:1px solid black;
   text-align:center;
 }

 img{
   display:inline-block;
 }

JSFiddle

Answer 2

尝试将类附加到图像

<img class="centered" src="img/shoplove-design.png" alt="Recipe App" />

并将其定义为：

.centered{width:270px;  /* use yours*/
          height:150px; /* use yours*/
          position:absolute;
          left:50%;
          top:50%;
          margin:-75px 0 0 -135px;} /* use yours divided by 2*/

Answer 3

最简单的解决方案是使用text-align: center; see it in action 。

这是有效的，因为 img 是 div.inner 的孩子。因此， div.inner 默认它是 div 元素＆＃39; sa display：block; 因此会有一个< kbd> width：100％; 是它的父母。

现在，如果你想说垂直对齐图像 div.inner 需要 display：table-cell; ，它的父母会需要 display：table; 。

然后垂直对齐图像就像将 vertical-align：middle; 添加到 .inner 一样简单。

Example Weave: http://kodeweave.sourceforge.net/editor/#fcad28261445fbcae79a9253f502cd2d

Answer 4

如果你可以使用背景图片，你也可以这样：

<html><head><style>
html, body {height: 100%}
body {
  background-image: url(img/shoplove-design.png); 
  background-position: center center; 
  background-repeat: no-repeat; 
  background-size: contain;
}
</style></head><body></body></html>

这使页面高度为100％，并在中心显示图像。为了更好地理解CSS的工作原理，我故意不缩短CSS语句。

一个工作示例： http://codepen.io/anon/pen/bpjZjb?editors=1100

这个解决方案的好处在于它具有完全响应能力，可以根据您的需求轻松调整。以下是OP的div元素的示例：http://codepen.io/anon/pen/BKPbqX?editors=1100

Answer 5

我也有同样的问题...使用这个https://www.w3schools.com/css/css_align.asp

或者没有表格：

.center {
    padding: 200px 0;
    text-align: center;
    }

如何在css中将图像居中在页面中间？

5 个答案: