Question

我很难让这个图像居中。

我尝试了以下内容：

margin: 0 auto;
display: block;

text-align: center;

我真的不想使用left命令，因为它不能在我的移动设置中工作。我只想要一个可以在任何地方工作的固定资产，我不必再添加它。

为什么这张图片不居中？

＆＃13;

#section3-container {
    position: absolute;
    top: 25%;
    text-align: center;
    width: 80%;
    margin: 0 10%;
}
.approach-tablet {
    bottom: 0;
    position: relative;
    /*left: 50%;*/
    height: 200px;
    width: auto;

}
.approach-tablet img {
    display: block;
    margin: 0 auto;
}

＆＃13;

<div id="section3-container">
</div>
<img src="/examples/imgs/tablets.png" alt="tablets" class="approach-tablet">

＆＃13;

我也尝试了以下但它仍然无法正常工作。

.approach-tablet {
    bottom: 0;
    position: absolute;
    /*left: 50%;*/
}
img.approach-tablet {
    display: block;
    margin: 0 auto;
    text-align: center;
}

我需要position: absolute来定位我希望它去的div。它位于页面底部。无论如何，图像并不与那里的内容对齐。

Answer 1

请使用以下代码

<div id="section3-container">
  <img src="http://optimumwebdesigns.com/fullPage.js/examples/imgs/tablets.png" alt="tablets" class="approach-tablet">
</div>

CSS

#section3-container {
 margin: 0 auto;
 text-align: center;
 width: 100%;
}
.approach-tablet {
 height: 200px;
 margin: 0 auto;
 text-align: center;
 width: auto;
}

Answer 2

如this SO answer所示，绝对定位的元素无法使用margin: 0 auto方法居中，您必须使用其他选项。

一种选择是使用left: 50%，然后使用transform: translateX(-50%)将其恢复到中心位置。 left: 50%将图像偏离页面左边缘50％（但由于图像的左边缘位于页面中心，因此单独不会使图像居中）。 translateX(-50%)将图像向左移动图像宽度的一半，从而导致图像的中心位于页面中心。

这应该适用于所有现代浏览器（包括移动设备）browser support is good。从代码片段中可以看出（在正常模式和完整页面模式下查看），无需特殊调整即可进行响应。

注意：虽然您已经声明您不想在问题中使用left属性，但我根据您的评论理解原因是需要移动支持并且回应。

#section3-container {
  position: absolute;
  top: 25%;
  text-align: center;
  width: 80%;
  margin: 0 10%;
}
.approach-tablet {
  bottom: 0;
  position: absolute;
  left: 50%;
  height: 200px;
  transform: translateX(-50%);
}

<div id="section3-container">
</div>
<img src="http://optimumwebdesigns.com/fullPage.js/examples/imgs/tablets.png" alt="tablets" class="approach-tablet">

Answer 3

你的形象在div之外。如果你把它放在里面，它会集中在

＆＃13;

#section3-container {
	position: absolute;
	top: 25%;
	text-align: center;
	width: 80%;
    margin: 0 10%;
}
.approach-tablet {
    bottom: 0;
    position: relative;
	/*left: 50%;*/
  height: 200px;
  width: auto;

}
.approach-tablet img {
	display: block;
	margin: 0 auto;
}

＆＃13;

<div id="section3-container">
  <img src="http://optimumwebdesigns.com/fullPage.js/examples/imgs/tablets.png" alt="tablets" class="approach-tablet">
</div>

＆＃13;

Answer 4

只需添加另一个div，html就是div：

#section3-container {
	position: absolute;
	top: 25%;
	text-align: center;
	width: 80%;
    margin: 0 10%;
}
.approach-tablet {
    bottom: 0;
    position: relative;
	/*left: 50%;*/
  height: 200px;
  width: auto;

}

.approach-tablet img {
	display: block;
	margin: 0 auto;
}

#section4-container {
	text-align: center;
	width: 100%;
}

<div id="section3-container">
</div>
<div id="section4-container">
  <img src="http://optimumwebdesigns.com/fullPage.js/examples/imgs/tablets.png" alt="tablets" class="approach-tablet">
</div>

图像不会居中

4 个答案: