Если не работает {margin:0 auto;}

Jafar · January 12, 2009

Сделал статичный сайт с фиксированной шириной, но почему-то он все не хочет центроваться. Раньше использовал {margin:0 auto;}, но на этот раз он почему-то не работает. Подскажите пожалста какие могут быть причины или какие еще могут быть способы для выравнивания блоков по центру страницы.

psywalker · June 26, 2010

не совсем понял...
народ.ру сам вставляет это
<style>
#bn {display:block;}
#bt {display:block;}
</style>
но тем не менее на странице нет дива с таким ид...
я там ранее выкладывал сайт архивом, можно локально посмотреть, там этого нет, все равно не центрируется...

Значит пропиши ширину главному контейнеру и отцентрируй его.

barsev · June 26, 2010

Тут можно посмотреть
тут можно скачать сайт архивом(пароль qwerty)
Народ, помогите плиз, не могу сам разобраться уже которые сутки...

Да не будет здесь нормально ничего работать. Посмотрите внимательно вложенность тегов div, есть ли закрывающий - пара открывающему. Например DIV id=content, более внимательно не смотрел.

psywalker · June 27, 2010

Да, и атрибуты надо в кавычки брать.

ampersant · February 6, 2012

Сделал статичный сайт с фиксированной шириной, но почему-то он все не хочет центроваться. Раньше использовал {margin:0 auto;}, но на этот раз он почему-то не работает. Подскажите пожалста какие могут быть причины или какие еще могут быть способы для выравнивания блоков по центру страницы.

Перед <!DOCTYPE> нельзя ничего писать, кроме PHP-скрипта.

При такой записи работать в IE не будет (сверху html-комментарий ):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Morti · August 28, 2015

Прошу помощи указать что надо прописать (подправить) так как сам не допетрю никак. По сути надо форму подписки отцентровать. Вроде как тут необходимо изменить:

#sub_form {
overflow: auto;
margin: auto;
position: auto;

.Absolute-Center { margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; } - не помогает мне. центрирование по горизонту надо.

сайт - http://secretsleasing.ru/

Сам скипт:

<!— [if gte mso 9]><![endif]--><!— [if gte mso 10]>
<style> /* Style Definitions */
table.MsoNormalTable {
   mso-style-name:"Обычная таблица";
   mso-tstyle-rowband-size:0;
   mso-tstyle-colband-size:0;
   mso-style-noshow:yes;
   mso-style-priority:99;
   mso-style-qformat:yes;
   mso-style-parent:"";
   mso-padding-alt:0cm 5.4pt 0cm 5.4pt;
   mso-para-margin:0cm; mso-para-margin-bottom:.0001pt;
   mso-pagination:widow-orphan;
   font-size:11.0pt;
   font-family:"Calibri","sans-serif";
   mso-ascii-font-family:Calibri;
   mso-ascii-theme-font:minor-latin;
   mso-fareast-font-family:"Times New Roman";
   mso-fareast-theme-font:minor-fareast;
   mso-hansi-font-family:Calibri;
   mso-hansi-theme-font:minor-latin;
   mso-bidi-font-family:"Times New Roman";
   mso-bidi-theme-font:minor-bidi;
   }
</style>
<![endif]-->

