Kompx.com or Compmiscellanea.com

CSS выравнивание по центру : по ширине и по высоте - 2

Windows : Internet Explorer 5.01+, Firefox 1.0+, Google Chrome, Opera 7.03+, Safari 3.1+, SeaMonkey 1.0+ [ 1 ].

Linux : Firefox 1.0+, Chromium, Opera 7.03+, SeaMonkey 1.0+ [ 2 ].

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

HTML / XHTML. Код:

<!DOCTYPE html>

<html>

<head>

<title>CSS выравнивание по центру : по ширине и по высоте - 2</title>

<link rel="stylesheet" type="text/css" href="css.css" />

</head>

<body>

<div class="spacer">&nbsp;</div>

<div class="wrapper">

<div class="pagecontent">&nbsp;</div>

</div>

</body>

</html>

CSS. Код:

html {height: 100%; margin: 0px;}

body height: 100%; margin: 0px;}

.spacer {position: relative; top: 0px; left: 0px; height: 50%; width: 100px; float: left; margin: 0px 0px -250px 0px; background: #999;}

.wrapper {position: relative; top: 0px; left: 0px; height: 500px; width: 100%; clear: both; background: #a3ddc4;}

.pagecontent {position: relative; top: 0px; left: 0px; height: 500px; width: 800px; margin: 0 auto; background: #ff6f6f;}

Контейнер .pagecontent - для всего содержимого веб-страницы. Этот контейнер должен быть с явно заданными размерами в px, em, и т.п. - не в процентах. Высота и ширина могут быть больше видимой области окна браузера, но в данном случае речь о более практическом случае - когда высота и ширина контейнера .pagecontent меньше, чем размеры видимой области окна браузера.

Блок .pagecontent выравнивается в видимой области окна браузера по центру / по ширине с помощью "margin: 0 auto".

.Wrapper создает пространство, где .pagecontent выравнивается по центру / по ширине. Ширина .wrapper равна 100%, что бы выравнивание по центру / по ширине происходило при разных размерах видимой области окна браузера. Высота .wrapper должна быть равна высоте контейнера .pagecontent.

.Spacer выравнивает .wrapper с .pagecontent внутри по центру / по высоте в видимой области окна браузера. Ширина .spacer может быть любая. Высота равна 50%, это помещает верхний край .pagecontent вертикально по центру в видимой области окна браузера. Margin-bottom блока .spacer равный половине высоты .pagecontent выравнивает контейнер .pagecontent по центру / по высоте при любой текущей высоте видимой области окна браузера.

Этот метод пригоден для всех основных современных браузеров. Он так же работает и в более старых браузерах, таких как Internet Explorer 6 или ранние версии Maxthon. Но высота контейнера, в котором находится содержимое страницы, должна быть с явно заданными размерами и если они меняются - величина margin-bottom блока .spacer так же должна быть соответственно изменена. Есть другой способ горизонтального и вертикального выравнивания по центру с помощью CSS, с CSS кодом, который проще сопровождать. Хотя этот способ и не работает в более старых веб-браузерах: CSS выравнивание по центру : по ширине и по высоте - 1.


[ 1 ]

А так же в Netscape 7.2+, Mozilla 1.5+.

[ 2 ]

А так же в Netscape 7.2+, Mozilla 1.5+.


Aliosque subditos et thema

 

Float bottom

 

В CSS нет свойства "float: bottom", однако эффекта можно добиться и некоторыми другими способами. Пример: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Link 1 Link 2 Link 3 Float bottom HTML / XHTML. Код: <div class="box1"> <div class="content1"> <div class="left1">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div> <div class="menu1"> <p><a href="#">Link 1</a></p> <p><a href="#">Link 2</a></p> <p><a href="#">Link 3</a></p> </div> </div> <div class="bottom1">Float bottom</div> </div> CSS. Код: .box1 {position: relative; top: 0px; left: 0px; float: left; height: auto; width: 100%;} .content1 {position: relative; top: 0px; left: 0px; float: left; height: auto; width: 100%;} .left1 {position: relative; top: 0px; left: 0px; float: left; height: auto; width: 64%;} .menu1 {position: relative; top: 0px; left: 0px; float: left; height: auto; width: 36%;} .bottom1 {position: absolute; bottom: 0px; right: 0px;} /* Дополнительные CSS, просто для приведения примера к некоему внешнему виду */ .box1 {color: #ddd; text-align: center;} .content1 {background: #bbb;} .left1 {min-height: 100px; padding: 2%; text-align: justify; background: #006; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box;} .menu1 {padding: 2%; float: right; background: #060; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box;} .menu1 p {position: relative; top: 0px; left: 0px; float: left; height: auto; width: 100%; padding: 0px; margin: 0px;} .menu1 a {color: #ddd; text-decoration: none;} .menu1 a:hover {text-decoration: underline;} .bottom1 {padding: 2%; color: #eee; background: #600;} Всё содержимое веб-страницы находится в контейнере box1. Внутри него два контейнера div: 1. content1 с собственно содержанием слева и меню справа. 2. bottom1 после content1.

Вертикальное выравнивание CSS

 

Вертикальное выравнивание CSS блочного элемента, содержащего текст и изображения. Работает для разных комбинаций блочных и строчных элементов. Пример: Вертикальное выравнивание CSS Вертикальное выравнивание CSS HTML / XHTML. Код: <div class="parent"> <div class="child"> <div class="childcontent">Вертикальное выравнивание CSS</div> <div class="childcontent"><img src="image.jpg" width="68" height="68" alt="Image" /></div> <div class="childcontent">Вертикальное выравнивание CSS</div> </div> </div> CSS. Код: .parent {position: relative; left: 0px; top: 0px; height: 200px; display: table;} .child {position: relative; left: 0px; top: 0px; display: table-cell; vertical-align: middle;} .childcontent {position: relative; left: 0px; top: 0px;} Примечание: .parent и .childcontent могут быть выровнены по левому краю ("float: left;") или не выровнены, но чтобы этот способ вертикального выравнивания CSS сработал, .child должен быть без "float: left;". [ 1 ] А так же в Netscape 6.01+, Mozilla 0.6+. [ 2 ] А так же в Netscape 6.01+, Mozilla 0.6+.