Menu
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.
291
By creating a wrapper around the content you want floated, you can then use the ::after or ::before pseudo selectors to vertically align your content within the wrapper. You can adjust the size of that content all you want without it affecting the alignment.
The vertical-align property in CSS controls how elements set next to each other on a line are lined up. In order for this to work, the elements need to be set along a baseline. As in, inline (e.g. <span> , <img> ) or inline-block (e.g. as set by the display property) elements.
you need to set the outer div to be displayed as a table and the inner div to be displayed as a table-cell — which can then be vertically centered. For Internet Explorer, you need to position the inner div absolutely within the outer div and then specify the top as 50%.
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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
