【发布时间】：2017-05-26 03:51:09
【问题描述】：
我对 html 和 css 还很陌生，在使用 css 和 html 使我的文本与图像垂直对齐时一直在努力。
我遇到了一个很好的解决方案，使用“display: table-cell;”在
类和“显示：表；”在它的容器类中。
这似乎有效，直到我遇到我的文本没有溢出到第二行的情况。无论出于何种原因，似乎我的文本中较短的句子与图像和下一列之间的空间中心对齐。
HTML：
<h3 class="red-header">
Buttons Header
</h3>
<div class="row">
<div class="column divLink">
<img class="icon-img" src="http://www.immersion-3d.com/wp-content/uploads/2015/12/image-placeholder-500x500.jpg" />
<p class="icon-text">
<span class="red-text">Button Text pt 1</span>
<br /> short line extra space on the left</p>
<a class="feature" href="google.ca"></a>
</div>
<div class="column divLink">
<img class="icon-img" src="http://www.immersion-3d.com/wp-content/uploads/2015/12/image-placeholder-500x500.jpg" />
<p class="icon-text">
<span class="red-text">Button Text pt 2</span>
<br /> short setence describing button could possibly extend for a line or two or three. Would like this to be centered</p>
<a class="feature" href="google.ca"></a>
</div>
</div>
<div class="row">
<div class="column divLink">
<img class="icon-img" src="http://www.immersion-3d.com/wp-content/uploads/2015/12/image-placeholder-500x500.jpg" />
<p class="icon-text">
<span class="red-text">Button Text pt 3</span>
<br /> short setence describing button could possibly extend for a line or two or three. Would like this to be centered</p>
<a class="feature" href="google.ca"></a>
</div>
<div class="column divLink">
<img class="icon-img" src="http://www.immersion-3d.com/wp-content/uploads/2015/12/image-placeholder-500x500.jpg" />
<p class="icon-text">
<span class="red-text">Button Text pt 4</span>
<br /> short setence describing button could possibly extend for a line or two or three. Would like this to be centered </p>
<a class="feature" href="google.ca"></a>
</div>
</div>
CSS：
.red-header {
background-color: #be1e2d;
color: #FFF;
font-size: 1rem;
font-family: Lato, Helvetica, Arial, sans-serif;
padding: .6rem;
text-align: center;
}
.row {
width: 100%;
}
.icon-text {
display: table-cell;
height: 100%;
vertical-align: middle;
}
.column {
width: 50%;
display: table;
position: relative;
float: left;
}
.red-text {
color: #be1e2d;
margin-bottom: 0px;
margin-top: 10px;
line-height: 1;
}
.icon-img {
float: left;
width: 115px;
padding: 5px 16px 5px 0px;
}
.feature {
position: relative;
}
/* used to make entire div into a clickable element */
.feature {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
text-decoration: none;
/* No underlines on the link */
z-index: 10;
/* Places the link above everything else in the div */
background-color: #FFF;
/* Fix to make div clickable in IE */
opacity: 0;
/* Fix to make div clickable in IE */
filter: alpha(opacity=1);
/* Fix to make div clickable in IE */
}
/* visualization of the button using a hover */
.divLink:hover {
background-color: #b1e3e6;
}
对于糟糕的解释，我深表歉意，please see the following fiddle for clarity. 问题出现在“Button Text pt 1”中
【问题讨论】：
-
如果您只是在学习，给点建议：在任何不是实际表格的东西上使用
display: table是不好的做法。您可能应该学习更现代的方法，例如使用display: flex(flexbox)。 flexbox 使得创建列、水平和垂直居中以及许多其他很酷的东西变得非常容易。查看此link 了解 flexbox 功能，看看它是否适合您。 -
@Matthew 感谢您的快速回复。在我的研究中，似乎对于使用 display: table 作为一种呈现方式存在不同的看法。 stackoverflow.com/questions/38619180/… cmets 在这个问题中似乎区分了使用 table html 标签和 display: table 用于布局/演示目的。显然，这个用户并不是全部，但我遇到了许多与此类似的意见。我是否误解了这个回复？
-
不，我不认为您误解了这些 cmets。实际上，这完全取决于个人喜好。从技术上讲，可以将
display: table用于与表格无关的事情，但唯一的理由似乎是旧版浏览器支持它。这个问题的真正答案是你正在为什么样的人群开发？您的用户是否应该拥有最新的浏览器？并且您是否希望将开发人员甚至不再支持的旧版浏览器作为您的用户的一个选项？ -
我的观点是我们开发者不应该仅仅因为人们不喜欢变化就支持过时的浏览器。不过其他人会不同意我的观点。