Как поместить текст в центр поля при использовании рамки в CSS?

У меня есть следующий код:

* {
  box-sizing: border-box;
}
.container {
  width: 100%;
  max-width: 60rem;
  /* 960 */
  margin: 0 auto;
}
.item {
  width: 100%;
  overflow: hidden;
  margin-bottom: 5rem;
  /* 80 */
}
.item__img,
.item__info {
  width: 50%;
  float: right;
}
.item__img {} .item__img .img-map {
  width: 95%;
  height: 18.750rem;
  /* 300 */
}
.item__img img {
  width: 95%;
  height: 18.750rem;
  /* 300 */
}
<div class="container" role="main">

  <article class="item">

    <div class="item__info">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ac sodales orci. Praesent sit amet consequat purus. Praesent lobortis mi quis rutrum fringilla. Phasellus velit arcu, ultricies vestibulum varius sed, convallis ut eros. Vestibulum
        vel congue felis, ut lacinia tellus. Integer ullamcorper gravida ligula non convallis. Ut suscipit vulputate erat eu porttitor. Morbi sagittis vulputate bibendum. Aliquam ultricies finibus tortor, a elementum nisl aliquet at. In sed dui id mauris
        rutrum ornare.</p>
    </div>
    <div class="item__img">
      <div class="img-map">
        <img src="http://biologypop.com/wp-content/uploads/2014/11/dog1.jpg" />
      </div>
    </div>

  </article>
</div>

извините за плохой стиль, я только начал изучать CSS...

Теперь, увидев это в браузере, я вижу изображение собаки и рядом с ней есть текст. Я хотел бы, чтобы этот текст был выровнен по центру (по вертикали). По сути, в настоящее время это выглядит так, и я бы хотел настроить его следующим образом. Как мне изменить мой код CSS, чтобы он отображался как есть? Спасибо!

РЕДАКТИРОВАТЬ Мой другой вопрос - почему текст не выложен сверху на верхний слой изображения? Я не вижу никаких ограничений для этого в моем коде CSS, кто-нибудь знает, как это работает?

Источник

4 ответа

Решение

Я предлагаю игнорировать любого, кто предлагает использовать display:flex, потому что у него нет поддержки браузера, которая необходима для общественного достояния. (в настоящее время по состоянию на 14/04/15. С течением времени ситуация улучшится и, возможно, станет более серьезным фактором, когда Windows 10 выйдет в конце этого года)

То, что вы хотите, может быть достигнуто с display:table; на родителя и display:table-cell; на детей. В приведенном ниже коде я переставил HTML, чтобы изображение было первым, и удалил float:right; (мой опыт заставляет меня не использовать float больше, поскольку это вызывает так много головных болей, которых можно избежать, но это гораздо более серьезное обсуждение).

Добавление vertical-align:middle; чтобы дети заставили их вертикально выровняться в своей "клетке".

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

p, dl, multicol {
    display: block;
    margin: 1em 0;
}

Чтобы помочь вам понять такие вещи, я предлагаю использовать Mozilla Firefox и загрузить дополнение Firebug.

Вот полный код:

* {
  box-sizing: border-box;
}
.container {
  width: 100%;
  max-width: 60rem;
  /* 960 */
  margin: 0 auto;
}
.item {
  width: 100%;
  overflow: hidden;
  margin-bottom: 5rem;
  display:table;
  /* 80 */
}
.item__img,
.item__info {
  width: 50%;
  display:table-cell;
  vertical-align:middle;
}
.item__img {} .item__img .img-map {
  width: 95%;
  height: 18.750rem;
  /* 300 */
}
.item__img img {
  width: 95%;
  height: 18.750rem;
  /* 300 */
}
<div class="container" role="main">

  <article class="item">

    <div class="item__img">
      <div class="img-map">
        <img src="http://biologypop.com/wp-content/uploads/2014/11/dog1.jpg" />
      </div>
    </div>
    <div class="item__info">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ac sodales orci. Praesent sit amet consequat purus. Praesent lobortis mi quis rutrum fringilla. Phasellus velit arcu, ultricies vestibulum varius sed, convallis ut eros. Vestibulum
        vel congue felis, ut lacinia tellus. Integer ullamcorper gravida ligula non convallis. Ut suscipit vulputate erat eu porttitor. Morbi sagittis vulputate bibendum. Aliquam ultricies finibus tortor, a elementum nisl aliquet at. In sed dui id mauris
        rutrum ornare.</p>
    </div>

  </article>
</div>

Источник

Вы хотите установить высоту вашего div и высоту строки. Подобно:

.div{ height: 100px;
      line-height: 100px;}

Смотрите пример здесь: http://jsfiddle.net/BRxKX/

Источник

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

Например:

HTML

<div class="container">
    <div class="image">200 x 200</div>
    <p>Lots of text here...</p>
</div>

CSS

* {
    box-sizing: border-box;
}

.container {
    display: flex;
    align-items: center;
}

.image {
    height: 200px;
    width: 200px;
    min-width: 200px;
}

Смотрите это здесь в действии. Попробуйте отредактировать текст внутри p тег, чтобы увидеть, как это работает.

Источник

Эта ссылка может вам помочь, я часто использую этот прием, когда речь идет о вертикальном выравнивании:

http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/

Добавьте этот код:

  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);

к контейнеру вокруг текста (в вашем случае 'p'), и убедитесь, что вы установили высоту контейнера (article.item), который оборачивается вокруг изображения и текста.

Источник
Другие вопросы по тегам