HTML: замена для <center>

Question

Я всегда думал, что замена тега <center> на <div style="text-align:center;"> даст мне те же результаты. Видимо, я был не прав.

Это часть моего HTML: (Вы также можете увидеть это в действии на странице, которую я создал для этого вопроса: http://www.catmoviez.com/ErrorPageSO.aspx

<div style="margin: 0 auto; background-color:red;border:5px solid black;margin-top:5px;width:750px;text-align:center;">
    <span style="width:560px;padding-right:10px;text-align:left;float:left;">
    <h1>Oops... We're sorry.</h1>

    <h3>You've just encountered an unknown error. <br /></h3>
    This site is a work-in-progress, we have already been informed of the error and will do our best to fix it. <br />
    We would be thankful if you could contact us through the appropriate button and elaborate on what caused this error to appear.<br />
    <br />
    <h3>
    You can go back to the <a style="text-decoration:underline;" href="Default.aspx">Home page</a> and continue using Moviez.NET.       
    </h3>
    </span><span style="width:180px;float:left;"><img src="Resources/Images/404.jpg" /></span>
</div>

Я хочу сделать 2 вещи:

1. Избавьтесь от тега <center>, сохраняя div в центре страницы.
2. Убедитесь, что цвет фона DIVs и границы влияют на внутренние пролеты.

UPDATE: Задача 1 выполнена. Время для цели № 2.

Answer 1

Используйте margin: 0 auto; на корпусе <div>

<div style="margin: 0 auto; background-color:red;border:5px solid black;margin-top:5px;width:750px;text-align:center;">
  <span style="width:560px;padding-right:10px;text-align:left;">
  <h1>Oops... We're sorry.</h1>

  <h3>You've just encountered an unknown error. <br /></h3>
  This site is a work-in-progress, we have already been informed of the error and will do our best to fix it. <br />
  We would be thankful if you could contact us through the appropriate button and elaborate on what caused this error to appear.<br />
  <br />
  <h3>
  You can go back to the <a style="text-decoration:underline;" href="Default.aspx">Home page</a> and continue using Moviez.NET.           
  </h3>
  </span><span style="width:180px;"><img src="Resources/Images/404.jpg" /></span>
</div>

Увидеть это в действии .

Ссылка: CSS: центрирование вещей

Answer 2

Если вы хотите просто расположить текст по центру, используйте стиль CSS:

text-align:center;

Однако, если вы хотите центрировать элемент или сам div, есть довольно некоторые решения для этого, одно из которых ниже:

.mydiv
{
  margin:0 auto;
}

Или даже с чем-то вроде этого:

.mydiv
{
  width:300px; // the width can sometimes be ignored based on inherent size of element.
  margin-left:auto;
  margin-right:auto;
}

Или даже с чем-то вроде этого:

.mydiv
{
  margin-left:50%;
  margin-right:50%;
}

Итак, вы видите, что может быть больше возможностей.

Answer 3

Встроенное содержимое выравнивается по text-align, содержимое блока выравнивается по полям (для случая центрирования установлено значение auto). См. Центрирование с использованием CSS .

Answer 4

Попробуйте, это сработало для меня, когда я хотел бы, чтобы у меня все еще было это

<center>

тег

< p style="text:align-center" >  example image or text < / p >

Answer 5

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

делает левое позиционирование на 50%, а затем отступает от левой половины ширины деления.

пример ниже.

#mainspace {
    position:absolute;
    left:50%;
    margin-left:-450px;
    height:auto;
    width:900px;
    border:none;
    }