我有一个特定的div
类,它在左上角包含一个图标作为背景图像,在div
的其余部分包含文本。div
的最小高度为32px,以便显示所有图标。
当有多行文本时,这些行看起来很好,因为它们将div
向下拉伸的时间比最小高度长,但是当只有一行时,它不与图标的中心垂直对齐。
JSFiddle这里。
有没有办法让单行垂直对齐,但当有多行时不会弄乱它?
.test {
background-color: #98c5ff;
color: #093d80;
width: 400px;
min-height: 32px;
background-image: url("http://google.com/favicon.ico");
background-repeat: no-repeat;
padding-left: 42px;
}
<div class="test"><p>Short message</p></div>
<hr />
<div class="test"><p>Rather long message that should hopefully wrap on to a second line at some point.</p></div>
<hr />
<div class="test"><p>Message<br />with<br />many<br />lines<br />.</p></div>
你可以像这样在你的CSS中使用display
:
.test {
background-color: #999999;
display: table; /* Add this in here. */
width: 400px;
min-height: 32px;
background-image: url("http://google.com/favicon.ico");
background-repeat: no-repeat;
padding-left: 42px;
}
.test p {
display: table-cell;
vertical-align: middle;
}
display:flex
也是.test
的一个选项。
如果.test
包含一个p
,那么margin:auto 0;
应该足够了:
http://jsfiddle.net/eXZnH/35/编辑:(固定小提琴)http://jsfiddle.net/eXZnH/36/
.test {
background-color: #98c5ff;
color: #093d80;
width: 400px;
min-height: 32px;
background-image: url("http://google.com/favicon.ico");
background-repeat: no-repeat;
padding-left: 42px;
display: flex;/* added */
}
p {
margin: auto 0;/* added */
}
<div class="test">
<p>Short message</p>
</div>
<hr />
<div class="test">
<p>Rather long message that should hopefully wrap on to a second line at some point.</p>
</div>
<hr />
<div class="test">
<p>Message
<br />with
<br />many
<br />lines
<br />.</p>
</div>
尝试用position:absolute;
来固定位置
看到小提琴:这里
HTML:
<div class="container">
<div class="test"><p class="fix">Short message</p></div>
<hr />
<div class="test"><p>Rather long message that should hopefully wrap on to a second line at some point.</p></div>
<hr />
<div class="test"><p>Message<br />with<br />many<br />lines<br />.</p></div>
</div>
CSS: .test {
background-color: #98c5ff;
color: #093d80;
width: 400px;
min-height: 32px;
background-image: url("http://google.com/favicon.ico");
background-repeat: no-repeat;
padding-left: 42px;
}
.fix{
position:absolute;
bottom:390px;
}
您可能需要修改bottom:390px
的值,即使我添加了div container
来保持原位。
由于使用显示表可能会影响你的宽度,所以我建议使用sudo元素.test:after
来实现垂直对齐,如果你打算垂直对齐图标,也可以使用background-position
:
.test {
background-color: #98c5ff;
color: #093d80;
width: 400px;
min-height: 32px;
background-image: url("http://google.com/favicon.ico");
background-repeat: no-repeat;
padding-left: 42px;
}
.test:after{
content:"";
display:inline-block;
vertical-align:middle;
height:100%;
}
.test p{
display:inline-block;
vertical-align:middle;
}
<div class="test"><p>Short message</p></div>
<hr />
<div class="test"><p>Rather long message that should hopefully wrap on to a second line at some point.</p></div>
<hr />
<div class="test"><p>Message<br />with<br />many<br />lines<br />.</p></div>
不是真正的居中,而是视觉居中和保持一致性:顶部填充可以解决这个问题,但其数量将取决于行高和字体大小。
.test p:first-child{padding-top:8px}
另一方面,如果你不介意改变多行div的行高,你可以为"p"元素设置line-height以适应div的高度。
.test {line-height:32px}
http://jsfiddle.net/eXZnH/34/更简单的方法是在CSS
中使用::before.test {
position: relative;
padding-left: 32px;
background-color: #DDD;
}
.test::before {
content: url(http://google.com/favicon.ico);
position: absolute;
left: 0;
top: 50%;
margin-top: -16px; /* image height divided by 2 */
}
检查一下,man
.test {
position: relative;
padding-left: 32px;
background-color: #DDD;
}
.test::before {
content: url(http://google.com/favicon.ico);
position: absolute;
left: 0;
top: 50%;
margin-top: -16px;
}
<div class="test">
<p>
bla bla bla<br />
bla bla bla<br />
bla bla bla<br />
bla bla bla<br />
bla bla bla<br />
</p>
</div>
<div class="test">
<p>bla bla bla bla</p>
</div>
首先,你在每个div后面使用hr标签,因此你不能对齐它们。因此,首先删除它们,然后将这些样式添加到。测试类
.test {
// another styles..
width: 130px; //small width for test
display: inline-block;
vertical-align: middle;
}