Jump to content
  • 0

Gомогите отцентрировать контейнер (по горизонтали)


IVB
 Share

Question

3788943m.jpg

В контейнере (на рисунке обозначен внутренним прямоугольником красного цвета) есть текст (несколько однострочных параграфов) и таблица.

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

Если в качестве контейнера выбрать таблицу (из одной строки и одной ячейки) - то желаемого эффекта можно добиться при помощи

<table width="1%" align="center">

А вот с div'ами я не смог добиться желаемого эффекта - текст у меня всегда прижимается к левому краю окна (т.е. контейнер всегда сдвинут влево). Подскажите, пожалуйста, можно ли добиться нужного эффекта без таблиц? И, если можно, то как?

Ширина таблицы заранее неизвестна. Параграфы текста заведомо короче, чем ширина таблицы.

Link to comment
Share on other sites

6 answers to this question

Recommended Posts

  • 0

:rolleyes: padding & margin свойства параграфов в дивах + если я правильно понимаю систему div'ов то таблицу вроде тоже нужно запилить в div и тоже задать padding & margin бабахаем нулевые значения отступов и полей по левому краю для параграфов и таблицы и уже в пикселах задаем отступы текста в параграфах и ячейках таблицы :blush:

<_< а теперь ждем знающих людей

Edited by Bobikys
Link to comment
Share on other sites

  • 0


.myDiv {
margin: 0 auto;
}

отцентрует по горизонтали.

В том числе и текст (что мне совсем не нужно). А все попытки убрать центрирование текста внутри контейнера приводят к тому, что текст прижимается к левому краю окна, а не контейнера (точнее, сам контейнер растягивается на все окно).

Тоже не подходит - у меня ширина таблицы заранее неизвестна (т.е. "width: NNNpx;" невозможно вычислить). А если убрать width - контейнер растянется на весь экран :(

Edited by IVB
Link to comment
Share on other sites

  • 0

Тоже не подходит - у меня ширина таблицы заранее неизвестна (т.е. "width: NNNpx;" невозможно вычислить). А если убрать width - контейнер растянется на весь экран :(

Мне кажется, вы путаетесь (и нас путаете:)) в понятиях контейнер и таблица в данном случае: у вас неизвестна ширина внутренней таблицы или контейнера с параграфами и таблицей, который вы хотите центрировать?

Link to comment
Share on other sites

  • 0

Подробно:

Замените ваш

 <table width="1%" align="center"> 

на

 <div class='ВАШ_КЛАСС'>

и место

 </table> 

не забудьте

 </div> 

следующий шаг прописываем ВАШ_КЛАСС в css:

.ВАШ_КЛАСС { margin: 0 auto } 

все блоки внутри "я имею ввиду ваши <td>" заменяем на

 <div class='КЛАСС_ДЛЯ_БЛОКОВ'> 

также не забываем про

[CODE ]</div>

? возвращаемся в css:

 .КЛАСС_ДЛЯ_БЛОКОВ { display: block; width: 100%; } 

остальные параметры настраиваем сами.

Тупо решение:

html:

<div class='ВАШ_КЛАСС'><div class='КЛАСС_ДЛЯ_БЛОКОВ'></div></div>

css:

 .ВАШ_КЛАСС { margin: 0 auto } .КЛАСС_ДЛЯ_БЛОКОВ { display: block; width: 100%; } 

Link to comment
Share on other sites

  • 0


.myDiv {
margin: 0 auto;
}

отцентрует по горизонтали.

В том числе и текст (что мне совсем не нужно). А все попытки убрать центрирование текста внутри контейнера приводят к тому, что текст прижимается к левому краю окна, а не контейнера (точнее, сам контейнер растягивается на все окно).

Тоже не подходит - у меня ширина таблицы заранее неизвестна (т.е. "width: NNNpx;" невозможно вычислить). А если убрать width - контейнер растянется на весь экран :(

Что значит в том числе и текст? margin вообще не отвечает за выравнивание. Это свойство задает отступ элементу.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy