我试图让一个图标的底部与浏览器中的某些文本对齐(对于像素 - 第一个S的最低像素应该与foler图标的最低像素处于同一高度),但Chrome总是给我不同的结果。
小提琴:
HTML:
<div class="study-box set-box">
<div class="set-box-title">
<i class="icon-folder-close-alt">
</i>
<div>SHOULD BE LINED UP WITH BOTTOM OF FOLDER</div>
</div>
</div>
CSS:
.study-box {
width: 200px;
height: 120px;
margin: 2px;
float: left;
color: white;
text-align: center;
font-size: 15px;
position: relative; }
.folder-box-title > div, .set-box-title > div {
-ms-text-overflow: ellipsis !important;
-o-text-overflow: ellipsis !important;
text-overflow: ellipsis !important;
white-space: nowrap;
overflow-x: hidden;
display: inline-block;
text-align: justify;
width: 162px !important;
padding-bottom: 0px;
margin-bottom: 0px;
line-height: 20px;
position: relative; }
.set-box-title {
position: absolute;
bottom: 0;
left: 0;
margin-left: 10px;
padding-bottom: 7px; }
答案 0 :(得分:1)
这应该是您正在寻找的内容:http://jsfiddle.net/W3WW7/1/
<div class="study-box set-box">
<div class="set-box-title">
<i class="icon icon-folder-close-alt">
</i>
<div>SHOULD BE LINED UP WITH BOTTOM OF FOLDER</div>
</div>
</div>
更改:
.folder-box-title > div, .set-box-title > div {
-ms-text-overflow: ellipsis !important;
-o-text-overflow: ellipsis !important;
text-overflow: ellipsis !important;
white-space:nowrap;
overflow-x:hidden;
display: inline-block;
text-align: justify;
width: 162px !important;
padding-bottom: 0px;
margin-bottom: 0px;
line-height: 20px;
position: relative;
top: 2px; // changed this line
}
添加了:
.icon {
vertical-align: text-bottom;
}