Блог

Главная - Вопросы по программированию - Вертикальное центрирование Div

Вертикальное центрирование Div

#html #css

#HTML #css

Вопрос:

Почему это не работает (т.Е. Содержимое div не центрируется по вертикали)?:

 <div style="display: table;">
    <div style="vertical-align: middle; display:table-cell; height: 100px; font-size: 11px;">
        <a target="_self" runat="server" href="~/daily.aspx">
        <img src="images.png" /></a>
            content in div<br />
     </div>
</div>

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

У кого-нибудь есть идеи по лучшему стилю css для содержимого в div.

ОБНОВЛЕНИЕ Необходимо объяснить, что мне нужен текст, выровненный по вертикали с изображением, а не только с div. Текст находится внизу изображения. Возможно, придется использовать символы с плавающей запятой.

Комментарии:

1. Я не могу воспроизвести вашу ошибку: jsfiddle.net/QtzRA

2. Это то, что я читал, когда искал в Google. Это должно было сработать, но это не так. Это версия css? Это как-то связано с внешними подразделениями? Мне нужно продолжить расследование.

3. @Rob какой браузер вы используете? у меня тоже работает.

4. IE9 и Firefox Beta 8. Я просматриваю веб-сайт на предмет типов документов, переопределяет скрытый css-тег / img…

5. Извините, я обнаружил, что не объяснил себя ясно:(. Я хочу, чтобы текст был центрирован по вертикали по отношению к изображению. Если изображение имеет размер 60 пикселей и требуется, чтобы текст располагался по центру в середине изображения (30 пикселей), а не в div. Я использовал div, потому что думал, что это сработает.

Ответ №1:

Если вам нужен только текст, выровненный по середине текста, этого будет достаточно:

 <div>
    <div>
        <a target="_self" runat="server" href="~/daily.aspx">
        <img src="images.png" style="vertical-align: middle;"/></a>
        content in div<br />
    </div>
</div>

и вот пример http://jsfiddle.net/Tetaxa/tVQc6 /

Комментарии:

1. Спасибо!!! Извините всех остальных за то, что мой первоначальный вопрос не был объяснен должным образом. Не могу поверить, насколько это просто. Еще раз спасибо.

2. ну, img он расположен в строке, поэтому высота строки будет скорректирована для этой строки. если вы хотите, чтобы текст разбивался на несколько строк сбоку от изображения, вам нужно расположить img его абсолютно или плавающим.

3. Теперь я понимаю. Попробую это сделать. Спасибо.

Ответ №2:

Если вы отображаете элемент в виде таблицы, почему бы не использовать таблицу?

Однако, насколько я знаю, невозможно центрировать содержимое, если вы не знаете его высоту. ЕСЛИ вы знаете высоту, вы можете использовать что-то вроде этого:

 .container {
    position: relative;
}

.vertical {
    position: absolute:
    top: 50%;
    height: 200px;
    margin-top: -100px; // This is half the height
}

Комментарии:

1. Хороший момент в использовании таблицы 🙂 Но я ненавижу использовать таблицы для чего-то такого маленького. В моем примере была определена высота, но я попробую ваш пример и посмотрю, работает ли он. Спасибо за ответ.

2. @Rob Не используйте <table> элементы для данных, отличных от таблиц, особенно для целей стилизации .

3. Я не знал, что это не табличные данные, но этот код определенно работает.

Ответ №3:

почему бы вам не попробовать использовать <table> ? или вы хотите сделать это с <div> самим собой?

Комментарии:

1. Поскольку это не табличные данные, он не должен использовать таблицу

2. Я согласен со всеми, кто предложил не использовать таблицу для этого примера 🙂

Ответ №4:

Я знаю, что это старый вопрос,

но кто-нибудь пробовал вместо этого отображать: таблица / таблица-ячейка / таблица-строка? Это должно быть хорошо. (конечно, не работает на старых IE и т.д.)

Типы из W3Schools: http://www.w3schools.com/cssref/pr_class_display.asp

Эти типы могут быть установлены для любого элемента html, и он должен отображаться как часть таблицы (или самой таблицы). Это означает, что вы должны иметь возможность использовать divs для отображения данных, как если бы они были в таблице. Я не тестировал это, хотя в последний раз я использовал это много лет назад.

возможность отображения элемента в виде таблицы таблица-заголовок Элемент отображается в виде таблицы заголовок таблица-ячейка Элемент отображается в
виде ячейки таблицы таблица-столбец Элемент отображается в виде столбца таблицы
таблица-столбец-группа Элемент отображается в виде таблицы группа столбцов (как)
таблица-нижний колонтитул-группа Элемент отображается как нижний колонтитул таблицы группа строк
таблица-заголовок-группа Элемент отображается как заголовок таблицы группа строк
таблица-строка Элемент отображается как строка таблицы таблица-строка-группа Элемент отображается как группа строк таблицы

Комментарии:

1. Не могли бы вы немного подробнее остановиться на этом? Попробуйте как?

2. Я сделал, но я не думаю, что вы будете его использовать 😉

Метки: