CSS подходящий способ для центрирования контента - PullRequest
Новая
       5

CSS подходящий способ для центрирования контента

5 голосов
/ 06 апреля 2009

Я предпочитаю работать с дизайном на основе 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>

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

Ответы [ 6 ]

10 голосов
/ 06 апреля 2009

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

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

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

5 голосов
/ 06 апреля 2009

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

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

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

3 голосов
/ 06 апреля 2009

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

1 голос
/ 21 октября 2012

Используйте 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>
1 голос
/ 06 апреля 2009

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

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

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

0 голосов
/ 06 апреля 2009

d03boy ответ правильный для правильного центрирования вещей.

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

...