Kompx.com or Compmiscellanea.com

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

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

Linux : Firefox 1.0+, Google Chrome / Chromium, Opera 5.0+, SeaMonkey 1.0+ [ 2 ].

Вертикальное выравнивание CSS блочного элемента, содержащего текст и изображения. Работает для разных комбинаций блочных и строчных элементов. Пример:

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

Image

Вертикальное выравнивание 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+.


Aliosque subditos et thema

 

Netscape 3. Скриншоты 1

 

Netscape 3 запущенный под Windows 7 (32-bit). Скриншоты 1. Netscape 3: netscape.aol.com Netscape 3: w3schools.com/browsers/browsers_stats.asp Netscape 3: en.wikipedia.org/wiki/Netscape_Navigator Netscape 3: ebay.com Netscape 3: kompx.com/en/internet-explorer-3-screenshots-1.htm Netscape 3: twitter.com Скачать Netscape 3. Может так случиться, что под Windows 7 (32-bit) не будет получаться Netscape 3 либо установить, либо запустить. Тогда нужно попробовать установить Netscape 3 с правами Администратора. Когда Netscape 3 установлен как следует, он может вполне хорошо работать под Windows 7 (32-bit).

Горизонтальное выравнивание блока неизвестной ширины

 

Горизонтальное выравнивание блока неизвестной ширины, содержащего несколько строчных элементов. Блок выравнивается средствами CSS - [ Открыть страницу-пример ]. Иногда нужно выровнять по центру группу плавающих элементов, которая будет служить заголовком или блоком с нумерацией страниц. Поскольку заголовок будет использоваться для блоков разных размеров, а блок с нумерацией страниц может увеличиваться и уменьшаться в размерах, то ширина этой группы так же будет варьировать случайным образом. Отчего способ выравнивания по центру, базирующийся на использовании известной ширины, работать не будет. Так же, желательно, что бы блок заголовка или нумерации страниц был центрирован раз и навсегда при своем создании, что бы группа элементов могла быть использована с объектами разных размеров, на разных веб страницах: блок просто кладется куда надо, а в него помещаются текст или / и изображения - и группа выравнивается по центру автоматически. Это можно сделать разными способами и с использованием разных технологий: CSS, CSS + JavaScript, CSS + HTML (система с тегами <table></table>). Самый простой и надежный способ горизонтального выравнивания блока неизвестной ширины основан на использовании CSS. Горизонтальное выравнивание блока неизвестной ширины: 1. Сначала, более простой случай, горизонтальное выравнивание блока с заголовком, состоящего из плавающих элементов: изображения и текст: HTML / XHTML. Код: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru"> <head> <title>Горизонтальное выравнивание блока неизвестной ширины: 1</title> <meta http-equiv="Content-Type" content="text/html; charset=Windows-1251" /> <link rel="stylesheet" type="text/css" href="css.css" /> </head> <body> <div class="box"> <span class="title-box"> <img src="snowflake.gif" width="37" height="34" alt="" class="title-imgs" /> <span class="title-text">Горизонтальное выравнивание блока неизвестной ширины</span> <img src="snowflake.gif" width="37" height="34" alt="" class="title-imgs" /> </span> </div> </body> </html> CSS.