Как я могу вертикально центрировать текст в двух соседних div? - PullRequest
Новая
       8

Как я могу вертикально центрировать текст в двух соседних div?

3 голосов
/ 31 декабря 2008

Спасибо, что прочитали это.

У меня есть разметка, аналогичная приведенной ниже. Использование высоты строки работает, когда есть только одна строка текста, но данные комментариев часто будут многострочными. Каков наилучший способ получить метку и данные по центру? 

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

2 голосов
/ 31 декабря 2008

http://www.jakpsatweb.cz/css/css-vertical-center-solution.html

и, конечно:

http://www.google.com/search?hl=en&sa=X&oi=spell&resnum=0&ct=result&cd=1&q=vertically+align+text+div&spell=1

:)

Таблицы имеют свое место; но хорошо бы попытаться понять, как сделать что-то в div, прежде чем возвращаться к таблицам. Таким образом, когда приходит время, когда вы не можете сделать что-то в таблице, вы сразу же знаете, как это сделать в div. Кроме того - хотя они могут быть более сложными, чем таблицы, они позволяют НАМНОГО повысить гибкость в вашем дизайне, если вы знаете, как.

1 голос
/ 31 декабря 2008

Вероятно, вы хотите использовать <table> конструкцию для ваших данных. Несмотря на то, что существует множество документов, в которых говорится: «Таблицы плохие, никогда не используйте таблицы», таблицы, безусловно, являются правильной конструкцией, поскольку они могут легко достичь того визуального эффекта, который вы ищете, и (насколько я могу судить) вас представляем табличные данные.

0 голосов
/ 31 декабря 2008

Я читаю решения, которые учат вас, как делать это с DIV. Когда я столкнулся с подобной проблемой, я просто использовал стол, который выглядит мне менее грязно и довольно элегантно.

Я не думаю, что есть что-то неправильное в использовании таблицы, по крайней мере, в этой конкретной ситуации.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...