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

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

Теперь мой код выглядит так:

<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>

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

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

Что Я ХОЧУ посмотреть:
введите описание изображения здесь

Вместо этого я вижу:
введите описание изображения здесь

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


image vertical-alignment html css word-wrap
person Tenshiko    schedule 28.01.2011    source источник

Ответы (3)


arrow_upward
1
arrow_downward

Это не обязательно легко, но, похоже, для достижения ваших целей (имейте в виду, что я изменил текстовый элемент с 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.

person David says reinstate Monica    schedule 28.01.2011
comment
Это решает проблему переноса, но текст все еще не центрирован по вертикали :( - person Tenshiko; 28.01.2011
comment
@Tenshiko, ты прав. Вы можете добавить display: table-cell; vertical-align: middle; к .hwrap, но тогда это испортит img _4 _... = / - person David says reinstate Monica; 28.01.2011

arrow_upward
0
arrow_downward

Изменить:

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

person jlmakes    schedule 28.01.2011
comment
Я разместил несколько изображений к своему первоначальному вопросу, чтобы показать вам проблему. Я также был бы признателен за идею, как бы вы сделали это с нуля! Спасибо - person Tenshiko; 28.01.2011
comment
@Tenshiko - я изменил свой ответ, показывая метод, который я использовал раньше, для создания маркированных списков (где маркер - это значок, как на вашем рисунке). - person jlmakes; 28.01.2011

arrow_upward
0
arrow_downward

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

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

person Tenshiko    schedule 28.01.2011
comment
Проверьте мой опубликованный ответ, для неаддитивного решения. - person David says reinstate Monica; 28.01.2011