After coming across the solution for ''Vertical Align in a Div ", I decided to implement Adam's answer. However, my challenge lies in figuring out how to display both an image and text side by side with the text centered vertically.
This is what I've attempted so far:
CSS
.outerContainer {
display: table;
width: 100%; /* width of parent */
height:200px;
overflow: hidden;
border:1px solid green;
}
.outerContainer .innerContainer {
display: table-cell;
vertical-align: middle;
width: 100%;
margin: 0 auto;
}
HTML
<div class="outerContainer">
<div class="innerContainer">
<div >
<img src='http://icons.iconarchive.com/icons/danleech/simple/512/facebook-icon.png' height=50px width=50px>
<p style='display:inline-block;font-size:10px;'>Some Text</p>
</div>
</div>
</div>
I'm struggling to align 'Some Text' beside the image at the center of the image itself.
**NOTE:**I am aware that using inline-block here is not advisable. Unfortunately, I haven't found an alternative solution yet.