CSS Соответствующий путь к контенту

Я предпочитаю работать с CSS-дизайном, но, как и кодер заднего конца, мои навыки CSS немного слабы. Когда я занимаюсь макетом, я склонен возвращаться к форматированию на основе таблиц, потому что мой ум был искажен годами злоупотреблений на основе таблиц. Есть одна проблема, с которой я всегда путешествую. Каков наилучший CSS альтернатива:CSS Соответствующий путь к контенту

<table width="100%"> 
    <tr> 
     <td align="center"> 
      content goes here 
     </td> 
    </tr> 
</table>

Я иногда использую:

<div style="width:100%; text-align:center">content</div>

Но это, кажется, не совсем верно. Я не пытаюсь выровнять текст, я пытаюсь выровнять содержимое. Кроме того, это, похоже, влияет на выравнивание текста закрытых элементов, что требует исправления для исправления. Единственное, чего я не понимаю: почему нет стиля float: center? Похоже, это было бы лучшим решением. Надеюсь, я что-то упустил, и для этого есть идеальный способ CSS.

источник

2009-04-06 Paul Keister

Вы считаете, что text-align предназначенный для выравнивания текста. На самом деле только Internet Explorer позволяет вам сосредотачивать на нем что-то другое, кроме текста. Любой другой браузер обрабатывает это правильно и не допускает воздействия на элементы блока text-align.

К центральным элементам блока, использующим css, вы используете margin: 0 auto; так же, как предложил Джо Филлиппс. Хотя вам вообще не нужно держать таблицу.

Причина, по которой нет float: center;, заключается в том, что плавающее предназначено для размещения элементов (как правило, изображений) либо влево, либо вправо и имеет поток текста вокруг них. Плавание чего-то в центре не имеет смысла в этом контексте, поскольку это будет означать, что текст должен будет течь по обе стороны от элемента.

источник

2009-04-06 19:07:08 Guffa

Nice поймать с таблицей. Я не пристально посмотрел на это. –

Привет, спасибо, это помогает. Но как 'margin: 0 auto;' делает магию, я не понимаю, почему значение нуля и auto будет центрировать таблицу? – GMsoF

@GMsoF: нуль - это вертикальный запас, а авто - горизонтальный запас. 'margin: 0 auto;' - это короткая форма 'margin: 0 auto 0 auto;', которая является короткой формой 'margin-top: 0; margin-right: auto; margin-bottom: 0; margin-left: auto; '. – Guffa

Я бы рекомендовал положить <div> в свой <td> и установив атрибут стиля для style="width: 200px; margin: 0 auto;"

Загвоздка в том, что вы должны установить фиксированную ширину.

Редактировать: Рассмотрев вопрос снова, я бы рекомендовал полностью отказаться от стола. Просто используйте <div style="width: 200px; margin: 0 auto;>, как я предложил, и нет необходимости в таблице.

источник

2009-04-06 18:43:22

Привет спасибо ответ, что это помогает. Но как margin: 0 auto; делает волшебство, я не понимаю, почему ноль и значение auto будут центрировать таблицу? – GMsoF

Ответ d03boy правильный для правильного способа сосредоточить внимание на вещах.

Чтобы ответить на ваш другой комментарий, «Кроме того, это, похоже, влияет на выравнивание текста закрытых элементов, что требует исправления для исправления». Это характер работы CSS, установка свойства в элементе влияет на все его дочерние элементы, если свойство не переопределено одним из них (при условии, что свойство имеет значение inherited, конечно).

источник

2009-04-06 18:50:33

Где вы обычно это делаете? Для меня - я чаще всего пытаюсь сосредоточить весь дизайн сайта, так что я обычно делаю это:

<html> 
    <body> 
    <div id="wrapper"> 
    <div id="header"> 
    </div> 
    <div id="content"> 
    </div> 
    <div id="footer"> 
    </div> 
    </div> 
    </body> 
</html> 


body {text-align:center;} 
#wrapper {margin:0 auto; text-align:left; width:980px;}

Это будет центром всего проекта на странице в 980px ширины, в тот же время оставляя весь текст выравнивается по левому краю (если этот текст находится в пределах элемента #wrapper).

источник

2009-04-06 18:58:17

Вот хороший ресурс для центрирования с использованием CSS.
http://www.w3.org/Style/Examples/007/center
Это показывает, как центрировать текст, блоки, изображения и как центрировать их по вертикали.

источник

2009-04-06 19:11:32

Использование display:inline-block для включения text-align:center и центра контента без фиксированной ширины:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <title>Centering</title> 

    <style type="text/css"> 
    .container { text-align:center; } 

    /* Percentage width */ 
    .wrapper { width: 99%; } 

    /* Use inline-block for wrapper */ 
    .wrapper { display: inline-block; } 

    /* Use inline for content */ 
    .content { display:inline; } 
    </style> 

</head> 
<body> 
    <div class="container"> 
    <div class="content"> 
     <div class="wrapper"> 
      <div>abc</div> 
      <div>xyz</div> 
     </div> 
    </div> 
    </div> 
</body> 
</html>

источник

2012-10-20 22:04:34

Это хороший трюк! –

CSS Соответствующий путь к контенту

ответ

Смежные вопросы