Титульная страница по центру...

Guooff · April 21, 2010

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

 *{
	margin-left: auto;
	margin-right:auto;
}

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

За благовременно спасибо!

rus · April 21, 2010

Ну если высота родителя и блока который надо отцентрировать фиксированные, то:

html, body {

height: 800px;

}

#bloks {

height: 100px;

margin: 350px auto;

}

ширину не стал писать, ибо это не проблема, проблема именно с вертикальным выравниванием.

slicemasta · April 21, 2010

#Content {
width:980px;
margin: 0 auto; /*это центрирование для блока с фиксир значением*/
}

psywalker · April 21, 2010

ТС, вот так больше никогда не делай.

Код

*{

margin-left: auto;

margin-right:auto;

}

PoshtarBoba · April 21, 2010

Как-то так:

js.js

$(document).ready(function(){
//Get the window height and width
var H = $(window).height();
var W = $(window).width();
//Set the popup window to center
$('#my_div').css('top',  H/2-$('#my_div').height()/2);
$('#my_div').css('left', W/2-$('#my_div').width()/2);
}); });

index.html

<head>
<script type="text/javascript" src="js/jquery-1.4.1.js"></script>
<script type="text/javascript" src="js/js.js"></script>
</head>
<body>
<div id="my_div">bla-bla-bla</div>

Ссылку на свежий скрипт jQuery возьмите в Википедии.

Можно и без jQuery на чистом js, но я плохо его знаю.

Минус в том, что при изменении размеров окна браузера блок не будет перемещаться (нужно эту ф-цию повесить и на онРесайз или куда-то туда, но на практике меняют размер окна оч. оч. редко.)

Edited April 22, 2010 by PoshtarBoba

aseran · April 23, 2010

МОжет это и не совсем то что нужно но всеже,

центрируется блок - но с задаными параметрами ширины и высоты (полезно для заглушек)

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

<head>

<title>Центрируем фон</title>

* {

margin: 0;

padding:0;

}

html, body {

height:100%;

}

body {

width:100%;

height:100%;

display: table;

}

#container {

display: table-cell;

vertical-align: middle;

background-color: #fff;

}

#fone2{

display: table-cell;

vertical-align: middle;

background-color: #333;

position:absolute;

width:50%;

right:0;

top:0;

height:100%;

z-index:5;

}

div#center {

height:200px;

width:200px;

margin: 0 auto;

position: relative;

z-index:10;

margin-top: expression((

document.documentElement.offsetHeight/2)

-(parseInt(offsetHeight)/2) <0 ? "0" :

(document.documentElement.offsetHeight/2)

-(parseInt(offsetHeight)/2) +'px') ;

background-color:green;

}

</style>

</head>

<body>

Center Fone

</div>

</body>

</html>

Sign In

Титульная страница по центру...

Question

Guooff

Link to comment

Share on other sites

5 answers to this question

Recommended Posts

rus

Link to comment

Share on other sites

slicemasta

Link to comment

Share on other sites

psywalker

Link to comment

Share on other sites

PoshtarBoba

Link to comment

Share on other sites

aseran

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information