Sunday, 29 October 2017
html - How do I vertically center text with CSS?
Answer
Answer
I have a
div element which contains text, and I want to align the contents of this div vertically
center.
Here is my div
style:
#box {
height: 170px;
width:
270px;
background: #000;
font-size: 48px;
color: #FFF;
text-align:
center;
}
Lorem
ipsum dolor
sit
What
is the best way to do this?
You can
try this basic approach:
data-babel="false">
div {
height: 100px;
line-height: 100px;
text-align:
center;
border: 2px dashed
#f69c55;
}
Hello
World!
It
only works for a single line of text though, because we set the line's height to the
same height as the containing box element.
A more versatile
approach
This is another way to align text
vertically. This solution will work for a single line and multiple lines of text, but it
still requires a fixed height container:
data-babel="false">
div {
height: 100px;
line-height: 100px;
text-align: center;
border: 2px dashed
#f69c55;
}
span {
display: inline-block;
vertical-align: middle;
line-height:
normal;
}prettyprint-override">
Hello
World!
The
CSS just sizes the
vertical-align:
middle. Then it sets the line-height back to normal for theblock.
Simulating table
display
And here is another option, which may
not work on older browsers that don't support display: table and
display: table-cell (basically just Internet Explorer
7). Using CSS we simulate table behavior (since tables support vertical alignment), and
the HTML is the same as the second example:
data-babel="false">
div {
display: table;
height: 100px;
width: 100%;
text-align: center;
border: 2px dashed #f69c55;
}
span
{
display: table-cell;
vertical-align:
middle;
}
Hello
World!
Using absolute
positioning
This technique uses an
absolutely positioned element setting top, bottom, left and right to 0. It is described
in more detail in an article in Smashing Magazine,
rel="nofollow noreferrer">Absolute Horizontal And Vertical Centering In
CSS
data-babel="false">
div {
display: flex;
justify-content: center;
align-items:
center;
height: 100px;
width: 100%;
border:
2px dashed #f69c55;
}prettyprint-override">
Hello
World!
php - file_get_contents shows unexpected output while reading a file
I want to output an inline jpg image as a base64 encoded string, however when I do this : $contents = file_get_contents($filename); print ...
No comments:
Post a Comment