Jump to content
  • 0

горизонтальное выравнивание <div> внутри <div>


terrrible
 Share

Question

Нагуглил много тем с похожими обсуждениями, но в моём случае никак не получается.

Код, который генерит php примерно такой:


<td colspan="5" width="707" align="center">
<div id="container">
<div id="leftcol">...</div>
<div id="leftcol">...</div>
<div id="leftcol">...</div>
<div id="leftcol">...</div>
<div id="leftcol">...</div>
<div id="leftcol">...</div>
</div>

CSS:


#container {
width: 705px;
text-align: center;
border: 1px solid black;
overflow: auto;
margin: 0px;

}
#leftcol {
width: 200px;
height: 200px;
float: left;
color: white;
background: #8d7588;
border: 1px solid black;
margin: 2px;

Все <div> внутри контейнера выровнены по левому краю. Очень хочется их по центру)

Link to comment
Share on other sites

20 answers to this question

Recommended Posts

  • 0

Чево margin: 0 auto; ,вместо float: left; для внутренних блоков нельзя? Фвместо костылей для ие.

упс. неправильно прочитал вопрос. подумал что лишки не горизонтально стоят, а вертикально.

Edited by rediskavet
Link to comment
Share on other sites

  • 0
display: inline-block; + ширина, высота и родителю text-align: center; Для ИЕ6-7 кастыли.

display: inline-block; для вложенного <div>?

Не помогает.

Upd. Вырубил float: left; - заработало, спасибо!

Чево просто margin: 0 auto; ,вместо float: left; для внутренних блоков нельзя? Фвместо костылей для ие.

Выстраивает всё в один вертикальный столбец.

Edited by terrrible
Link to comment
Share on other sites

  • 0

Опять вернулся к этому вопросу. Всё было нормально пока картинки квадратные. Добавил прямоугольные, стало разваливаться:

2251954m.png

Первая слева картинка - квадратная, две следующие прямоугольные.

Но если сделать как в моём первом посте - всё здорово, но так же проблема с выравниванием по левому краю.

Link to comment
Share on other sites

  • 0

Опять вернулся к этому вопросу. Всё было нормально пока картинки квадратные. Добавил прямоугольные, стало разваливаться:

2251954m.png

Первая слева картинка - квадратная, две следующие прямоугольные.

Но если сделать как в моём первом посте - всё здорово, но так же проблема с выравниванием по левому краю.

А ты vertical-align: top; применяешь надеюсь? ;)

Link to comment
Share on other sites

  • 0

Опять вернулся к этому вопросу. Всё было нормально пока картинки квадратные. Добавил прямоугольные, стало разваливаться:

2251954m.png

Первая слева картинка - квадратная, две следующие прямоугольные.

Но если сделать как в моём первом посте - всё здорово, но так же проблема с выравниванием по левому краю.

А ты vertical-align: top; применяешь надеюсь? ;)

Эх, действительно работает) Спасибо!

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

Link to comment
Share on other sites

  • 0

Опять вернулся к этому вопросу. Всё было нормально пока картинки квадратные. Добавил прямоугольные, стало разваливаться:

2251954m.png

Первая слева картинка - квадратная, две следующие прямоугольные.

Но если сделать как в моём первом посте - всё здорово, но так же проблема с выравниванием по левому краю.

А ты vertical-align: top; применяешь надеюсь? ;)

Эх, действительно работает) Спасибо!

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

Ну наверное можно вообще отказаться от выравнивания по середине?

Link to comment
Share on other sites

  • 0
Ну наверное можно вообще отказаться от выравнивания по середине?

А где именно отменять? В самой таблице, которая загружает в себя div-ы? Не получается.

А в самом div-e выравнивания вроде и не стоит.

Link to comment
Share on other sites

  • 0
Ну наверное можно вообще отказаться от выравнивания по середине?

А где именно отменять? В самой таблице, которая загружает в себя div-ы? Не получается.

А в самом div-e выравнивания вроде и не стоит.

#container {

width: 705px;

text-align: center;

Link to comment
Share on other sites

  • 0
text-align: center;

Не помогает. Всё остаётся на своём месте.

Давай-ка ссылку на страницу. И покажи скриншот того, как должно быть, и как не должно.

Ок, спасибо, выложу ссылку как залью на хостинг.

Link to comment
Share on other sites

  • 0

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

Link to comment
Share on other sites

  • 0

display: inline-block; + ширина, высота и родителю text-align: center; Для ИЕ6-7 кастыли.

Для внутренних дивов поставил display: inline-block;, для родителя поставил text-align. В нормальных браузерах работает. Но вот в ИЕ6-7 они растягиваются на всю ширину родителя. Можно по подробней про костыли для ИЕ6-7.

Link to comment
Share on other sites

  • 0

display: inline-block; + ширина, высота и родителю text-align: center; Для ИЕ6-7 кастыли.

Для внутренних дивов поставил display: inline-block;, для родителя поставил text-align. В нормальных браузерах работает. Но вот в ИЕ6-7 они растягиваются на всю ширину родителя. Можно по подробней про костыли для ИЕ6-7.

display: inline;
zoom: 1;

Выставляешь в отдельный css-файл для старых ие и подключаешь его условными комментариями (кошерно), либо пишешь символ * перед свойствами (не кошерно зато быстро)

Link to comment
Share on other sites

  • 0

display: inline-block; + ширина, высота и родителю text-align: center; Для ИЕ6-7 кастыли.

Для внутренних дивов поставил display: inline-block;, для родителя поставил text-align. В нормальных браузерах работает. Но вот в ИЕ6-7 они растягиваются на всю ширину родителя. Можно по подробней про костыли для ИЕ6-7.

display: inline;
zoom: 1;

Выставляешь в отдельный css-файл для старых ие и подключаешь его условными комментариями (кошерно), либо пишешь символ * перед свойствами (не кошерно зато быстро)

Благодарю. Все хорошо, если конечно super preview 4 не врет, где я проверяю верстку для ie6-7. Не могли бы объяснить display: inline; zoom: 1; т.е. как это все происходит в браузере. О чем думает ie6-7. Поподробней.

Link to comment
Share on other sites

  • 0

Не могли бы объяснить display: inline; zoom: 1; т.е. как это все происходит в браузере. О чем думает ie6-7. Поподробней.

Я не знаю, о чем думают ие6-7, но думалка у них явно набекрень)

А если серьезно, то мы включаем для элементов hasLayout + "просим" эти браузеры отображать элементы как строчные.

Link to comment
Share on other sites

  • 0

Вопрос по теме:

Задача похожая!

Есть общий DIV container, в нём DIVшапка, DIVтело и DIVноги, по сути весь сайт,

необходимо что бы контейнер принимал ширину окна браузера

и разместить все дивы внутри контейнера по центру(горизонтально)

заказчик, сам шарит, сказал, что margin не использовать, потому что он не со всеми браузерами корректно работает.

и писать в css

Подскажите пожалуйста возможные варианты решения, неполучается, замучался...

Link to comment
Share on other sites

  • 0


<!DOCTYPE html>
<html>
<head>
<style>
*{margin:0px;padding:0px;}
html,body{height:100%;}
#body{width:100%;}
#header{margin:0px auto;width:1000px; background:#999;}
#content{margin:0px auto;width:1000px; background:#ddd;}
#footer{margin:0px auto;width:1000px; background:#999;}
</style>
</head>
<body>
<div id="body">
<div id="header">header</div>
<div id="content">content</div>
<div id="footer">footer</div>
</div>
</body>
</html>

скажите в каком браузере не работает?

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