Kompx.com or Compmiscellanea.com

CSS centering floated elements

Windows : Internet Explorer 5.5+ [ 1 ], Firefox 1.0+, Google Chrome, Opera 9.52+ [ 2 ], Safari 3.1+, SeaMonkey 1.0+ [ 3 ].

Linux : Firefox 1.0+, Chromium, Opera 9.52+ [ 4 ], SeaMonkey 1.0+ [ 5 ], NetSurf 3.0+.

Centering an inline block containing several inline elements. The block is centered horizontally - [ Open demo page ].

Sometimes there is a need to have a centered group of floated elements, which is to serve as a title or a pagination box. Since this group of floated elements is going to be used as a title for content blocks of various dimensions or pagination box may grow or shrink in its size, then the width of the group of floated elements is to vary unpredictably as well. So a method of centering based on using a certain known width of the box is not going to work.

And as an extra to the task there is a desirable condition: the title or pagination box has to be centered once and for all at the time of the box creation, so that this group of floated elements may be reused without any extra work over it: just place the complex where you need it and put the text or / and images you want to inside it - the group is centered anyway.

This problem can be solved by several methods using several technologies: CSS, CSS + JavaScript, CSS + HTML (<table></table> tags system). The CSS centering floated elements is the most simple and reliable. So, here a pure CSS centering of floated elements is discussed.

CSS centering floated elements:

1. First, a more simple case, css centering of a title box consisting of floated elements: images and text:

HTML / XHTML. Code:

<!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="en" lang="en">

<head>

<title>CSS centering floated elements: 1</title>

<meta http-equiv="Content-Type" content="text/html; charset=Windows-1252" />

<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">CSS centering floated elements</span>

<img src="snowflake.gif" width="37" height="34" alt="" class="title-imgs" />

</span>

</div>

</body>

</html>

CSS. Code:

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

