Kompx.com or Compmiscellanea.com

<hr /> по центру CSS

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

Linux : Firefox 1.0+, Google Chrome / Chromium, Opera 7.0+, SeaMonkey 1.0+ [ 2 ], NetSurf 3.0+, Hv3.

Выравнивание <hr /> по центру с помощью CSS, если ее ширина меньше 100%. Горизонтальное выравнивание по центру. Пример:


HTML / XHTML. Код:

<hr />

CSS. Код:

hr {width: 50%; margin: 0 25% 0 25%;}

/* Дополнительные CSS, просто для приведения примера к некоему внешнему виду: */

hr {height: 1px; float: left; border: 0px; color: #f00; background: #f00;}

Примечание: большей частью работает как с float: left, так и с float: none. Однако с float: left самый верный вариант.


[ 1 ]

А так же в Netscape 4.04+, Mozilla 0.6+.

[ 2 ]

А так же в Netscape 4.04+, Mozilla 0.6+.


Aliosque subditos et thema

 

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

 

Горизонтальное выравнивание блока неизвестной ширины, содержащего несколько строчных элементов. Блок выравнивается средствами 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.

Оформление нумерованных списков

 

Цифры-маркеры нумерованного списка, выделенные жирным начертанием без использования дополнительных тегов HTML: List item List item List item HTML / XHTML. Code: <ol> <li>List item</li> <li>List item</li> <li>List item</li> </ol> CSS. Code: ol {counter-reset: item;} ol li {display: block;} ol li:before {content: counter(item) ". "; counter-increment: item; font-weight: bold;} В настоящий момент нет явного способа форматировать только цифры-маркеры нумерованного списка. Но вместо стандартного механизма автоматической нумерации нумерованных списков можно использовать CSS счётчик. Это позволяет оформлять конкретно маркеры. Как в примере, где числа, отмечающие начало элементов нумерованного списка выделены жирным начертанием. С помощью этого способа так же возможно вместо точки после цифры использовать другие знаки. Например, закрывающую скобку " ) ". Или управлять пробелами между цифрой, разделительным знаком и содержимым, следующим за ними в элементе нумерованного списка. [ 1 ] As well as Netscape 9.0+. [ 2 ] As well as Netscape 9.0+.