dan*_*cek 9 css vertical-alignment right-align
我有一个表格,其中数字与右边对齐,文本可以有多于1行.
http://jsbin.com/qelosicono/1/edit?html,css,output
该垂直对齐:中间不工作浮动:正确的,除非我设置的行高,我不能设置,因为一些文本将换为多行,而其他将保持单线,所以我不知道该行高度前期.
如何将数字垂直对齐到文本的中间？
编辑我正在寻找不使用表格的解决方案 - 它们在很多情况下表现得太不同,完全可以替代其他元素.
您可以使用表格,或使div作为表格.
http://jsbin.com/bobupetefu/2/edit?html,css,output
.column {
background-color : #aaaaff;
width : 300px;
display: table;
}
.row {
border-top-color: #eeeeee;
border-top-width: 1px;
border-top-style: solid;
display: table-row;
}
.text {
padding: 10px;
width : 150px;
display: table-cell;
vertical-align: middle;
}
.sum {
padding: 10px;
vertical-align: middle;
display: table-cell;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div class="column">
<div class="row">
<span class="text">Lorem yposum dolor sit amet</span><span class="sum">1,000,000,000</span>
</div>
<div class="row">
<span class="text">Hello World</span><span class="sum">10,000</span>
</div>
<div class="row">
<span class="text">Very long amount of text, Very long amount of text, Very long amount of text</span>
<span class="sum">10,000</span>
</div>
</div>
</body>
</html>