Как я могу вертикально центрировать текст в двух бок о бок div?
Спасибо, что прочитали это.
У меня разметка аналогична той, что ниже. Использование высоты строки работает, когда есть только одна строка текста, но данные комментариев часто будут многострочными. Как лучше всего расположить метку и данные по центру по вертикали?
<html>
<head>
<style>
body {margin:0; padding:0; font-size:12px; font-family:Verdana; text-align:center;}
body {text-align: -moz-center; } /* For Firefox */
.record {width:760px; text-align:left; }
.label {float:left; width:125px; line-height:75px;}
.data {float:left; margin-left:10px; line-height:75px;}
.clear {clear:left;}
</style>
</head>
<body>
<div class = "record">
<div class = "label">Subject:</div>
<div class = "data">This is the subject</div>
<span class = "clear"></span>
<div class = "label">Status:</div>
<div class = "data">This is the status</div>
<span class = "clear"></span>
<div class = "label">Comments:</div>
<div class = "data">These are the comments</div>
<span class = "clear"></span>
</div>
</body>
</html>
Ответы 3
Возможно, вы захотите использовать конструкцию <table> для ваших данных. Несмотря на то, что вокруг циркулирует множество документов, в которых говорится: «Таблицы - это плохо; никогда не используйте таблицы», таблицы явно являются здесь правильной конструкцией, потому что они могут легко достичь желаемого визуального эффекта, и (насколько я могу судить) вы представляют табличные данные.
http://www.jakpsatweb.cz/css/css-vertical-center-solution.html
и конечно:
:)
У таблиц есть свое место; но лучше попытаться понять, как что-то сделать в div, прежде чем возвращаться к таблицам. Таким образом, когда придет время, когда вы не сможете что-то сделать в таблице, вы сразу узнаете, как это сделать в div. Кроме того - хотя они могут быть более сложными, чем таблицы, они позволяют НАМНОГО больше гибкости в вашем дизайне, если вы знаете, как это сделать.
Первая ссылка хороша, но эта техника не работает в IE7, и решение IE7, которое она дает, не очень хорошее. Я думаю, что в данном случае верен хор людей, говорящих «используйте стол».
Я читал решения, которые научат вас делать это с помощью DIV. Когда я столкнулся с подобной проблемой, я просто использовал таблицу, использование которой мне кажется менее беспорядочным и довольно элегантным.
Я не думаю, что есть что-то плохое в использовании таблицы, по крайней мере, в этой конкретной ситуации.
Я согласен. Таблицы бла-бла плохие, вы пытаетесь заставить два div сидеть рядом и разделить экран. Это намного сложнее, чем просто сделать стол. При этом размещение таблицы внутри div - неплохая идея, она упрощает перемещение по странице.