css - フロート右と可変行高さの CSS 垂直整列パズル

Question

数字が右揃えで、テキストに複数の行を含めることができるテーブルがあります。

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

vertical-align:middleは、設定できないline-heightを設定しない限り、 float:rightでは機能しません。これは、一部のテキストが複数の行に折り返され、他のテキストは 1 行のままであるため、行の高さが前もってわからないためです。

数値をテキストの中央に垂直に揃えるにはどうすればよいですか?

編集テーブルを使用しないソリューションを探しています-他の要素を完全に代用するには、あまりにも多くの場合、動作があまりにも異なります。

score 4 · Accepted Answer

テーブルを使用するか、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>

score 0 · Accepted Answer

行クラスをフレックスボックスにすることでそれを行うことができます。

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

score 0 · Accepted Answer

あなたはこれを試すことができます....これはあなたの問題を解決するのに役立つかもしれません....

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

-webkit-align-items:center; }

score 0 · Accepted Answer

Daniel, I solved this using tags in html. Please try this code.

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

score 0 · Accepted Answer

コードをアップグレードしました。任意の数の行 (テーブルなし) で正常に動作します。

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

score 0 · Accepted Answer

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

結果

ここに画像の説明を入力

score 0 · Accepted Answer

margin-top: -5%; に入りました。の中へ

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

うまくいったようです。

css - フロート右と可変行高さの CSS 垂直整列パズル

10 に答える 10

Related

Reference