Incorrect vertical alignment in IE8
Have you tried setting the line height to match the height of the text box? The text should automatically appear in the middle of the line
Why is vertical-align: middle not working on my span or div?
Using CSS3:
<div class="outer">
<div class="inner"/>
</div>
Css:
.outer {
display : flex;
align-items : center;
}
use "justify-content: center;" to align elements horizontally
Note: This might not work in old IE's
How can I vertically center a div element for all browsers using CSS?
Below is the best all-around solution I could build to vertically and horizontally center a fixed-width, flexible height content box. It was tested and worked for recent versions of Firefox, Opera, Chrome, and Safari.
.outer {
display: table;
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
.middle {
display: table-cell;
vertical-align: middle;
}
.inner {
margin-left: auto;
margin-right: auto;
width: 400px;
/* Whatever width you want */
}
<div class="outer">
<div class="middle">
<div class="inner">
<h1>The Content</h1>
<p>Once upon a midnight dreary...</p>
</div>
</div>
</div>
Related Topics
CSS Table Border Spacing Inside Only
How to Let a Div Automatically Set It Own Width
Site 5X Faster via Mod_Rewrite, But CSS Images Are Broken
How to Set Margins 0 on Print Preview
Background Image Stretch Y-Axis Only, Keep Repeat-X
Fade in Fade Out on Image Hover Using CSS3
Generate Random Color with Pure CSS (No JavaScript)
Media Query to Target iPhone /Mobile/Ipad
Bootstrap 4: How to Have a Full Width Navbar with The Content in a Container (Like The So Navbar)
Change Font Sizes with Style Sheets for Rstudio Presentation
Position: Relative Appearing Over Position:Absolute
How to Remove The Bold from a Headline
CSS Stylesheets at Top or Bottom? or How to Solve Blank Page Issue
Use Table Row Coloring for Cells in Bootstrap
CSS: Series of Floated Elements Without Wrapping But Rather Scrolling Horizontally