Kompx.com or Compmiscellanea.com

CSS centering absolutely positioned elements

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

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

CSS horizontal centering of an absolutely positioned element. Example:

Image

HTML / XHTML. Code:

<div class="example">

<img src="image.jpg" alt="Image" />

</div>

CSS. Code:

.example {position: relative; left: 0px; top: 0px; height: 90px; width: 100%; float: left; padding: 10px; border: 1px #ccc solid; background: #fafafa; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box;}

.example img {position: absolute; left: 0px; right: 0px; margin: 0px auto; width: 68px;}

An absolutely positioned img is centered in the example. But this method of horizontal centering also works with other both inline and block absolutely positioned elements.

The width of an absolutely positioned element may also be in percent or other units.

CSS properties of a container (here it is .example), holding an element to be centered, may vary. The element's centering is achieved by styles applied to the element itself: .example img {position: absolute; left: 0px; right: 0px; margin: 0px auto;}.


[ 1 ]

As well as Netscape 8.01+, Mozilla 1.5+.

[ 2 ]

As well as Netscape 8.01+, Mozilla 1.5+.


Aliosque subditos et thema

 

HTML centering

 

Centering the whole content of a web page in the viewable area of a browser by pure HTML - no CSS. A box to keep the content of the page is HTML centered horizontally and vertically - [ Open demo page ] HTML. Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>HTML centering</title> <meta http-equiv="Content-Type" content="text/html; charset=Windows-1252"> </head> <body bgcolor="#ffffff"> <table width="100%" height="100%" bgcolor="#a3ddc4"> <tr> <td align="center"> <table width="800" height="500" bgcolor="#ff6f6f"> <tr> <td>&nbsp;</td> </tr> </table> </td> </tr> </table> </body> </html> The outer HTML table makes the whole web browser viewable area, except margins, a HTML table and the whole area of this HTML table - a HTML table cell. The cell of the outer HTML table inherits the default value for valign attribute from its parent table row. And this row in its turn inherits the default value for valign attribute from the outer HTML table tbody - even if tbody tag is not used. And that value is middle. So a block of content inside the cell of the outer HTML table is centered vertically in web browser viewable are. Align="center" of the outer HTML table cell makes a block of content inside it centered horizontally in web browser viewable are. The inner table, the one inside of the outer HTML table cell makes up a box of a given size. Or there may be no set height or no set width or both. Then the size of the box is to adjust to accommodate the content, whatever its dimensions are. If the width or height or both of the box results to be larger than web browser viewable area, then it still ends up to be centered. Since HTML centering is the oldest method to center content horizontally and vertically, it works well not just in older web browsers, but in ones that can be described as downright ancient. Like adding one more HTML tag ( <center></center> ) around the outer table makes it funcion as deep as Internet Explorer 3 : [ Open demo page ] Download Internet Explorer 3: a pack, containing 3.0, 4.01, 5.01, 5.5, 6.0 versions of Internet Explorer HTML.

Windows console applications. File managers

 

FAR Manager : DOS Navigator : File Commander The concept and requirements to file manager had formed itself back in the DOS epoch. With the spread of operating systems with graphical user interface, other applications facilitating files handling emerged. But for many tasks and for many users orthodox file managers remain the most convenient option. There are file managers with graphical user interface here for a long time already, however console file managers still hold on not only their proper niche, but as well a part of the space belonging in theory to file managers with a GUI. Nowadays file managers can, all in all, the same and in general the same way, but text-based file managers are more responsive to user actions. Also, even if it is not topical enough now, console file managers require less system resources, than GUI file managers of comparable functionality. FAR Manager - / home page / Console file manager for Windows. Among the built-in functions: FTP, Windows network, extensible archive files support, print manager, text editor. Other plugins are available: SFTP/SCP, image viewer, hex editor, syntax highlighting and auto-completion for text editor, some others. FAR Manager 2.0: Console file manager FAR Manager 2.0: FTP, downloading files FAR Manager 2.0: A submenu FAR Manager 2.0: System settings FAR Manager 2.0: Text editor FAR Manager 2.0: MPlayer, playing .mp3 DOS Navigator - / open source project / Console file manager for Windows. A variation of the DOS file manager. There is also a version for OS/2. Archive files support, text editor with syntax highlighting, disk editor, spreadsheet, calculator, calendar, etc.