Выравнивать изображение и текст внутри одной ячейки по вертикали?

Question

У меня есть небольшая таблица 2x2 HTML. Каждая ячейка содержит одно изображение и один фрагмент текста.

Пример изображения:

Как можно видеть, текст вертикально ниже по вертикали среднего уровня изображения. Как сделать текст вертикально по центру относительно изображения слева?

Я пробовал несколько разных значений display, которые я не могу исправить.

JSFiddle: http://jsfiddle.net/ahmadka/rbJNQ/

Answer 1

Ну. Попробуйте это:

<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 2

Использовать этот 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; 
} 

Обновлено Ссылка: http://jsfiddle.net/rbJNQ/16/

Answer 3

Ваш код выглядит путь к сложным для этого. Это также не табличные данные, поэтому вы не должны использовать элемент <table>.

Вы можете решить эту проблему так просто. Я включил только важные правила CSS в этот ответ.

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

Я понимаю, что этому вопросу 4 года, но эй, почему бы не ответить на него - может быть, это помогает кому-то другому, поскольку ОП, вероятно, так или иначе решал его.

В 2017 году ваша проблема, Ахмад, решена довольно легко с помощью flexbox (просто Google это, вам обязательно понравится - если вы еще не слышали об этом, то есть), установленном для прямого «дети» стола td-с. То, что вы должны сделать, это добавить следующее в CSS в вашей скрипке:

#nst_block #social_body table td > * 
    { 
    display: flex; 
    justify-content: flex-start; 
    align-items: center; 
    } 

Основное позиционирование оси осуществляется justify-content и поперечное расположение оси (вертикальная одна, в вашем случае) осуществляется align-items.

Это все.

Answer 5

Вы можете спроектировать его, используя таблицы. Сохранить значок в одной ячейке и текст в другой ячейке. Сделайте их вертикально-выровненными как средние. Итак, как бы высота была иконка, текст будет выровнен по вертикали. Или, если вы ориентируетесь только на новые браузеры, вы можете спроектировать это с использованием модели гибких ящиков.

Answer 6

это все Div ведут себя как таблице: это прямоугольный блок, участвующий в контексте форматирования блока

.main-контейнер Таблица .container является РЯДЫ .inner-контейнер является КЛЕТКИ

теперь все DIV ведут себя как стол, я только вертикальное выравнивание среднего изображения, так что все содержание выравнивать в средней

.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>