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

Question

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

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

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

EDIT Другой вопрос: почему текст не выстроен сверху на верхний слой изображения? Я не вижу никаких ограничений для этого в моем коде css, кто-нибудь знает, как это работает?

Answer 1

Мое предложение - игнорировать любого, кто предлагает использовать дисплей: flex, потому что он doesn't have the browser support it needs for public domain. (в настоящее время по состоянию на 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>

Answer 2

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

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), который обтекает изображение и текст.

Answer 3

Вы также хотите установить высоту своего div и line-height. как:

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

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

Answer 4

Используйте 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; 
} 

See it here in action. Попробуйте отредактировать текст в теге p, чтобы увидеть, как он работает.