I'm having trouble center text vertically in a DIV using CSS. I've followed the related answers here on SO and elsewhere, but can't seem to get it to work. My simplified scenario is
<div class="outer">
<div class="header-title">
<span class="header-text">This is the title</span>
</div>
</div>
and
div.outer {
position: relative;
height: 200px;
border-style: solid;
border-width:1px;
}
div.header-title {
position: absolute;
font-size: 36px;
height: 100%; /* required */
color: green;
border-style: dashed;
border-width:1px;
}
span.header-text {
vertical-align: middle;
border-style: dotted;
border-width:1px;
}
but the result (in Safari) leaves the 'header-text' span at the top of the 'header-title' div:
your example shows a good workaround for vertically centering elements in a div:
display: table-cell;
vertical-align: middle;
so add it to your div css:
div.header-title {
position: absolute;
font-size: 36px;
height: 100%; /* required */
color: green;
display: table-cell;
vertical-align: middle;
border-style: dashed;
border-width:1px;
}
Related
When i put my inline-block element (14x14px) in single-line row (height and line-height = 20px), it takes place not in the middle of it's parent (vertical). Line-height problem picture
Here's a Сodepen example
HTML
<div class="status status_success"> Success</div>
<div class="status status_busy"> Busy</div>
<div class="status status_missed"> Missed</div>
CSS
body {
font-size: 16px;
line-height: 20px;
}
.status {
position: relative;
display: block;
white-space: nowrap;
border: 1px solid #000; // block border for helping test
margin: 0 0 20px;
&:before {
content: '';
display: inline-block;
vertical-align: middle;
width: 14px;
height: 14px;
background-color: #d6d6d6;
border-radius: 50%;
}
}
Tell me, please, why is it happening?
The vertical-align: middle aligns the middle of the element with the middle of lowercase letters in the parent, which simply means the vertical alignment is not a 100% precise way to put an element in the exact middle of its parent.
Src: https://css-tricks.com/almanac/properties/v/vertical-align/
In below samples I added a wrapper (and span's in 2:nd sample, with font size matching the pseudo's size) to show how they interact and how you can do to make the outcome look better.
Note: As suggested by "Vangel Tzo", flex is one way that does the job better.
.wrap {
padding: 20px;
font-size: 16px;
font-family: "helveticaneuecyr", Arial, sans-serif;
line-height: 20px;
}
.status {
position: relative;
white-space: nowrap;
border: 1px solid #000;
margin: 0 0 20px;
}
.status:before {
content: '';
display: inline-block;
vertical-align: middle;
width: 14px;
height: 14px;
background-color: #d6d6d6;
border-radius: 50%;
}
.status_success:before {
background-color: #3ad994;
}
.status_missed:before {
background-color: #e83e3e;
}
.status_busy:before {
background-color: #f5be48;
}
.status span {
display: inline-block;
vertical-align: middle;
font-size: 14px;
}
<div class="wrap">
<div class="status status_success"> Success</div>
<div class="status status_busy"> Busy</div>
<div class="status status_missed"> Missed</div>
</div>
<div class="wrap">
<div class="status status_success"> <span>Success</span></div>
<div class="status status_busy"> <span>Busy</span></div>
<div class="status status_missed"> <span>Missed</span></div>
</div>
You could use display: flex for parent element (.status) and the align-self: center property to center it vertically.
.status {
position: relative;
white-space: nowrap;
border: 1px solid #000;
margin: 0 0 20px;
display: flex;
}
.status:before {
content: '';
display: inline-block;
width: 14px;
height: 14px;
align-self: center;
background-color: #d6d6d6;
border-radius: 50%;
}
An example: http://codepen.io/srekoble/pen/BKWJgx
As #LGSon explaination, the vertical-align is not a magical css, and its behaviour is never trusted by me. So I suggest an alternative way to align your elements in the way you want.
Because you already put position:relative in the .status, I suggest to use position:absolute to style for your generated content and it is more consistent between each browsers.
A codepen example: http://codepen.io/thovo/pen/MypQbW
try below code for horizontaly center code.
body { font-size: 16px; line-height: 20px; text-align:center;}
.status { float:none; position: relative; display:inline-block; white-space: nowrap; border: 1px solid #000; // block border for helping test margin: 0 0 20px;}
try below code for verticaly center code.
.status { display:table: width:100%; float:none; position: relative; display:inline-block; white-space: nowrap; border: 1px solid #000; // block border for helping test margin: 0 0 20px;}
.status:before { display:table-cell; vertical-align: middle;}
I have the following code, and I can't get the text in the header-loggedout div to display centered within the borders. If I adjust the height, vertical margins, or padding of the div it always ends up moving the bottom border down for some reason. The image and text just won't align properly. How can I keep the text and image in (at least roughly) the same position but vertically align both to the middle between the top/bottom borders?
Here's a fiddle.
.header-lower {
position: relative;
display: table;
z-index: 0;
padding: 10px 0px;
width: 100%;
border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd;
}
.header-logo {
display: table-cell;
text-align: left;
margin: 0 0 20px;
vertical-align: inherit !important;
}
.header-logo a {
display: inline-block;
float: left;
max-width: 100%;
line-height: 0;
}
.header-loggedout {
font-size: 26px;
vertical-align: middle;
}
<div class="header-lower">
<div class="header-logo">
<a href="#">
<img title="" alt="alt" src="http://placehold.it/310x39" />
</a>
</div>
<div class="header-loggedout">
Test Text
</div>
</div>
You can set display of .header-loggedout as table-cell:
.header-loggedout {
font-size: 26px;
vertical-align: middle;
display: table-cell;
}
Fiddle Here
replace this class
.header-lower {
border-bottom: 1px solid #ddd;
border-top: 1px solid #ddd;
display: table;
padding: 10px 0;
position: relative;
text-align: center;
vertical-align: middle;
width: 100%;
z-index: 0;
}
You can use absolute positioning
Fiddle here
.header-loggedout {
font-size: 26px;
position:absolute;
top:50%;
right: 20px;
transform: translateY(-50%);
}
How can I center text 'One' vertically with respect to the parent box '#container' using only CSS 2.1 in the following code without using table ? Text '2.1' and text '2.2' also need to be centered vertically in the green boxes.
<div id="container">
<div id="col-1">
One
</div>
<div id="col-2">
<span>2.1</span>
<span>2.2</span>
</div>
</div>
<style>
#container {
position: absolute;
height: 100px;
border: 1px solid crimson;
vertical-align: text-bottom;
}
#col-1, #col-2 {
display: inline-block;
height: 100%;
}
#col-2 span {
display: block;
height: 48px;
line-height: 48px;
border: 1px solid green;
}
</style>
http://jsfiddle.net/wa3r7d6j/
Just change in css:
#col-1, #col-2 {
display: inline-block;
vertical-align:middle;
}
remove : height:100%; from #col-1, #col-2
Check Fiddle here.
html
<div class="main">
<h1>Test</h1>
<span class="details">Jan 21, 2014</span>
</div>
css
.main{
background-color: #666666;
border: 1px solid red;
}
h1{
background-color: #383838;
display: inline-block;
margin: 0;
padding: 0;
}
.main span{
display: inline-block;
vertical-align: middle;
}
jsFiddle
This seems to be really a simple problem, but I'm not able to fix it or I'm being too lazy. Just would like to vertical-align: middle and align it to the right of the div, if I use float: right the element attaches to the bottom of the border above. Don't want to use line-height as well.
If you want a solution that doesn't include line-height, and float, also you want to align the span to the right ....
Then use display: table; for the parent element having nested child elements set to display: table-cell;
Demo
.main{
background-color: #666666;
border: 1px solid red;
display: table;
width: 100%;
}
h1{
background-color: #383838;
display: table-cell;
margin: 0;
padding: 0;
width: 20%;
}
.main span{
display: table-cell;
vertical-align: middle;
text-align: right;
}
You want to add vertical-align: middle; to your h1
Fiddle
I have the table, inside the table I have another box , I am struggling to align the box in center of the table.
My CSS code is
Inside box code
.inside_box{
border: medium solid;
display: table-cell;
float: none;
font-family: Helvetica-bold;
font-size: 20.19px;
height: 100px;
margin: auto;
text-align: center;
vertical-align: middle;
width: 300px;
}
Outside table CSS:
.outer_table {
border: 1px solid black;
border-radius: 5px;
color: #1A6DAC;
font-size: 24px;
left: 40px;
padding: 20px;
position: absolute;
top: 260px;
width: 740px;
}
How to align the inside box in center?
I assume that your HTML is something like this
<div class="outer_table">
<div class="inside_box">hello world</div>
</div>
So, you are using display: table-cell; for .inside_box and margin: auto; won't work, as it's a table cell now, so what you can do is, wrap a div around hello world text, like this
Demo
<div class="outer_table">
<div class="inside_box"><div>hello world</div></div>
</div>
And use CSS like
.inside_box {
border: medium solid;
display: table;
font-family: Helvetica-bold;
font-size: 20.19px;
height: 100px;
margin: auto;
width: 300px;
}
.outer_table {
border: 1px solid black;
border-radius: 5px;
color: #1A6DAC;
font-size: 24px;
left: 40px;
padding: 20px;
position: absolute;
top: 260px;
width: 740px;
}
.inside_box > div {
display: table-cell;
text-align: center;
vertical-align: middle;
}
Make sure you port the text-align: center; and vertical-align: middle; properties from .inside_box to .inside_box > div selector block.
Note: You won't need float: none;, not sure why you are using that.
As I got a comment, that what if you do not want to add an extra div element, so think like that you are using td without a table tag. So there is no way for that div with display: table-cell; to respect margin: auto;.
From Mozilla Developer Network :
Try to change and make your css like this:
.outer_table td {
text-align: center; // Align center
}
.inside_box {
float: none; // if you set float left or right your box will move right there
margin: 0px auto; // this setting for balancing margin left and right
}
<table class="outer_table">
<tr><td><div class="inside_box">Hellow wolrd!</div></td></tr>
</table>