Question

我有一个关于图像居中的问题。

我已从codepen.io创建了此 DEMO 。

在这个演示中，您可以看到我使用背景图像进行居中，看起来对我来说很合适。

图像规范化如下所示： NORMALIZE

问题是如何使用img标记代替background并更改html，如：

<div class="centered-image">
<img src="IMAGE-URL"/>
</div>

Answer 1

使用display: flex并让img代码设为width:100%。 DEMO

.centered-img{
  width:540px;
  height:200px;
  margin:0px auto;
  margin-top:50px;
  display:flex;
  justify-content:center;
  align-items:center;
  overflow:hidden;
}
.centered-img img{
  width: 100%;
}

<div class="centered-img">
  <img src="http://i.imgur.com/BXo4qAz.jpg" />
</div>

Answer 2

使用柔性盒最容易进行垂直定心。这也将水平居中。

.centered-image {
    display: flex;
    align-items: center;
    justify-content: center;
}

您仍然需要在.centered-image上设置比例，因为否则它会延伸到图像的高度，并且不会发生任何垂直对齐。

请检查example。我调整了图像的大小以演示对齐，即使在较小的屏幕上也是如此。

Answer 3

试试这个：

img{
display: block;
margin: 0 auto;
}

Answer 4

请检查小提琴 - Is it possible to attach a MDF file to an Azure SQL database?

html, body{
   height: 100%;
}
.centering-image{
   display: flex;
   align-items: center;
   justify-content: center;
   height: 100%;
}

CSS居中的图像

4 个答案: