I'm trying to center a div vertically in a parent div, where text is present. Here's what I've got:
It looks a little funny because the text seems to be centered properly, but the yellow boxes aren't. This is how I'm doing it:\[code\].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>\[/code\]Should my usage of "table-cell" + vertical-align be working? I only care about html5, I'm really just targeting the latest versions of mobile safari, so don't have to worry about older browsers etc.Here's a js fiddle of this:http://jsfiddle.net/TrJqF/Thanks