html - 什么 CSS 可以像表格一样显示右对齐、居中对齐和左对齐的图像？-6ren

html - 什么 CSS 可以像表格一样显示右对齐、居中对齐和左对齐的图像？

转载作者：太空宇宙更新时间：2023-11-04 11:43:13

我想使用 CSS 重现下面简单 HTML 表格的行为。

HTML 表格的宽度为 100%，只有一行和三列。每列包含一个图像，其中 image1 是左对齐的； image2 居中；并且 image3 是右对齐的。

重要的是，当浏览器窗口被调整到非常小时，图像不应该重叠或换行到下一行。它们应该简单地在同一行中彼此相邻(这就是表格解决方案所做的)。

这听起来像是一个简单的要求，但我已经为此苦苦挣扎了好几个小时，因此非常感谢任何帮助。

<html>
<head>
<title>Test</title>
</head>
<body>

<table width="100%">
<tr>
<td align="left">
<img width="150" height="129" src="image1.gif">
</td>
<td align="center">
<img width="400" height="120" border="0" src="image2.jpg"> <!-- This is the main logo  -->
</td>
<td align="right">
<img width="141" height="80" src="image3.png">
</td>
</tr>
</table>

</body>
</html>

最佳答案

您可以使用display: table 和display: table-cell 来获取表格的类似属性。

html

<div class="table">
    <div class="table-cell center">
        <p>Center</p>
    </div>
    <div class="table-cell left">
        <p>Left</p>
    </div>
    <div class="table-cell right">
        <p>Right</p>
    </div>
</div>

CSS

.table{
  display: table;
}

.table-cell{
  height: 100px;
  width: 100px;
  display: table-cell;
  vertical-align: middle;
}

.center{text-align: center;}
.left{text-align: left;}
.right{text-align: right;}

检查这支笔:http://codepen.io/codefancy/pen/PqQjyb/

关于html - 什么 CSS 可以像表格一样显示右对齐、居中对齐和左对齐的图像？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31174933/