<style>
.name {
   -moz-border-radius: 3px !important;
    -webkit-border-radius: 3px !important;
    border: 1px solid #fff !important;
    border-radius: 3px !important;
    color: #fff !important;
    cursor: pointer !important;
    float: left !important;
    font-size: 21px !important;
    height: 33px !important;
    margin-left: 10px !important;
    margin-top: 0 !important;
    padding-left: 15px !important;
    width: 150px !important;
}
.email {
   -moz-border-radius: 3px !important;
    -webkit-border-radius: 3px !important;
    border: 1px solid #fff !important;
    border-radius: 3px !important;
    color: #fff !important;
    cursor: pointer !important;
    float: left !important;
    font-size: 21px !important;
    height: 33px !important;
    margin-left: 10px !important;
    margin-top: 0 !important;
   padding-left: 15px !important;
    width: 150px !important;
}
.submit_btn {
   -moz-border-radius: 3px !important;
   -webkit-border-radius: 3px !important;
   background-color: #fe5e22 !important;
   border: 1px solid #fff !important;
   border-radius: 3px !important;
   color: #fff !important;
   cursor: pointer !important;
   float: left !important;
   font-size: 19px !important;
   font-weight: 600 !important;
   margin-left: 10px !important;
   margin-top: 0 !important;
   padding: 8px !important;
   text-decoration: none !important;
   text-transform: uppercase !important;
   width: 210px !important;
}
#sub_form {
overflow: auto;
margin: auto;
position: auto;

}
.s_form {
   text-align:center; //НА ВСЯКИЙ СЛУЧАЙ, МОЖНО УДАЛИТЬ
   margin:0 auto; //НА ВСЯКИЙ СЛУЧАЙ, МОЖНО УДАЛИТЬ
}
</style>
<div id="sub_form">
<h3 style="text-align: center;" class="tm-panel-title-large">Наладить контакт</h3>
<p style="text-align: center;" class="uk-article-lead uk-margin-large-bottom">Подпишитесь на новостную ленту или свяжитесь с нами</p>
<form class="s_form" name="SR_form" target="_blank" action="http://smartresponder.ru/subscribe.html"method="post">
<input value="1" name="version" type="hidden">
<input value="0" name="tid" type="hidden">
<input value="111111" name="uid" type="hidden">
<input value="ru" name="lang" type="hidden">
<input value="111111" name="did[]" type="hidden">
<input class="name" name="field_name_first" tabindex="900" placeholder="Ваше Имя" required="" type="text">
<input class="email" name="field_email" tabindex="901" placeholder="Ваш E-Mail" required="" type="text">
<input class="submit_btn" name="SR_submitButton" type="submit" value="Подписаться">
</form>
</div>

Если не трудно, укажите для бестолковых что прописать, чтобы форма отцентровалась по горизонтали.

Web Creation · August 29, 2015

Прошу помощи указать что надо прописать (подправить) так как сам не допетрю никак. По сути надо форму подписки отцентровать.

Выложите код на http://plnkr.co/ или http://jsfiddle.net/ чтобы его легко можно было просмотреть и поправить. Так неудобно читать код, как Вы выложили

Morti · August 29, 2015

Выложите код на http://plnkr.co/или http://jsfiddle.net/ чтобы его легко можно было просмотреть и поправить. Так неудобно читать код, как Вы выложили

попробуйте посмотреть: http://plnkr.co/edit/kuXZauSZ1NEEMoVoz6Ua?p=preview

Vlad · August 29, 2015

Ребята, вы дату сообщения смотрели вообще?

Morti · August 29, 2015

Ребята, вы дату сообщения смотрели вообще?

Влад, с датой все нормально Вопрос актуальный, так как проблема одна и та же))))

Edited August 29, 2015 by Morti

Morti · August 30, 2015

Всем спасибо, все сам разрешил)

float: left !important;

float: center для всех позиций.

А дальше

#sub_form {
   display:block;
   width:630px;
   margin:0 auto;

Ну и с размерами поиграть надо было. Зато вышло как хотел, наконец-то :yahoo:

Edited August 30, 2015 by Morti

SelenIT · August 30, 2015

float: center

Игнорируется как недопустимое значение. Писать незачем)

Web Creation · September 5, 2015

Всем спасибо, все сам разрешил)

float: left !important;
float: center для всех позиций.
А дальше
#sub_form {
   display:block;
   width:630px;
   margin:0 auto;
Ну и с размерами поиграть надо было. Зато вышло как хотел, наконец-то

Как по мне лучше с float'ами без надобности не играться, я сразу не увидел это сообщение и у меня получилось просто путем замены float:left на display: inline-block. Иногда можно забыть где-то закрыть этот поток и потом при большой архитектуре DOM'a долбаться и искать почему съехало бывает очень долго

Morti · September 7, 2015

просто путем замены float:left на display: inline-block.

Спасибо, принято. Хороший ход. Попробовал заменить и получилось.

Sign In

Если не работает {margin:0 auto;}

Question

Link to comment

Share on other sites

38 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information