CSS垂直对齐拼图与浮动右和可变行高答案

【问题标题】：CSS vertical align puzzle with float right and variable line heightCSS垂直对齐拼图与浮动右和可变行高
【发布时间】：2015-08-03 05:46:29
【问题描述】：

我有一个表格，其中数字向右对齐，文本可以多于 1 行。

http://jsbin.com/qelosicono/1/edit?html,css,output

vertical-align:middle 不适用于 float:right 除非我设置了我无法设置的 line-height 因为有些文本会换成多行，而其他文本会保持单行，所以我不知道前面的行高。

如何将数字垂直对齐到文本的中间？

编辑我正在寻找不使用表格的解决方案 - 它们在太多情况下的行为差异太大而无法完全替代其他元素。

【问题讨论】：

为什么要使用浮点数而不是表格或为表格数据显示表格/表格单元格（因为它看起来像表格）？
这只是一个例子。 CSS 应该能够在没有表格的情况下对其进行格式化

标签： css vertical-alignment right-align

【解决方案1】：

您可以使用表格，或将 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>

【讨论】：

【解决方案2】：

使.row 成为一个弹性框。像这样：

.row {
  display: flex;
  align-items: center;
}

http://jsbin.com/kanucuqidu/2/edit

编辑： .sum 右对齐。

添加

.text {
    flex: 0 0 150px;
}
.sum {
    flex: 1;
}

http://jsbin.com/kanucuqidu/3/edit

【讨论】：

很抱歉，我的 chrome 中的总和仍未与右侧对齐
Chrome 31 版本开始支持。使用供应商前缀，例如 -webkit-flex: 0 0 150px; 和 -webkit-align-items: center;
@daniel.sedlacek 将justify-content: space-between; 添加到.row。 css-tricks.com/snippets/css/a-guide-to-flexbox

【解决方案3】：

我升级了您的代码，可以正常处理任意数量的行（没有表格）。

http://jsbin.com/dufesexabu/1/edit?html,css,output

【讨论】：

【解决方案4】：

我输入了margin-top：-5%；进入

.sum {
    float : right;
    vertical-align: middle; 
    line-height: 40px;
    margin-top: -5%;
}

这似乎奏效了。

【讨论】：

【解决方案5】：

另一个使用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;
}

结果

【讨论】：

【解决方案6】：

你可以通过让你的行类成为一个弹性框来做到这一点。

.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;
}

【讨论】：

【解决方案7】：

http://jsbin.com/taqirojupi/2/edit

这是我的解决方案。不幸的是，它仅在您的 .sum 保持在一行（或保持相同大小）时才有效。我将它的位置设置为绝对和 50% 减去它自身高度的一半，它总是将它放在中间。

.sum {
  position:absolute;
  right:10px;
  top:calc(50% - 8px);
}

【讨论】：

【解决方案8】：

我的解决方案在.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;
}

【讨论】：

对不起，OP，你是说右边或左边的文本可以流到更多行，所以你不想发送 line-height？

【解决方案9】：

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

【讨论】：

对不起李，我在打电话，你能更新和分享一下jsbin吗？

【解决方案10】：

你可以试试这个......这可能会帮助你解决你的问题......

.row{
width: 220px;
height: 50px;
border: 1px solid black;
display: -webkit-flex;
display: flex;
float:right;

-webkit-align-items:center; }

【讨论】：