I can vertically center one-lined text with line-height
, but also with padding-top
and padding-bottom
.
What are the pros and cons of each?
body {
font-size: 12px;
font-family: sans-serif;
}
div {
border: 1px solid #333;
padding-left: 10px;
padding-right: 10px;
display: inline-block;
}
.vcenter1 {
line-height: 50px;
}
.vcenter2 {
padding-top: 19px;
padding-bottom: 19px;
}
<div class="vcenter1">Lorem ipsum line-height...</div>
<div class="vcenter2">Lorem ipsum padding...</div>