Идеальный способ выравнивания div рядом с изображением

У меня есть два div. Первый имеет файл изображения, а другой - имя пользователя. Я просто хочу выровнять второй вертикальный центр div так же, как этот путь.Идеальный способ выравнивания div рядом с изображением

Но это одна не выровнен идеально. Этот экран уже закодирован, но проблема в том, что я до сих пор не мог найти идеальный способ выровнять по центру имя пользователя div. Я просто использую невооруженным глазом и настраиваю прокладку.

Вот мой код

.tag-header { 
    padding: 12px; 
    overflow: auto; 
} 
.tag-header .tag-header-img { 
    height: 55px; 
    width: 55px; 
    border-radius: 50%; 
    float: left; 
} 

.tag-header .info { 
    padding: 14px 11px; 
    display: inline-block; 
    font-size: 1.3rem; 
    line-height: 14px; 
} 

.tag-header .info p { 
    margin: 0; 
    font-weight: 600; 
    line-height: 1; 
    font-size: 1.3rem; 
} 
.tag-header .time { 
    display: block; 
    font-size: 1.2rem; 
} 
.info span { 
    font-weight: 300; 
    color: #b9b9b9; 
} 

<div class="tag-header"> 
     <div class="col-md-6"> 
      <div class="row"> 
       <img class="tag-header-img" src="http://blog.couchbase.com/binaries/content/gallery/speakers/kirkk.jpg" alt=""> 
       <div class="info"> 
        <p>John Stevens</p> 
        <span class="time">2 minutes ago</span> 
       </div> 
      </div> 
     </div>

fiddle

Любое решение?

источник

2016-11-19 Janath

Это похоже на изображение, которое вы прикрепили ... – odedta

Вы также можете играть с высотой строки, например, дать ей высоту 60 пикселей, а затем заполнить имя пользователя 12px, но это повлияет на отзывчивость, поэтому вам придется принять это также учитывается. Я действительно не вижу проблемы здесь, ваш код соответствует прикрепленному изображению – odedta

Вы хотите, чтобы вертикальное выравнивание я предполагаю? – Blag

Heres ваша скрипка обновленного https://jsfiddle.net/p4x7d3fq/5/ - я добавил границы просто, чтобы вы могли видеть.

Используя display:table-cell, вы можете достичь этого, если не возражаете против незначительных изменений, включая добавление высоты, соответствующей высоте вашего изображения.

источник

2016-11-19 13:47:23 Stuart

убедитесь, что вы также положили 'display: table;' на главный контейнер div –

Это так. Если вы посмотрите на скрипку ...^ – Stuart

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

Попробуйте использовать Flexbox:

.info { 
    display: flex; 
}

источник

2016-11-19 13:42:14 Johannes

Это не обязательно приведет к желаемому результату. – sinisake

зависит от того, на каких браузерах должен работать веб-сайт, 'display: flex;' не поддерживается повсеместно: http://caniuse.com/#feat=flexbox –

Вы, кажется, сделали ОК работу, делая их оба имеют одинаковую высоту, изображение не должны использовать float: left;, вы можете также использовать display: inline-block; на нем и vertical-align: middle; как по изображению, так и по имени, таким образом, чтобы они не имели одинаковой высоты.

Кроме того, убедитесь, что вы правильно используете Bootstrap, сначала вам нужен «контейнер» div, в контейнер вы помещаете строку, а в этой строке вы помещаете столбцы.

Вы только поместите div с классом строк в столбце div, если вы хотите больше столбцов в этом столбце.

<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-md-12"> 
 
    </div> 
 
    </div> 
 
</div>

источник

2016-11-19 13:46:56

Обычно я использовал вышеупомянутую структуру, но скрипку я не делал. – Janath

Идеальный способ выравнивания div рядом с изображением

ответ

Смежные вопросы