Align image and text within same cell vertically? - html

Question

I have a small 2x2 HTML table. Each cell contains one image and one piece of text.
Example image:
As you can see, the text is vertically below the vertically middle level of the image. How can I make the text vertically in the center, relative to the image on the left?
I have tried a several different display values, which I can't fix this.
JSFiddle: http://jsfiddle.net/ahmadka/rbJNQ/

Answer 1

this all div behave like a
table: it is a rectangular block that participates in a block formatting context
.main-container is TABLE
.container is ROWS
.inner-container is CELLS
now all div behave like a table I just vertical align middle image so all content align in middle
.main-container{
display:table;
background:#bcbbbb;
width:100%;
height:100vh;
}
.container{
display:table-row;
}
.inner-container {
vertical-align: middle;
display: table-cell;
text-align: center;
}
.inner-container figure{
background-color:#807c7c;
vertical-align: middle;
display: inline-block;
margin: 0;
}
.inner-container p {
display: inline-block;
}
<div class="main-container">
<div class="container">
<div class="inner-container">
<figure>
<img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.svg?v=6e4af45f4d66" alt="stack" width="100" height="100">
</figure>
<p>Example</p>
</div>
<div class="inner-container">
<figure>
<img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.svg?v=6e4af45f4d66" alt="stack" width="100" height="100">
</figure>
<p>Example</p>
</div>
</div>
<div class="container">
<div class="inner-container">
<figure>
<img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.svg?v=6e4af45f4d66" alt="stack" width="100" height="100">
</figure>
<p>Example</p>
</div>
<div class="inner-container">
<figure>
<img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.svg?v=6e4af45f4d66" alt="stack" width="100" height="100">
</figure>
<p>Example</p>
</div>
</div>
</div>

Answer 2

Well. Try this:
<td>
<a id="social_twitter" onclick="window.open(this.href,'external'); return false;" href="http://twitter.com/JenierTeas">
<span>icon</span>
</a>
<span style="vertical-align: middle;">Twitter</span>
</td>

Answer 3

Your code looks way to complicated for this. It is also not really tabular data, so you should not use a <table>-element.
You can solve it as easy as this. I included only the important CSS rules in this answer.
HTML
<div class="social_body">
<a class="facebook">Facebook</a>
<a class="twitter">Twitter</a>
<a class="google">Google+</a>
<a class="share">Share This</a>
</div>
CSS
.social_body {
width: 280px;
overflow: hidden;
margin: 0 auto;
border: 1px dashed black;
}
.social_body a {
float: left;
width: 50%;
font-size: 16px;
line-height: 24px;
}
.social_body a:before {
content: '';
float: left;
width: 24px;
height: 24px;
margin: 0 10px 0 0;
background: transparent 0 0 no-repeat;
}
.social_body a.facebook:before {
background-image: url(http://i.imgur.com/QglLT5Q.png);
}
.social_body a.twitter:before {
background-image: url(http://i.imgur.com/QglLT5Q.png);
}
/* […] You see where this is going. */
Demo
Try before buy

Answer 4

Use This Css
//CSS
#nst_block #social_body table {
background: none repeat scroll 0 center transparent;
border: 1px dashed black;
height: 75px;
margin: 0 auto;
width: 280px;
}
#nst_block #social_body table a {
border: 0 none;
font-family: inherit;
font-size: 16px;
font-style: inherit;
font-weight: inherit;
line-height: 24px;
margin: 0;
outline: 0 none;
padding: 0;
vertical-align: baseline;
}
Updated Link :http://jsfiddle.net/rbJNQ/16/

Answer 5

I realize that this question is 4 years old, but hey, why not answer it - maybe it helps someone else, since the OP probably solved it one way or another in the meantime.
In 2017 your problem, Ahmad, is solved fairly easy with the help of a flexbox (just Google it, you'll surely like it - if you haven't heard of it already, that is) set for the direct 'children' of the table's td-s. What you have to do is add the following to the CSS in your fiddle:
#nst_block #social_body table td > *
{
display: flex;
justify-content: flex-start;
align-items: center;
}
The main axis positioning is done by justify-content and the cross axis positioning (the vertical one, in your case) is done by align-items.
That's all.

Answer 6

You can design it using tables. Keep icon in one cell and text in other cell. Make them vertical-align as middle. So how what ever height the icon may be, text will be aligned vertically middle. Or If you are targeting only new browsers, then you can design this using flex box model.