[вопрос веб-мастерам] середина страницы

ctm7562631

как разместить текст(картинку) в середине страницы?
первое, что пришло в голову:
<div style="position: absolute; width: 100%; top: 50%; text-align: center;"> text </div>

есть еще варианты?

okis

можно ещё таблицу из одной ячейки сделать, но вроде это не модно

oksan4ik79

Если изображение - то можно бекграунд по центру сделать :)
У меня только с таблицей вышло. Дальше не думал.
 

<!DOCTYPE html> 

<html>

<head>

	<style type="text/css">

		html, body {

			height:100%;   

		}

		#container {

			margin: 0 auto;

			height: 100%;

			display: table;

		}

		#inner {

			display: table-cell;

			vertical-align: middle;

		}

	</style>

</head>

<body>

	<div id="container">

		<div id="inner">

			<img src="http://example.com/images/image.jpg" />

		</div>

	</div>

</body>

</html>

PS в ie6 не работает

Alena_08_11

если нужно разместить div шириной X высотой Y то css такой:
position:absolute/fixed
left:50%;
margin-left: -X/2;
top:50%;
margin-top:-Y/2;
Если X и Y заранее неизвестны - ну js-а немного добавить.

artimon

Гугл отменили?
http://www.jakpsatweb.cz/css/css-vertical-center-solution.ht...

hwh2010

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

hwh2010

Если X и Y заранее неизвестны - ну js-а немного добавить.
ага, а потом содержимое дива изменится, или окошко ресайзнут
скриптописатель это всё, конечно, предусмотрит — в результате получаем очередной сайт, в котором элементы дрыгаются от малейшего движения мыши

ctm7562631

а можешь сказать, в чем преимущество предложенного по ссылке решения перед тем, которое я указал в начальном посте? Потестил оба варианта в 4 браузерах - разницы не заметил...
    <style type="text/css">

        #outer {height: 100%; overflow: hid; position: relative; width: 100%;}

        #outer[id] {display: table; position: static;}

        

        #middle {position: absolute; top: 50%; width: 100%; text-align: center;} /* for explorer only*/

        #middle[id] {display: table-cell; vertical-align: middle; position: static;}

        

        #inner {position: relative; top: -50%; text-align: left;} /* for explorer only */

        #inner {width: 200px; margin-left: auto; margin-right: auto;} /* for all browsers*/

        /* optional: #inner[id] {position: static;} */

        

        /* just format */

        div.greenBorder {border: 0px solid; background-color: none;}

    </style>

</head>



<body>

<div id="outer">

    <div id="middle">



        <div id="inner">

            <center>ура!</center>

        </div>

    </div>



</div>

Alena_08_11

ага, а потом содержимое дива изменится, или окошко ресайзнут
скриптописатель это всё, конечно, предусмотрит — в результате получаем очередной сайт, в котором элементы дрыгаются от малейшего движения мыши
Какие дерганья ? скрипт выполняется только один раз - при загрузке документа. Ну максимум - при каждом обновлении содержимого дива. - А так хоть заресайзся хоть задергай мышкой.
ps. Или что ты имел в виду то ?
ps2. Если div вполне статичный - то ширину и высоту можно прописать в стиль при формировании страницы. Тогда вообще без js.
ps3. В ие6 не проверял.
ps4. Просьба без лишнего троллинга указать в чем ущербность такого решения, если таковая имеется.


<html>

<head>

    <title></title>

    <script type="text/javascript" src="js/jquery.js"></script>

    <style>

        body {

           height:100%;

            width:100%;



        }

       #layout {

            position:relative;

            min-width: 400px;

            min-height: 300px;

            height:100%;

            width:100%;



        }



        #hz {

            max-height: 100px;

            max-width: 200px;

            position: absolute;

            left: 50%;

            top: 50%;



            line-height: 20px;

            padding: 10px;

            border: 1px solid black;

        }

    </style>

    <script type="text/javascript">

        document.ready = function {

            var div = $('div#hz');

            var h = div.height;

            var w = div.width;

            div.css('margin-left', -1 * w / 2);

            div.css('margin-top', -1 * h / 2);

        }

    </script>

</head>

<body>

<div id="layout">

<div id="hz">

    sdfukerweur wejrgqwuiergqwer dsfg werwer sdfsdf werwer

</div>

</div>

</body>

</html>

UPDATE: Хотя да, говно решение. В ие вообще не работает. В хромах файрфоксах - по высоте как то фигово центруется в общем случае. Сливаю.
UPDATE 2: Не, ни хера, не сливаю.
Вот, что у меня заработало в ie 8, ff и chrome :
хотя все равно кривовато.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

        "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

    <title></title>

    <script type="text/javascript" src="js/jquery.js"></script>

    <style>



        html {

            height: 100%;

        }



        body {

            margin: 0;

            padding: 0;

            height: auto !important;

            height: 100%;

            min-height: 100%;

        }



        #layout {

            height: 100%;

            width: 100%;

            min-height: 300px;

            min-width: 400px;

            position: absolute;

            background-color: yellow;



        }



        #hz {

            max-height: 100px;

            max-width: 200px;

            position: absolute;

            left: 50%;

            top: 50%;



            line-height: 20px;

            padding: 10px;

            border: 1px solid black;

        }

    </style>

    <script type="text/javascript">

        document.ready = function {

            var div = $('div#hz');

            var h = div.height;

            var w = div.width;

            div.css('margin-left', -1 * w / 2);

            div.css('margin-top', -1 * h / 2);

        }

    </script>

</head>

<body>

<div id="layout">

    <div style="position:relative;width:inherit;height:inherit;">

        

        

        

        

        <div id="hz">

            sdfukerweur wejrgqwuiergqwer dsfg werwer sdfsdf werwer

        </div>

        

        

        

        

    </div>

</div>





</body>

</html>

artimon

Не знаю
Это просто первый результат на запрос в гугле
Оставить комментарий
Имя или ник:
Комментарий: