I am attempting to vertically center a div within a parent div that contains text. Here is my current setup:
The alignment appears a bit off, as the text seems centered properly while the yellow boxes are not. This is how I am currently approaching it:
.btn {
background-color: #ccc;
color: #000;
width: 200px;
border: solid 1px black;
text-align: center;
vertical-align: middle;
display: table-cell;
}
.square {
background-color: #ff0;
width: 20px;
height: 20px;
display: inline-block;
}
.inner {
display: inline-block;
}
<div class="btn">
<div class="square"></div>
<div class="inner">Hello</div>
<div class="square"></div>
</div>
Is "table-cell" + vertical-align the correct approach? I am specifically targeting modern versions of mobile Safari and only care about HTML5, so older browser compatibility is not a concern.
Here is a link to a JS Fiddle demonstrating my issue:
Thank you!