CSS: поместите div вертикально к высоте текста - PullRequest
Новая
       2

CSS: поместите div вертикально к высоте текста

2 голосов
/ 28 февраля 2012

Я ищу решение, чтобы расположить элемент div (с фиксированной шириной) рядом с текстом, как в этом примере:

Example

Что такоенаиболее распространенное решение с использованием CSS?

Ответы [ 2 ]

2 голосов
/ 28 февраля 2012

Я бы сделал это примерно так:

http://jsfiddle.net/Xfmdr/

.column { display: table-cell; }
.column:nth-of-type(1) { vertical-align: middle; }
#green { background: green; padding: 30px; margin: 10px;}


<div id="container">
    <div id="left" class="column">
        <div id="green">div</div>        
    </div>
    <div id="right" class="column" >
        <p>Lorem Ipsum </p>        
    </div>
</div>​

Для справки, вертикальное выравнивание - это боль в гайкахв CSS.Посмотрите эту очень полезную статью о том, почему я выбрал отображение в качестве ячейки таблицы для этого варианта использования.http://phrogz.net/css/vertical-align/index.html

1 голос
/ 28 февраля 2012

В этой статье рассказывается о возможных способах выравнивания по вертикали с использованием CSS.http://phrogz.net/css/vertical-align/index.html

...