Question

我使用display：table来居中图像，但似乎不起作用？为什么？任何答案我都会很适合。非常感谢！我找不到我的错误，你能帮助我吗？

＆＃13;

.wrapper4 {
  width: 300px;
  height: 300px;
  border: 1px solid green;
  margin-left: auto;
  margin-right: auto;
  display: table;
  margin-bottom: 60px; 
  text-align: center;
  
}

.wrapper4 img {
  width: 100px;
  height: 100px;
  display: table-cell;
  vertical-align: middle;
  
 
}

＆＃13;

<!DOCTYPE html>
<html>
<head>
<meta name="description" content="垂直居中demo" />
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div class="wrapper4">
    <img src="http://listenwallstreet.com/wp-content/uploads/2016/03/xiaogou.jpg" alt="小狗">
    
  </div>
  
</body>
</html>

＆＃13;

Answer 1

要在此 300px div中垂直居中此 100px图像，您可以为图像添加100px的上边距（因为300-100 = 200; 200/2 = 100），并将其水平边距设置为auto。不需要display: table等等。

.wrapper4 img {
  width: 100px;
  height: 100px;
  margin: 100px auto;
}

然而，这不是非常可重复使用的。你的图片总是100px吗？他们会永远是正方形吗？

如果没有，你必须考虑居中景观和不同大小的肖像图像。

最简单的方法是使用现代网络浏览器（比2013年的IE9更新），使用Flexbox，如in this answer by tombul所述。

您可以将flex规则直接应用于div元素，但这又不是非常可重用的。另一种选择是为元素创建一个CSS类，该元素将其内容集中在Flex容器中。然后在HTML中应用此CSS类。 wrapper类现在只处理包装器的尺寸和外观; wrapper img类只处理图像的尺寸和外观。图像的对齐由centerFlex类控制。如果你想要左，中，右对齐的多个图像，你可以创建＆amp;应用类似的规则来实现这一点。

仅供参考，您可以包含所有margins with the shorthand syntax margin: top right bottom left，或成对margin: top&bottom left&right

.wrapper4 {
  width: 300px;
  height: 300px;
  border: 1px solid green;
  margin: 0px auto; 
}

.centerFlex {
  align-items: center;
  display: flex;
  justify-content: center;
}

.wrapper4 img {
  width: 100px;
  height: 100px;
}

<!DOCTYPE html>
<html>
<head>
<meta name="description" content="垂直居中demo" />
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div class="wrapper4 centerFlex">
    <img src="http://listenwallstreet.com/wp-content/uploads/2016/03/xiaogou.jpg" alt="小狗">
    
  </div>
  
</body>
</html>

Answer 2

试试这个：

＆＃13;

.wrapper4 {
  width: 300px;
  height: 300px;
  border: 1px solid green;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  margin-bottom: 60px; 
  align-items: center;
  
}

.wrapper4 img {
  width: 100px;
  height: 100px;
      margin: 0 auto;
  
 
}

＆＃13;

<!DOCTYPE html>
<html>
<head>
<meta name="description" content="垂直居中demo" />
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div class="wrapper4">
    <img src="http://listenwallstreet.com/wp-content/uploads/2016/03/xiaogou.jpg" alt="小狗">
    
  </div>
  
</body>
</html>

＆＃13;

Answer 3

table-cell 对齐规则需要在需要对齐的嵌套元素的包含元素上声明。

div class="wrapper4"> <!-- containing element (should be table-cell) --->
   <!-- element to align -->
   <img src="http://listenwallstreet.com/wp-content/uploads/2016/03/xiaogou.jpg" alt="小狗">      
</div>

代码段示范：

已插入另一个包含元素以包装嵌套的img标记 - 我们将使用此contiaining元素将table-cell规则声明为

.wrapper4 {
  width: 300px;
  height: 300px;
  border: 1px solid green;
  margin-left: auto;
  margin-right: auto;
  display: table;
  margin-bottom: 60px;
}

.wrapper4 .wrapper-cell {
  text-align: center;
  display: table-cell;
  vertical-align: middle;
}

.wrapper4 img {
  width: 100px;
  height: 100px;
}

<div class="wrapper4">
  <div class="wrapper-cell">
    <img src="http://listenwallstreet.com/wp-content/uploads/2016/03/xiaogou.jpg" alt="小狗">
  </div>
</div>

替代

<强> Flex的盒

.wrapper4 {
  width: 300px;
  height: 300px;
  border: 1px solid green;
  margin-left: auto;
  margin-right: auto;
  display: flex; /* Adjusted */
  margin-bottom: 60px;
  /* Additional */
  justify-content: center;
  align-items: center;
}

.wrapper4 img {
  width: 100px;
  height: 100px;
}

<div class="wrapper4">
    <img src="http://listenwallstreet.com/wp-content/uploads/2016/03/xiaogou.jpg" alt="小狗">
</div>

绝对定位

.wrapper4 {
  width: 300px;
  height: 300px;
  border: 1px solid green;
  margin-left: auto;
  margin-right: auto;
  display: block; /* Adjusted */
  margin-bottom: 60px;
  /* Additional */
  position: relative;
}

.wrapper4 img {
  width: 100px;
  height: 100px;
  /* Additional */
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

<div class="wrapper4">
    <img src="http://listenwallstreet.com/wp-content/uploads/2016/03/xiaogou.jpg" alt="小狗">
</div>

相对定位

.wrapper4 {
  width: 300px;
  height: 300px;
  border: 1px solid green;
  margin-left: auto;
  margin-right: auto;
  display: block; /* Adjusted */
  margin-bottom: 60px;
}

.wrapper4 img {
  width: 100px;
  height: 100px;
  /* Additional */
  display: block;
  margin: auto;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

<div class="wrapper4">
    <img src="http://listenwallstreet.com/wp-content/uploads/2016/03/xiaogou.jpg" alt="小狗">
</div>

CodePen演示

为什么我不能垂直和水平居中图像？

3 个答案:

替代