Вертикальное центрирование div с множественным содержимым (img и перенос текста) - PullRequest
Новая
       22

Вертикальное центрирование div с множественным содержимым (img и перенос текста)

0 голосов
/ 28 января 2011

Я хотел бы отобразить маленькие коробки, перечисленные в div.Каждое поле имеет фиксированную ширину и высоту, а внутри у них есть изображение и текст (изображения похожи на значки, они одинаковой ширины и высоты).Значки довольно большие по сравнению с текстом рядом с ними, поэтому я хотел бы расположить их вертикально по центру.

Теперь мой код выглядит следующим образом: 

<div class="hbutton">
    <div class="hwrap">
        <img style="vertical-align:middle; float:left;" height="40" src="icon.png" width="40" />
        <span>Some very long text displayed in the box.</span>
    </div>
</div>

Для центрирования hwrapdiv, я использовал этот трюк .Никаких других div-ов, никаких других настроек.

Само центрирование работает нормально, но если я помещаю длинный текст рядом с img, и он не помещается, текст начинает переноситься, но вторая строка начинается подизображение вместо первой строки.

Что я хочу увидеть:
enter image description here

Что я вижу вместо этого:
enter image description here

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

Ответы [ 3 ]

1 голос
/ 28 января 2011

Это не обязательно просто , но следующее, кажется, достигает ваших целей (имейте в виду, что я изменил текстовый элемент с span на p, по личным / семантическим причинам):

html: 

<div class="hbutton">
    <div class="hwrap">
        <img height="40" src="icon.png" width="40" />
        <p>Some very long text displayed in the box.</p>
    </div>
</div>

css: 

.hbutton {
    width: 50%;
    margin: 0 auto 1em auto;
}

.hwrap {
    position: relative;
    /* the following is just for aesthetic reasons, amend to taste */
    border: 1px solid #ccc; 
    border-radius: 1em;
    padding: 0.5em;
}

p {
    margin: 0 0 0 50px;
}

img {
    position: absolute;
    top: 50%;
    left: 0.5em; /* adjust to taste, this is just for aesthetic reasons */
    margin-top: -20px;
    height: 40px;
    width: 40px;
}

JS Fiddle demo .

0 голосов
/ 28 января 2011

Я нашел идеальное решение для проблемы по этой ссылке .

Он правильно выполняет вертикальное центрирование как с однострочным, так и с многострочным текстом, без обходного пути и без экспоненциального числаиз дивов!

0 голосов
/ 28 января 2011

Изменить: 

<div class="hbutton">
    <div class="hwrap">
        <img style="vertical-align:middle; float:left;" height="40" src="icon.png" width="40" />
        <span>Some very long text displayed in the box.</span>
    </div>
</div>

Используя ту же разметку, я бы добавил следующие свойства CSS: 

.hwrap {
    position : relative; // any type of positioning will work, but one must be declared
}
.hwrap span {
    position : absolute;
    margin-left : 50px // {icon width} + 10px for padding
}

Таким образом, сам промежуток никогда не имеет причины быть настолько далеко ... вы можете добавить любое другое позиционирование, которое вам нужно, чтобы оно отображалось на ваш вкус - но вы должны понять.

Редактировать: Я только что заметил, что этот подход почти идентичен подходу Дэвида Томаса. + 1.

...