Kompx.com or Compmiscellanea.com

CSS vertical alignment

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 vertical alignment of a block element containing text and images. It works for various combinations of inline and block elements. Example:

CSS vertical alignment

Image

CSS vertical alignment

HTML / XHTML. Code:

<div class="parent">

<div class="child">

<div class="childcontent">CSS vertical alignment</div>

<div class="childcontent"><img src="image.jpg" width="68" height="68" alt="Image" /></div>

<div class="childcontent">CSS vertical alignment</div>

</div>

</div>

CSS. Code:

.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;}

Note: .parent and .childcontent may be floated left ("float: left;") or not, but .child must be without "float: left;" for this method of CSS vertical alignment to work.


[ 1 ]

As well as Netscape 6.01+, Mozilla 0.6+.

[ 2 ]

As well as Netscape 6.01+, Mozilla 0.6+.


Aliosque subditos et thema

 

Extract tar.bz2

 

Extracting tar.bz2 files in Linux, command line: tar jxvf file.tar.bz2 - j : filter the archive through bzip2 [ 1 ] - x : extract files from an archive - v : list the files processed - f : use archive file The command extracts the contents of a bzip2 compressed archive to the current directory. Tar creates an archive of one or several files. Then bzip2 is used to compress it. Or both processes are made at once by tar only, with corresponding options employed. The duality of nature - archived and then compressed - is reflected in the extension of the file ("tar.bz2") and requires two procedures to be performed while extracting: decompressing and unpacking. Hence both j (decompress it) and x (unpack it) in the command. [ 1 ] Sources for the option letters description: tar(1) - Linux man page and LinuxCommand.org

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. 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 ] JavaScript and CSS horizontal and vertical centering. The first case. Step by step. 1. A web page, the part of which is going to be the element the JavaScript + CSS horizontal and vertical centering is to be applied to: 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>JavaScript + CSS horizontal and vertical centering. The first case. Step 1</title> <meta http-equiv="Content-Type" content="text/html; charset=Windows-1252" /> <link rel="stylesheet" type="text/css" href="1.css" /> </head> <body>   </body> </html> CSS. Code: html {height: 100%; margin: 0px;} body {background-color: #fff; margin: 0px; height: 100%;} 2. A block element A (grey color) with dimensions declared explicitly, for instance 800 by 500 pixels and with relative positioning is created in the document's body. [ Open demo page ] 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>JavaScript + CSS horizontal and vertical centering. The first case. Step 2</title> <meta http-equiv="Content-Type" content="text/html; charset=Windows-1252" /> <link rel="stylesheet" type="text/css" href="2.css" /> </head> <body> <div class="element_A">&nbsp;</div> </body> </html> CSS.