Выравнивание блока по центру

Alsabel · April 9, 2012

Добрый день. Есть такая проблема, помогите, пожалуйста, с решением.

Мне нужно реализовать 3 фиксированные колонки такого рода - одна прибита к левому краю, вторая расположена по центру, третья прибита к правому краю. Проблема в следующем. Визуально макет резиновый и зависит от ширины браузера, поэтому я не могу использовать margin-left, ведь я не знаю точное значение отступа слева.

Иными словами мне нужен некий аналог свойства align="center" таблиц только в CSS и для блоков.

И важный момент - нельзя использовать абсолютное позиционирование т.к. макет подразумевает наличие подвала.

Спасибо.

Switch74 · April 9, 2012

попробуй

margin:0px auto;

Alsabel · April 9, 2012

Не сработает т.к. центральный блок встанет сразу за левым.

Switch74 · April 9, 2012

этот стиль нужно применять к родительскому, самому главному как правило

как у вас верстка то реализована? и кому вы применили данный стиль?

Edited April 9, 2012 by Switch74

Alsabel · April 9, 2012

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



<!DOCTYPE html>
<html>
	<head>
		<style type="text/css">
			body {background:#FFF111;}
			.left {background:#FF4444; width:300px; float:left;}
			.center {background:#005555; width:300px; float:left; margin: 0 auto;}
			.right {background:#33FFFF; width:300px; float:right;}
			footer {background:#55FF44; width:100%;clear:both;}
			.content {width:100%;}
		</style>
	</head>
	<body>
		<header>
		head
		</header>
		<div class="content">
			<div class="left">1</div>
			<div class="center">2</div>
			<div class="right">3</div>
		</div>
		<footer>
			footer
		</footer>
	</body>
</html>

Суть в том, что бы left распологался у левого края экрана, center по центру а right соответственно с правого края. И что бы это не зависило от разрешения экрана.

alex_anderr · April 9, 2012


body {background:#FFF111;}
.left {background:#FF4444; width:33%; float:left;}
.center {background:#005555; width:33%; float:left;}
.right {background:#33FFFF; width:34%; float:right;}
footer {background:#55FF44; width:100%;clear:both;}
.content {width:100%;}

А с процентами если уж резиновый сайт?

Можно и без марджина, если я правильно понял.

Edited April 9, 2012 by alex_anderr

Alsabel · April 9, 2012

body {background:#FFF111;}
.left {background:#FF4444; width:33%; float:left;}
.center {background:#005555; width:33%; float:left;}
.right {background:#33FFFF; width:34%; float:right;}
footer {background:#55FF44; width:100%;clear:both;}
.content {width:100%;}
А с процентами если уж резиновый сайт?
Можно и без марджина, если я правильно понял.

С процентами другая беда - центральный блок обязательно должен обладать фиксированной шириной. Либо нужен способ отцентрировать блок уже внутри него.

Вариант с сайта т.е. <%><px><%> всем хорош, кроме абсолютного позиционирования, из-за которого не воткнуть подвал.

alex_anderr · April 9, 2012


.center {background:#FC0; width:33%; float:left;}
.center2 {margin: 0 auto; width:150px;}

<body>
<header>
head
</header>
<div class="content">
   <div class="left">1</div>
   <div class="center">2
      <div class="center2">В голове моей кричалки!</div>
   </div>
   <div class="right">3</div>
</div>
<footer>
footer
</footer>
</body>

Так пойдет, малой кровью? )

Switch74 · April 9, 2012


                        .left {background:#FF4444; width:300px; float:left;}
                        .center {background:#005555; width:300px; margin: 0 auto;}
                        .right {background:#33FFFF; width:300px; float:right;}

мне вот интересно, как вы представляете себе сделать

<%><px><%>

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

Обычно как раз делают <px><%><px>

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

Alsabel · April 11, 2012

Спасибо большое за помощь.

Hell&Heaven™ · April 12, 2012

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

<style type="text/css">
table {
	border-spacing:0;
	padding:0;
	table-layout:fixed;
}
.one {
	background:#F60;
	width:10%;
}
.two {
	background:#09F;
}
.three {
	background:#0C6;
	width:20%;
}
</style>
</head>
<body>
<table width="100%">
  <tr>
    <td class="one"> 1 </td>
    <td class="two"> 2 </td>
    <td class="three"> 3 </td>
  </tr>
</table>

Switch74 · April 12, 2012

не многим нравится использовать таблицы для выравнивания элемента

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

Sign In

Выравнивание блока по центру

Question

Link to comment

Share on other sites

11 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

Join the conversation

Обсуждения

Important Information