CSS vertical align puzzle with float right and variable line height

Question

I have a table where numbers are aligned to the right and texts can have more than 1 line.

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

The vertical-align:middle does not work with float:right unless I set the line-height which I can not set because some texts will wrap to multiple lines while other will stay single line so I don't know the line height upfront.

How do I vertically align the number to the middle of the text?

EDIT I am looking for solution that does not use tables - they behave too differently in too many cases to be fully substitutable for other elements.

Why do you use float instead of a table or display table/table-cell for tabular datas (because it looks like a table) ? — Mehdi Brillaud, May 21 '15 at 14:04
this is just an example. CSS should be capable of formatting this without a table — daniel.sedlacek, May 21 '15 at 14:33

score 4 · Answer 1 · answered May 21 '15 at 14:35

You could use a table, or make the divs act as a 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>

Arun Prakash · Answer 2 · 2015-05-27T14:48:13.963

3

Make .row a flexbox. Like this:

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

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

Edit: With .sum aligned right.

Add

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

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

edited May 27 '15 at 14:48

answered May 27 '15 at 14:33

Arun Prakash

160
1
9

I am sorry but the sum is still not aligned to the right in my chrome – daniel.sedlacek May 27 '15 at 14:50
It is supported from Chrome 31 version. Use vendor prefix like `-webkit-flex: 0 0 150px;` and `-webkit-align-items: center;` – Arun Prakash May 27 '15 at 14:59
@daniel.sedlacek add `justify-content: space-between;` to `.row`. https://css-tricks.com/snippets/css/a-guide-to-flexbox/ – Philip Dernovoy Jun 03 '15 at 10:43

Donagh McCarthy · Answer 3 · 2015-05-21T14:13:56.280

0

I entered margin-top: -5%; into

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

which seemed to work.

edited May 21 '15 at 14:13

answered May 21 '15 at 13:59

Donagh McCarthy

141
1
3

score 0 · Answer 4 · answered May 30 '15 at 20:45

another version using 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;
}

result

enter image description here

Mark · Accepted Answer · 2015-05-31T15:44:53.477

0

I upgraded your code, works fine with any number of rows (without tables).

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

edited May 31 '15 at 15:44

answered May 31 '15 at 13:10

Mark

563
4
18

score 0 · Answer 6 · answered May 31 '15 at 16:37

You can do it by making your row class a 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;
}

score 0 · Answer 7 · answered Jun 01 '15 at 11:04

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

Here's my solution. It unfortunetly only works as long as your .sum stays on one row (or, remains the same size). I set its position to absolute and 50% minus half of its own height, which always places it in the middle.

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

score 0 · Answer 8 · answered Jun 02 '15 at 21:12

0

My solution uses absolute positioning on .sum and relative on .row.

Because you know the line-height, you can move .sum down by 50% of the container and up by 50% of the line-height.

http://jsfiddle.net/z02fgs4n/ (tested in Chrome)

The important additions below:

.row {
  position: relative;
}

.sum {
  position: absolute;
  right: 10px;
  top: 50%;
  line-height: 40px;
  margin-top: -20px;
}

answered Jun 02 '15 at 21:12

goldins

1,306
1
11
14

Sorry, OP, did you say the text on the right or the left can flow to more lines so you don't want to sent line-height? – goldins Jun 02 '15 at 21:19

score 0 · Answer 9 · answered Jun 03 '15 at 07:31

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

Sorry Lee I am on my phone, can you maybe update and share the jsbin? — daniel.sedlacek, Jun 03 '15 at 07:44

score 0 · Answer 10 · answered Jun 03 '15 at 11:14

0

You can try this....this may help you solve your problem....

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

-webkit-align-items:center; }

answered Jun 03 '15 at 11:14

Kamran Khan

1,042
10
21

CSS vertical align puzzle with float right and variable line height

10 Answers10