【发布时间】：2015-12-05 04:40:27
【问题描述】：
我有一段我正在编写的网站的代码，但我不知道。
.program_category_description {
background-color: #e0e0e0;
margin-bottom: 20px;
max-width:1300px;
}
.program_category_description .description {
display: table-cell;
padding: 2% 1% 2% 1%;
}
.program_category_description .title {
font-weight: bold;
font-size: 20px;
padding-bottom: 2%;
font-family: 'Lato', sans-serif;
}
.program_category_description .more_info {
text-align: center;
vertical-align: middle;
display: table-cell;
width: 15%;
background-color: #CE6D2B;
}
.program_category_description .more_info a {
color: white !important;
}
.more_info_btn {
font-size: 20px;
display: inline-block;
height: 100%;
width: 100%;
text-align: center;
cursor: pointer;
-o-transition: background-color .2s ease-in;
-moz-transition: background-color .2s ease-in;
-webkit-transition: background-color .2s ease-in;
transition: background-color .2s ease-in;
}
.more_info_btn:hover {
background-color: #b96226;
}
.more_info_btn:active {
background-color: #ccc;
}<div class="article_body_section program_category_description">
<div class="description">
<div class="title">Short Term Programs</div>
<div class="description_description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis euismod lacus vitae dui fermentum, quis lacinia risus viverra. Nulla aliquam leo quis velit dictum viverra. Duis vehicula pharetra imperdiet. Duis eleifend orci eget ultrices convallis.
Nulla nec aliqu.</div>
</div>
<div class="more_info"><a href="#"><span class="more_info_btn">More Info</span></a>
</div>
</div>跨度的原因是整个橙色块都是可点击的链接。问题是我希望“更多信息”文本始终在块内居中。我不想给它特定的像素属性，因为我希望它在调整大小时拉伸或变大。唯一的限制是最大宽度为 1300 像素。
我已经尝试过垂直对齐，或者添加基于百分比的填充，但没有任何效果。您可能会说，我在这方面的经验并不丰富，并且每天都在学习，所以如果您在代码中看到其他值得指出的地方或其他解决方案，请执行。
【问题讨论】：
-
对我来说，文本完全与中心对齐？垂直和水平？
-
居中对齐，垂直和水平。有什么问题？
-
@Aaron “更多信息”部分绝对没有与中心对齐，在顶部。我认为垂直对齐是名称？如果你愿意，我可以截屏。
-
点击Run code sn -p你会看到它是垂直对齐的吗？
-
啊哈，我用的是 firefox...它不在 chrome 中：)