body {background-color: #fff; margin: 0px; height: 100%; text-align: center; font-family: 'Times New Roman', 'Liberation Serif', serif; font-size: 26px; color: #006;}

.box {position: relative; left: 0px; top: 0px; height: auto; width: auto; text-align: center; border: solid #ccc 1px;}

.title-box {position: relative; left: 0px; top: 0px; height: auto; width: auto; margin: auto; display: table; display: inline-block;}

.title-imgs {float: left;}

.title-text {float: left;}

CSS centering floated elements: [ Open demo page ].

2. Now the full example of css centering floated elements: three pages with title boxes consisting of floated elements - images and text and pagination boxes consisting of floated elements - text, part of it changing its size when clicking from one page to another:

HTML / XHTML. Page 1. Code:

<!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="en" lang="en">

<head>

<title>CSS centering floated elements: 2. Page 1</title>

<meta http-equiv="Content-Type" content="text/html; charset=Windows-1252" />

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

</head>

<body>

<div class="all">

<div class="content">

<div class="box">

<span class="title-box">

<img src="snowflake.gif" width="37" height="34" alt="" class="title-imgs" />

<span class="title-text"><a href="css-centering-floated-elements.htm" class="title-text-link">CSS centering floated elements</a></span>

<img src="snowflake.gif" width="37" height="34" alt="" class="title-imgs" />

</span>

</div>

<div class="content-text">

There are situations, when there is a need to have a centered group of floated elements, which is to serve as a title or a pagination box. Since this group of floated elements is going to be used as a title for content blocks of various dimensions or pagination box may grow or shrink in its size, then the width of the group of floated elements is to vary unpredictably as well. So a method of centering based on using a certain known width of the box is not going to work.
</div>

<div class="pagination-box">

<span class="pagination-box-all">

<span class="pagination-box-text">Page:</span>

<span class="pagination-box-numbers-links-visited">1</span>

<span class="pagination-box-numbers"><a href="css-centering-floated-elements-demo-page-full-2.htm" class="pagination-box-numbers-links">2</a></span>

<span class="pagination-box-numbers"><a href="css-centering-floated-elements-demo-page-full-3.htm" class="pagination-box-numbers-links">3</a></span>

</span>

</div>

</div>

</div>

</body>

</html>

HTML / XHTML. Page 2. Code:

<!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="en" lang="en">

<head>

<title>CSS centering floated elements: 2. Page 2</title>

<meta http-equiv="Content-Type" content="text/html; charset=Windows-1252" />

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

</head>

<body>

<div class="all">

<div class="content">

<div class="box">

<span class="title-box">

<img src="snowflake.gif" width="37" height="34" alt="" class="title-imgs" />

<span class="title-text"><a href="css-centering-floated-elements.htm" class="title-text-link">CSS centering floated elements</a></span>

<img src="snowflake.gif" width="37" height="34" alt="" class="title-imgs" />

</span>

</div>

<div class="content-text">

And as an extra to the task there is a desirable condition: the title or pagination box has to be centered once and for all at the time of the box creation, so that this group of floated elements may be reused without any extra work over it: just place the complex where you need it and put the text or / and images you want to inside it - the group is centered anyway.
</div>

<div class="pagination-box">

<span class="pagination-box-all">

<span class="pagination-box-text">Page:</span>

<span class="pagination-box-numbers"><a href="css-centering-floated-elements-demo-page-full-1.htm" class="pagination-box-numbers-links">1</a></span>

<span class="pagination-box-numbers-links-visited">2</span>

<span class="pagination-box-numbers"><a href="css-centering-floated-elements-demo-page-full-3.htm" class="pagination-box-numbers-links">3</a></span>

</span>

</div>

</div>

</div>

</body>

</html>

HTML / XHTML. Page 3. Code:

<!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="en" lang="en">

<head>

<title>CSS centering floated elements: 2. Page 3</title>

<meta http-equiv="Content-Type" content="text/html; charset=Windows-1252" />

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

</head>

<body>

<div class="all">

<div class="content">

<div class="box">

<span class="title-box">

<img src="snowflake.gif" width="37" height="34" alt="" class="title-imgs" />

<span class="title-text"><a href="css-centering-floated-elements.htm" class="title-text-link">CSS centering floated elements</a></span>

<img src="snowflake.gif" width="37" height="34" alt="" class="title-imgs" />

</span>

</div>

<div class="content-text">

This problem can be solved by several methods using several technologies: CSS, CSS + JavaScript, CSS + HTML (<table></table> tags system). The CSS centering floated elements is the most simple and reliable. So, here a pure CSS centering of floated elements is discussed.
</div>

<div class="pagination-box">

<span class="pagination-box-all">

<span class="pagination-box-text">Page:</span>

<span class="pagination-box-numbers"><a href="css-centering-floated-elements-demo-page-full-1.htm" class="pagination-box-numbers-links">1</a></span>

<span class="pagination-box-numbers"><a href="css-centering-floated-elements-demo-page-full-2.htm" class="pagination-box-numbers-links">2</a></span>

<span class="pagination-box-numbers-links-visited">3</span>

</span>

</div>

</div>

</div>

</body>

</html>

CSS. Code:

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

body {background-color: #fff; margin: 0px; height: 100%; text-align: center; font-family: 'Times New Roman', 'Liberation Serif', serif; font-size: 26px; color: #006;}

.all {position: relative; left: 0px; top: 0px; height: auto; width: 100%; margin-top: 10px; padding-bottom: 10px; float: left; clear: both; background-color: #fff;}

.content {position: relative; top: 0px; left: 0px; width: 800px; height: auto; text-align: left; margin-left: auto; margin-right: auto; background-color: #fff; padding: 6px 15px 15px 15px;}

.box {position: relative; left: 0px; top: 0px; height: auto; width: auto; text-align: center; border-bottom: solid #ccc 1px; padding: 0 0 16px 0;}

.title-box {position: relative; left: 0px; top: 0px; height: auto; width: auto; margin: auto; display: table; display: inline-block;}

.title-imgs {float: left;}

.title-text {float: left;}

.content-text {position: relative; left: 0px; top: 0px; height: auto; width: auto; text-align: justify; margin: 20px 0 23px 0; font-family: 'Times New Roman', 'Liberation Serif', serif; font-size: 17px; color: #000000;}

.pagination-box {position: relative; left: 0px; top: 0px; height: auto; width: auto; text-align: center; border-top: solid #ccc 1px; padding: 16px 0 0 0;}

.pagination-box-all {position: relative; left: 0px; top: 0px; height: auto; width: auto; margin: auto; display: table; display: inline-block; line-height: 30px;}

.pagination-box-text {position: relative; left: 0px; top: 0px; height: auto; width: auto; float: left;}

.pagination-box-numbers {position: relative; left: 0px; top: 0px; height: auto; width: auto; float: left; margin: 0 5px 0 5px;}

.pagination-box-numbers-links-visited {position: relative; left: 0px; top: 0px; height: auto; width: auto; float: left; margin: 0 5px 0 5px; font-size: 30px; color: #cc0000; text-decoration: underline;}

a.title-text-link:link {font-family: 'Times New Roman', 'Liberation Serif', serif; font-size: 26px; color: #000033; text-decoration: none; float: left;}

a.title-text-link:visited {font-family: 'Times New Roman', 'Liberation Serif', serif; font-size: 26px; color: #000033; text-decoration: none; float: left;}

a.title-text-link:hover {font-family: 'Times New Roman', 'Liberation Serif', serif; font-size: 26px; color: #cc0000; text-decoration: none; float: left;}

a.title-text-link:active {font-family: 'Times New Roman', 'Liberation Serif', serif; font-size: 26px; color: #000033; text-decoration: none; float: left;}

a.pagination-box-numbers-links:link {font-family: 'Times New Roman', 'Liberation Serif', serif; font-size: 26px; color: #000033; text-decoration: none; float: left;}

a.pagination-box-numbers-links:visited {font-family: 'Times New Roman', 'Liberation Serif', serif; font-size: 26px; color: #000033; text-decoration: none; float: left;}

a.pagination-box-numbers-links:hover {font-family: 'Times New Roman', 'Liberation Serif', serif; font-size: 26px; color: #cc0000; text-decoration: underline; float: left;}

a.pagination-box-numbers-links:active {font-family: 'Times New Roman', 'Liberation Serif', serif; font-size: 26px; color: #000033; text-decoration: none; float: left;}

CSS centering floated elements. Aggregate result: [ Open demo page ] [ Download archive file ].


[ 1 ]

Partially Internet Explorer 4.01.

[ 2 ]

Just centering of floated elements works in Opera 9.0+.

[ 3 ]

As well as Mozilla 1.7.1+, Netscape 7.2+. Partially Netscape Communicator 4.7 and Mozilla 1.0.

[ 4 ]

Just centering of floated elements works in Opera 9.0+.

[ 5 ]

As well as Mozilla 1.7.1+, Netscape 7.2+. More or less Dillo 2.2.1+. Partially Netscape Communicator 4.7 and Mozilla 1.0.


Aliosque subditos et thema

 

CSS centering

 

1 ) CSS horizontal and vertical centering - 1 Centering a container with the whole content of a web page inside in the viewable area of a web browser by means of CSS. A box to contain the whole content of the page is CSS centered horizontally and vertically. More for modern web browsers : [ More ] : [ Open demo page ] 2 ) CSS horizontal and vertical centering - 2 Centering a container with the whole content of a web page inside in the viewable area of a web browser by means of CSS. A box to contain the whole content of the page is CSS centered horizontally and vertically. More conservative, than the previous method. Suitable not only for modern web browsers, but for older ones as well - like Internet Explorer 6 or earlier Maxthon. A shortcoming - it takes more efforts to maintain the CSS code compared to [ CSS horizontal and vertical centering - 1 ] method : [ More ] : [ Open demo page ] 3 ) CSS centering floated elements Floated elements of unknown width are CSS centered horizontally : [ More ] : [ Open demo page ] 4 ) CSS centering absolutely positioned elements CSS horizontal centering of an absolutely positioned element : [ More ] 5 ) CSS centering image CSS horizontal centering of an image : [ More ] 6 ) CSS vertical alignment CSS vertical alignment of a block element containing text and images. The method works for various combinations of inline and block elements : [ More ] 7 ) JavaScript + CSS centering Centering content of a web page by means of JavaScript and CSS. A block containing the content of a page is JavaScript + CSS centered horizontally and vertically : [ More ] : Two cases : 1. A block is centered, if screen resolution is equal to or greater than 1024x768 : [ Open demo page ] 2. A block is centered, if screen resolution is equal to or greater than 1024x768 + mouse cursor is moved over a link in an element of the page content : [ Open demo page ]

CSS centering <hr />

 

CSS centering <hr />, if its width is less than 100%. Horizontal centering. Example: HTML / XHTML. Code: <hr /> CSS. Code: hr {width: 50%; margin: 0 25% 0 25%;} /* Extra CSS, just styling the look: */ hr {height: 1px; float: left; border: 0px; color: #f00; background: #f00;} Note: mostly it works both with float: left and float: none. But float: left makes it for sure. [ 1 ] As well as Netscape 4.04+, Mozilla 0.6+. [ 2 ] As well as Netscape 4.04+, Mozilla 0.6+.