Andres Ilich has it right. Just in case someone misses his comment…
A.) If you only have one line of text:
div
{
height: 200px;
line-height: 200px; /* <-- this is what you must define */ }
vertically centered text
B.) If you have multiple lines of text:
div
{
height: 200px;
line-height: 200px;
}
span
{
display: inline-block;
vertical-align: middle;
line-height: 18px; /* <-- adjust this */ }
vertically centered text vertically centered text vertically centered text vertically centered text vertically centered text vertically centered text vertically centered text vertically centered text vertically centered text vertically centered text
Create a container for your text content, a span perhaps.
#column-content {
display: inline-block;
}
img {
vertical-align: middle;
}
span {
display: inline-block;
vertical-align: middle;
}
/* for visual purposes */
#column-content {
border: 1px solid red;
position: relative;
}
1234
yet another text content that should be centered vertically
JSFiddle