How to Vertically Center Inline (Inline-Block) Elements
There are many different techniques that you can use to align inline (inline-block) elements vertically. In this snippet, we’ll demonstrate some widely used solutions to this kind of alignment problem.
Solution with the CSS padding property
Sometimes inline (inline-block) elements can appear vertically centered due to the equal padding above and below them.
Example of vertically centering inline elements with the padding property:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
background: #c2c2c2;
font-size: 90%;
}
main {
background: #fff;
margin: 20px 0;
padding: 50px;
}
main a {
background: #83d483;
color: #fff;
padding: 40px 30px;
text-decoration: none;
}
</style>
</head>
<body>
<main>
<a href="#0">1</a>
<a href="#0">2</a>
<a href="#0">3</a>
</main>
</body>
</html>Result
Solution with the CSS line-height and height properties
Another way that can solve your problem with vertical alignment is setting the line-height property equal to the height. Use this method to center some text in the case if you are sure your text will not wrap.
Example of vertically centering an inline element with the line-height and height properties:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
background: #c2c2c2;
font-size: 90%;
}
main {
background: #fff;
margin: 20px 0;
padding: 40px;
}
main span {
display: inline-block;
background: #83d483;
color: #fff;
height: 100px;
line-height: 100px;
padding: 20px;
width: 50%;
white-space: nowrap;
}
</style>
</head>
<body>
<main>
<span>Example of a vertically centered line.</span>
</main>
</body>
</html>Solution with the CSS vertical-align property
The CSS vertical-align property applies to the elements that are being aligned and not to their parent element.
Here, we align the <a> and <span> elements within a <div>. In our example, the vertical-align is relative to the current text line, and not the full height of the parent. But if you want the parent element to be taller and its elements to be vertically centered, you can set the line-height property on the <div> instead of the height.
Example of vertically centering inline and inline-block elements with the vertical-align property:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
background: #dbdbdb;
margin: 10px;
line-height: 100px;
}
div > * {
vertical-align: middle;
line-height: normal;
}
a {
background-color: #83d483;
height: 20px;
display: inline-block;
border: solid 1px #666;
padding: 5px;
}
span {
background: #6fa2bf;
}
</style>
</head>
<body>
<div>
<a href="#">Some link</a>
<span>Some text</span>
</div>
</body>
</html>In our next example, we have vertically centered multiple lines of text in a <td> element and a CSS-created table layout. Here, we set the display to "table-cell" for our <p> element and the vertical-align property to "middle". But we don't use the vertical-align property on the <td> element, as it is placed in the middle by default.
Example of vertically centering the content inside <p> and <td> elements:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
background: #c2c2c2;
font-size: 90%;
}
table {
background: #fff;
width: 200px;
border-collapse: separate;
margin: 15px;
height: 200px;
}
table td {
background: #83d483;
color: #fff;
padding: 15px;
border: 5px solid #fff;
/* default is vertical-align: middle; */
}
.center-table {
display: table;
height: 200px;
background: #fff;
width: 200px;
margin: 20px;
}
.center-table p {
display: table-cell;
margin: 0;
background: #83d483;
color: #fff;
padding: 20px;
border: 5px solid #fff;
vertical-align: middle;
}
</style>
</head>
<body>
<table>
<tr>
<td>Example of vertically centered multiple lines of text in a table cell.</td>
</tr>
</table>
<div class="center-table">
<p>Example of vertically centered multiple lines of text in a CSS-created table layout.</p>
</div>
</body>
</html>Solution with the CSS Flexbox
Vertical alignment of inline elements is also possible with Flexbox. You can easily use a single flex-child to center it in a flex-parent.
Example of vertically centering inline elements with Flexbox:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
background: #c2c2c2;
font-size: 90%;
}
div {
background: #fff;
width: 200px;
margin: 20px;
}
.flex-center {
background: #83d483;
color: #fff;
border: 5px solid #fff;
display: flex;
flex-direction: column;
justify-content: center;
height: 200px;
resize: vertical;
overflow: auto;
}
.flex-center span {
margin: 0;
padding: 15px;
}
</style>
</head>
<body>
<div class="flex-center">
<span>Example of vertically centered multiple lines in a flexbox container.</span>
</div>
</body>
</html>Solution with the “ghost element” technique
This technique assumes that a pseudo-element (in our example it’s :before) is given a full height. It is placed within the container, and the text is aligned with that. In the next example, we have a <p> element, which is a block-level element, but we make it inline-block by using the display property.
Example of vertically centering inline elements with a "ghost element":
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
background: #c2c2c2;
font-size: 90%;
}
div {
background: #fff;
width: 240px;
height: 200px;
margin: 15px;
color: #fff;
resize: vertical;
overflow: auto;
padding: 20px;
}
.ghost-center {
position: relative;
}
.ghost-center::before {
content: " ";
display: inline-block;
height: 100%;
width: 1%;
vertical-align: middle;
}
.ghost-center p {
display: inline-block;
vertical-align: middle;
width: 190px;
margin: 0;
padding: 10px;
background: #83d483;
}
</style>
</head>
<body>
<div class="ghost-center">
<p>Example of vertically centered multiple lines in a container.</p>
</div>
</body>
</html>