Question

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

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

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

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

编辑我正在寻找不使用表的解决方案 - 它们在很多情况下表现得太不同，不能完全替代其他元素。

Answer 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>

Answer 2

使data-username成为弹性箱。像这样：

.row

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

修改 .row { display: flex; align-items: center; }右对齐。

添加

.sum

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

Answer 3

我进入保证金最高点：-5％; 成

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

似乎有用。

Answer 4

另一个使用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; }的版本：

<强> CSS

:%s/.*PMC:.*//

<强>结果

enter image description here

Answer 5

我升级了您的代码，适用于任意数量的行（没有表格）。

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

Answer 6

您可以通过将行类设置为flexbox来实现。

$.post('comment/save', {"comment_id.id": id, "title": title});

Answer 7

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

这是我的解决方案。只要您的.sum停留在一行（或者，保持相同的大小），它就会失败。我把它的位置设置为绝对值和50％减去自身高度的一半，它总是放在中间位置。

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

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

Answer 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

Answer 10

你可以尝试这个....这可以帮助你解决问题....

conf/neo4j-wrapper.conf

-webkit对齐项：中心; }

CSS垂直对齐拼图，右浮动和可变线高

10 个答案: