Question

考虑用CSS样式替换此表的任务：

<table border="1">
  <tr><td align="center">
       <img src="foo" />
  </td></tr>
  <tr><td align="center">
       <img src="bar" />
    </td></tr>
  <tr><td align="center">
       <img src="bat" />
    </td></tr>
</table>

所需的输出是3个图像堆叠在彼此之上。图像以最宽的图像为中心。

如何使用<div>围绕这些带有CSS的<img>标记设置此标记，以获得相同的外观？

Answer 1

<div class="images">
  <img src="foo" />
  <img src="bar" />
  <img src="bat" />
</div>

和CSS

div.images img {
  display: block;
  margin: 0 auto;
}

Answer 2

如果您真的想要使用DIV元素，请执行以下操作：

HTML：

<div class="imgContainer">
<img src="blabla.jpg" alt="blabla" />
<img src="blabla2.jpg" alt="blabla" />
<img src="blabla3.jpg" alt="blabla" />
</div>

的CSS：

div.imgContainer {
    width: auto;
    text-align: center;
}

div.imgContainer img{
    display: block;
}

Answer 3

<p style="text-align:center;width:auto;"><img  /><br /><img /><br /><img  /></p>

Answer 4

<style>
div.table img {
  display: block;
  margin: 0 auto;
}
</style>

<div class="table">
  <img src="foo" />
  <img src="bar" />
  <img src="bat" />
</div>

类似的东西

Answer 5

以整页为中心：

<html>
<style>
.centeredDiv
{
width:400px;margin-left:auto;margin-right:auto;background-color:#FF0000;
}

</style>
<body style="text-align:center;" >
<div class="centeredDiv">
<div>image</div>
<div>image</div>
<div>image</div>
</div>


</body>
</html>

使用CSS代替表来创建居中的图像列

5 个答案: