CSS 垂直对齐拼图,向右浮动且行高可变
CSS vertical align puzzle with float right and variable line height
我有一个 table,其中数字右对齐,文本可以超过 1 行。
http://jsbin.com/qelosicono/1/edit?html,css,output
vertical-align:middle 不适用于 float:right 除非我设置 line-height 我无法设置,因为有些文本会换行到多行,而其他文本会保持单行,所以我不知道预先的行高。
如何将数字垂直对齐到文本的中间?
EDIT 我正在寻找不使用 tables 的解决方案 - 它们在很多情况下的行为差异太大,无法完全替代 table其他元素。
我输入的margin-top: -5%;
进入
.sum {
float : right;
vertical-align: middle;
line-height: 40px;
margin-top: -5%;
}
这似乎有效。
您可以使用 table,或者让 div 充当 table。
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>
制作 .row
弹性盒子。像这样:
.row {
display: flex;
align-items: center;
}
http://jsbin.com/kanucuqidu/2/edit
编辑:
.sum
右对齐。
添加
.text {
flex: 0 0 150px;
}
.sum {
flex: 1;
}
另一个版本使用 css transform
:
css
.row {
position: relative;
padding : 10px;
border-top-color: #eeeeee;
border-top-width: 1px;
border-top-style: solid;
vertical-align: middle;
}
.text {
width : 150px;
display: inline-block;
}
.sum {
position: absolute;
top: 50%;
transform: translate(0, -50%);
right: 10px;
}
结果
我升级了你的代码,适用于任意数量的行(没有表格)。
您可以通过使您的行 class 成为一个 flexbox 来做到这一点。
.row {
display: flex;
display: -webkit-flex;
-webkit-align-items: center;
align-items: center;
padding : 10px;
border-top-color: #eeeeee;
border-top-width: 1px;
border-top-style: solid;
}
.text {
flex: 0 0 150px;
display: inline-block;
}
http://jsbin.com/taqirojupi/2/edit
这是我的解决方案。不幸的是,它仅在 .sum
保持在一行(或保持相同大小)时才有效。我将它的位置设置为 absolute 和 50% 减去它自身高度的一半,这总是将它放在中间。
.sum {
position:absolute;
right:10px;
top:calc(50% - 8px);
}
我的解决方案在 .sum
上使用绝对定位,在 .row
上使用相对定位。
因为您知道行高,所以可以将 .sum
向下移动容器的 50%,向上移动 50% 的行高。
http://jsfiddle.net/z02fgs4n/(在 Chrome 中测试)
以下重要补充:
.row {
position: relative;
}
.sum {
position: absolute;
right: 10px;
top: 50%;
line-height: 40px;
margin-top: -20px;
}
Daniel,我使用 html 中的标签解决了这个问题。请尝试此代码。
MyHTML.html:-
<!DOCTYPE html>
<html>
<head>
<style>
.column {
width : 300px;
display: table;
}
.row {
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;
}
</style>
</head>
<body>
<div class="column">
<div class="row">
<span class="text">150000000 USD =</span><span
class="sum">Rs.9587972846</span>
</div>
<div class="row">
<span class="text">15000000 GBP =</span><span
class="sum">Rs.1471043671</span>
</div>
</div>
</body>
</html>
http://www.w3schools.com/css/tryit.asp?filename=trycss_align_float
150000000 USD = Rs.9587972846
15000000 GBP = Rs.1471043671
您可以试试这个....这可能会帮助您解决问题....
.row{
width: 220px;
height: 50px;
border: 1px solid black;
display: -webkit-flex;
display: flex;
float:right;
-webkit-align-items:center;
}
我有一个 table,其中数字右对齐,文本可以超过 1 行。
http://jsbin.com/qelosicono/1/edit?html,css,output
vertical-align:middle 不适用于 float:right 除非我设置 line-height 我无法设置,因为有些文本会换行到多行,而其他文本会保持单行,所以我不知道预先的行高。
如何将数字垂直对齐到文本的中间?
EDIT 我正在寻找不使用 tables 的解决方案 - 它们在很多情况下的行为差异太大,无法完全替代 table其他元素。
我输入的margin-top: -5%; 进入
.sum {
float : right;
vertical-align: middle;
line-height: 40px;
margin-top: -5%;
}
这似乎有效。
您可以使用 table,或者让 div 充当 table。
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>
制作 .row
弹性盒子。像这样:
.row {
display: flex;
align-items: center;
}
http://jsbin.com/kanucuqidu/2/edit
编辑:
.sum
右对齐。
添加
.text {
flex: 0 0 150px;
}
.sum {
flex: 1;
}
另一个版本使用 css transform
:
css
.row {
position: relative;
padding : 10px;
border-top-color: #eeeeee;
border-top-width: 1px;
border-top-style: solid;
vertical-align: middle;
}
.text {
width : 150px;
display: inline-block;
}
.sum {
position: absolute;
top: 50%;
transform: translate(0, -50%);
right: 10px;
}
结果
我升级了你的代码,适用于任意数量的行(没有表格)。
您可以通过使您的行 class 成为一个 flexbox 来做到这一点。
.row {
display: flex;
display: -webkit-flex;
-webkit-align-items: center;
align-items: center;
padding : 10px;
border-top-color: #eeeeee;
border-top-width: 1px;
border-top-style: solid;
}
.text {
flex: 0 0 150px;
display: inline-block;
}
http://jsbin.com/taqirojupi/2/edit
这是我的解决方案。不幸的是,它仅在 .sum
保持在一行(或保持相同大小)时才有效。我将它的位置设置为 absolute 和 50% 减去它自身高度的一半,这总是将它放在中间。
.sum {
position:absolute;
right:10px;
top:calc(50% - 8px);
}
我的解决方案在 .sum
上使用绝对定位,在 .row
上使用相对定位。
因为您知道行高,所以可以将 .sum
向下移动容器的 50%,向上移动 50% 的行高。
http://jsfiddle.net/z02fgs4n/(在 Chrome 中测试)
以下重要补充:
.row {
position: relative;
}
.sum {
position: absolute;
right: 10px;
top: 50%;
line-height: 40px;
margin-top: -20px;
}
Daniel,我使用 html 中的标签解决了这个问题。请尝试此代码。
MyHTML.html:-
<!DOCTYPE html>
<html>
<head>
<style>
.column {
width : 300px;
display: table;
}
.row {
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;
}
</style>
</head>
<body>
<div class="column">
<div class="row">
<span class="text">150000000 USD =</span><span
class="sum">Rs.9587972846</span>
</div>
<div class="row">
<span class="text">15000000 GBP =</span><span
class="sum">Rs.1471043671</span>
</div>
</div>
</body>
</html>
http://www.w3schools.com/css/tryit.asp?filename=trycss_align_float
150000000 USD = Rs.9587972846
15000000 GBP = Rs.1471043671
您可以试试这个....这可能会帮助您解决问题....
.row{
width: 220px;
height: 50px;
border: 1px solid black;
display: -webkit-flex;
display: flex;
float:right;
-webkit-align-items:center; }