Kompx.com or Compmiscellanea.com

CSS horizontal and vertical centering - 1

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 ].

Centering the content of a web page in the viewable area of a browser by means of CSS. A box to contain the whole content of the page is CSS centered horizontally and vertically: [ Open demo page ]

HTML / XHTML. Code:

<!DOCTYPE html>

<html>

<head>

<title>CSS horizontal and vertical centering - 1</title>

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

</head>

<body>

<div class="all">

<div class="wrapper">

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

</div>

</div>

</body>

</html>

CSS. Code:

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

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

.all {position: relative; left: 0px; top: 0px; height: 100%; width: 100%; float: left; display: table;}

.wrapper {position: relative; left: 0px; top: 0px; height: auto; width: 100%; display: table-cell; vertical-align: middle;}

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

The .pagecontent box is for the page content. It may be of height assigned explicitly or just "height: auto". Unlike CSS horizontal and vertical centering - 2, here percents may also be used as CSS units; not just px's or em's. Height and width may be larger than web browser viewable area, but here the more practical case is discussed - when the height and width of .pagecontent are smaller than those of the web browser viewable area.

The .pagecontent box is horizontally centered by its "margin: 0 auto".

.All with its CSS properties makes the whole web browser viewable area into a CSS table.

CSS properties makes .wrapper into the cell of this CSS table. The content of this CSS table cell - the .pagecontent box with everything inside it - is vertically centered in the viewable area of a browser by "vertical-align: middle".


[ 1 ]

As well as Netscape 7.2+, Mozilla 1.5+.

[ 2 ]

As well as Netscape 7.2+, Mozilla 1.5+.


Aliosque subditos et thema

 

CSS centering image

 

CSS horizontal centering of an image. Example: HTML / XHTML. Code: <div class="example"> <img src="image.jpg" alt="Image" /> </div> CSS. Code: .example {position: relative; left: 0px; top: 0px; height: auto; width: 100%; float: left; padding: 10px; border: 1px #ccc solid; background: #fafafa;} .example img {display: block; margin: 0 auto;} CSS properties of a container (here it is example) may vary, image centering is achieved by styles applied to the image itself: .example img {display: block; margin: 0 auto;}. [ 1 ] As well as Opera 4.0+, if shorthand CSS is not used in styles. That is, if it is .example img {display: block; margin-left: auto; margin-right: auto;}. [ 2 ] As well as Netscape 6.01+, Mozilla 0.6+. [ 3 ] As well as Netscape 6.01+, Mozilla 0.6+.

Text-based web browsers for Linux

 

Lynx : Links : ELinks : W3m : Netrik : Retawq : Line mode browser When general public Linux distributions came around, web browsing was quite young, but with some way behind it. There were several web browsers already, many of them ported gradually to Linux. Some text-based web browsers were in the first wave. After a while Linux became the main habitat of text-based browsers, where most of them are developed and used. Even if these text-based web browsers are mostly intended not just for Linux, but for various other *nix systems as well. And there are also their ports to plenty of other operating systems for most various platforms. Lynx - / home page / Text-based web browser. Versions for Linux, FreeBSD, Mac OS X, some other *nix systems, DOS, Windows, BeOS, MINIX, QNX, AmigaOS, OpenVMS and classic Mac OS. HTML ( More 1 ) ( More 2 ) Lynx 2.8.7rel.1 in GNOME Terminal 2.32.1 on Zenwalk Linux: lynx.isc.org Lynx 2.8.7rel.1 in GNOME Terminal 2.32.1 on Zenwalk Linux: w3schools.com/browsers/browsers_stats.asp Lynx 2.8.7rel.1 in GNOME Terminal 2.32.1 on Zenwalk Linux: en.wikipedia.org/wiki/Lynx_(web_browser) Lynx 2.8.7rel.1 in GNOME Terminal 2.32.1 on Zenwalk Linux: ebay.com Lynx 2.8.7rel.1 in GNOME Terminal 2.32.1 on Zenwalk Linux: kompx.com/en/elinks.htm Lynx 2.8.7rel.1 in GNOME Terminal 2.32.1 on Zenwalk Linux: twitter.com Links - / home page 1 : home page 2 / Text-based web browser. Versions for Linux, FreeBSD, Mac OS X, some other *nix systems, BeOS, Haiku, OS/2, DOS, Windows.