Kompx.com or Compmiscellanea.com

JavaScript + CSS centering

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

Linux : Firefox 1.0+, Chromium, Opera 9.0+ [ 2 ], SeaMonkey 1.0+.

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. Code:

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

body {background-color: #fff; margin: 0px; height: 100%;}

.element_A {position: relative; top: 0px; left: 0px; width: 800px; height: 500px; background-color: #999;}

3. External JavaScript file ( JavaScript code with commentary and explanations ) is prepared for user's web browser and display device capabilities detection, for the necessary manipulations to achieve the horizontal and vertical centering of element A under the specified condition (screen resolution equal to or greater than 1024x768). Link to this external JavaScript file is placed between the <head></head> tags of the XHTML / HTML file. [ 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 3</title>

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

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

<script type="text/javascript" src="3.js"></script>

</head>

<body>

<div class="element_A" id="element_A">&nbsp;</div>

</body>

</html>

CSS. Code:

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

body {background-color: #fff; margin: 0px; height: 100%;}

.element_A {position: relative; top: 0px; left: 0px; width: 800px; height: 500px; background-color: #999;}

JavaScript. Code:

var wresolution=screen.width;

var hresolution=screen.height;

function centering(){

if(wresolution>=1024 && hresolution>=768){

if(window.getComputedStyle){

var h=document.documentElement.clientHeight;

var w=document.documentElement.clientWidth;

var element_A = window.getComputedStyle(document.getElementById('element_A'), '');

var element_A_width=parseInt(element_A.getPropertyValue('width'));

var element_A_height=parseInt(element_A.getPropertyValue('height'));

document.getElementById('element_A').style.left=(w-element_A_width)/2+'px';

document.getElementById('element_A').style.top=(h-element_A_height)/2+'px';

}

else{

var h2=document.documentElement.clientHeight;

var w2=document.documentElement.clientWidth;

var element_A=document.getElementById('element_A');

var element_A_width=parseInt(element_A.currentStyle.width);

var element_A_height=parseInt(element_A.currentStyle.height);

document.getElementById('element_A').style.left=(w2-element_A_width)/2+'px';

document.getElementById('element_A').style.top=(h2-element_A_height)/2+'px';

};

window.onresize=centering;

};

};

window.onload=centering;

The JavaScript + CSS horizontal and vertical centering, sample page, aggregate result [ Open demo page ] [ Download archive file ].

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. Aggregate result</title>

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

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

<script type="text/javascript" src="javascript-css-vyravnivanie.js"></script>

</head>

<body>

<div class="element_A" id="element_A">

<div class="box">

<div class="site"><span class="sitecontent"><a href="http://www.compmiscellanea.com/" class="sitelink">compmiscellanea.com</a></span></div>

<h1><span class="title"><span class="titlecontent"><a href="javascript-css-centering.htm" class="titlelink">JavaScript + CSS centering</a></span></span></h1>

</div>

</div>

</body>

</html>

CSS. Code:

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

body {background-color: #fff; margin: 0px; height: 100%;}

.element_A {position: relative; top: 0px; left: 0px; width: 800px; height: 500px; background-color: #999;}

/*---------------- element A content ----------------*/

h1 {font-weight: normal; margin: 0px; float: left; font-family: "Times New Roman", "Liberation Serif", serif; font-size: 25px; color: #fff;}

.box {position: relative; top: 0px; left: 45px; width: 708px; height: 408px; float: left; border: 1px solid #fff; margin-top: 45px;}

.site {position: relative; top: 0px; left: 0px; width: 708px; height: auto; float: left; margin-top: 152px; text-align: center;}

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

.title {position: relative; top: 0px; left: 0px; width: 708px; height: auto; float: left; text-align: center;}

.titlecontent {position: relative; top: 0px; left: 0px; width: auto; height: auto; margin: auto; display: table; display: inline-block; text-align: left; word-spacing: 2px;}

a.sitelink:link {font-family: "Times New Roman", "Liberation Serif", serif; font-size: 48px; color: #000000; font-weight: normal; text-decoration: none; text-transform: uppercase; float: left;}

a.sitelink:visited {font-family: "Times New Roman", "Liberation Serif", serif; font-size: 48px; color: #000000; font-weight: normal; text-decoration: none; text-transform: uppercase; float: left;}

a.sitelink:hover {font-family: "Times New Roman", "Liberation Serif", serif; font-size: 48px; color: #cc0000; font-weight: normal; text-decoration: none; text-transform: uppercase; float: left;}

a.sitelink:active {font-family: "Times New Roman", "Liberation Serif", serif; font-size: 48px; color: #000000; font-weight: normal; text-decoration: none; text-transform: uppercase; float: left;}

a.titlelink:link {font-family: "Times New Roman", "Liberation Serif", serif; font-size: 28px; color: #fff; font-weight: normal; text-decoration: none; float: left;}

a.titlelink:visited {font-family: "Times New Roman", "Liberation Serif", serif; font-size: 28px; color: #fff; font-weight: normal; text-decoration: none; float: left;}

a.titlelink:hover {font-family: "Times New Roman", "Liberation Serif", serif; font-size: 28px; color: #cc0000; font-weight: normal; text-decoration: none; float: left;}

a.titlelink:active {font-family: "Times New Roman", "Liberation Serif", serif; font-size: 28px; color: #fff; font-weight: normal; text-decoration: none; float: left;}

/*---------------- element A content ----------------*/

JavaScript. Code:

var wresolution=screen.width;

var hresolution=screen.height;

function centering(){

if(wresolution>=1024 && hresolution>=768){

if(window.getComputedStyle){

var h=document.documentElement.clientHeight;

var w=document.documentElement.clientWidth;

var element_A=window.getComputedStyle(document.getElementById('element_A'), '');

var element_A_width=parseInt(element_A.getPropertyValue('width'));

var element_A_height=parseInt(element_A.getPropertyValue('height'));

document.getElementById('element_A').style.left=(w-element_A_width)/2+'px';

document.getElementById('element_A').style.top=(h-element_A_height)/2+'px';

}

else{

var h2=document.documentElement.clientHeight;

var w2=document.documentElement.clientWidth;

var element_A=document.getElementById('element_A');

var element_A_width=parseInt(element_A.currentStyle.width);

var element_A_height=parseInt(element_A.currentStyle.height);

document.getElementById('element_A').style.left=(w2-element_A_width)/2+'px';

document.getElementById('element_A').style.top=(h2-element_A_height)/2+'px';

};

window.onresize=centering;

};

};

window.onload=centering;

JavaScript and CSS horizontal and vertical centering. The second 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 second 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 second 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. Code:

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

body {background-color: #fff; margin: 0px; height: 100%;}

.element_A {position: relative; top: 0px; left: 0px; width: 800px; height: 500px; background-color: #999;}

3. External JavaScript file ( JavaScript code with commentary and explanations ) is prepared for user's web browser and display device capabilities detection, for the necessary manipulations to achieve the horizontal and vertical centering of element A under the specified condition (screen resolution equal to or greater than 1024x768) + for the specified action (moving mouse cursor over a link in element A). Link to this external JavaScript file is placed between the <head></head> tags of the XHTML / HTML file. A link with onMouseOver event handler and with appropriate script is created in the element A. [ 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 second case. Step 3</title>

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

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

<script type="text/javascript" src="3.js"></script>

</head>

<body>

<div class="element_A" id="element_A">

<a href="javascript-css-centering.htm" class="link" onmouseover="centering();"> JavaScript + CSS centering </a>

</div>

</body>

</html>

CSS. Code:

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

body {background-color: #fff; margin: 0px; height: 100%;}

.element_A {position: relative; top: 0px; left: 0px; width: 800px; height: 500px; background-color: #999; text-align: center;}

a.link:link {font-family: "Times New Roman", "Liberation Serif", serif; font-size: 33px; color: #fff; font-weight: normal; text-decoration: none; position: relative; top: 44%;}

a.link:visited {font-family: "Times New Roman", "Liberation Serif", serif; font-size: 33px; color: #fff; font-weight: normal; text-decoration: none; position: relative; top: 44%;}

a.link:hover {font-family: "Times New Roman", "Liberation Serif", serif; font-size: 33px; color: #cc0000; font-weight: normal; text-decoration: none; position: relative; top: 44%;}

a.link:active {font-family: "Times New Roman", "Liberation Serif", serif; font-size: 33px; color: #fff; font-weight: normal; text-decoration: none; position: relative; top: 44%;}

JavaScript. Code:

var wresolution=screen.width;

var hresolution=screen.height;

function centering(){

if(wresolution>=1024 && hresolution>=768){

if(window.getComputedStyle){

var h=document.documentElement.clientHeight;

var w=document.documentElement.clientWidth;

var element_A=window.getComputedStyle(document.getElementById('element_A'), '');

var element_A_width=parseInt(element_A.getPropertyValue('width'));

var element_A_height=parseInt(element_A.getPropertyValue('height'));

document.getElementById('element_A').style.left=(w-element_A_width)/2+'px';

document.getElementById('element_A').style.top=(h-element_A_height)/2+'px';

}

else{

var h2=document.documentElement.clientHeight;

var w2=document.documentElement.clientWidth;

var element_A=document.getElementById('element_A');

var element_A_width=parseInt(element_A.currentStyle.width);

var element_A_height=parseInt(element_A.currentStyle.height);

document.getElementById('element_A').style.left=(w2-element_A_width)/2+'px';

document.getElementById('element_A').style.top=(h2-element_A_height)/2+'px';

};

window.onresize=centering;

};

};

The JavaScript + CSS horizontal and vertical centering, sample page, aggregate result [ Open demo page ] [ Download archive file ].

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 second case. Aggregate result</title>

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

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

<script type="text/javascript" src="javascript-css-vyravnivanie.js"></script>

</head>

<body>

<div class="element_A" id="element_A">

<div class="box">

<div class="site"><span class="sitecontent"><a href="http://www.compmiscellanea.com/" class="sitelink">compmiscellanea.com</a></span></div>

<h1><span class="title"><span class="titlecontent"><a href="javascript-css-centering.htm" class="titlelink" onmouseover="centering();" >JavaScript + CSS centering</a></span></span></h1>

</div>

</div>

</body>

</html>

CSS. Code:

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

body {background-color: #fff; margin: 0px; height: 100%;}

.element_A {position: relative; top: 0px; left: 0px; width: 800px; height: 500px; background-color: #999;}

/*---------------- element A content ----------------*/

h1 {font-weight: normal; margin: 0px; float: left; font-family: "Times New Roman", "Liberation Serif", serif; font-size: 25px; color: #fff;}

.box {position: relative; top: 0px; left: 45px; width: 708px; height: 408px; float: left; border: 1px solid #fff; margin-top: 45px;}

.site {position: relative; top: 0px; left: 0px; width: 708px; height: auto; float: left; margin-top: 152px; text-align: center;}

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

.title {position: relative; top: 0px; left: 0px; width: 708px; height: auto; float: left; text-align: center;}

.titlecontent {position: relative; top: 0px; left: 0px; width: auto; height: auto; margin: auto; display: table; display: inline-block; text-align: left; word-spacing: 2px;}

a.sitelink:link {font-family: "Times New Roman", "Liberation Serif", serif; font-size: 48px; color: #000000; font-weight: normal; text-decoration: none; text-transform: uppercase; float: left;}

a.sitelink:visited {font-family: "Times New Roman", "Liberation Serif", serif; font-size: 48px; color: #000000; font-weight: normal; text-decoration: none; text-transform: uppercase; float: left;}

a.sitelink:hover {font-family: "Times New Roman", "Liberation Serif", serif; font-size: 48px; color: #cc0000; font-weight: normal; text-decoration: none; text-transform: uppercase; float: left;}

a.sitelink:active {font-family: "Times New Roman", "Liberation Serif", serif; font-size: 48px; color: #000000; font-weight: normal; text-decoration: none; text-transform: uppercase; float: left;}

a.titlelink:link {font-family: "Times New Roman", "Liberation Serif", serif; font-size: 28px; color: #fff; font-weight: normal; text-decoration: none; float: left;}

a.titlelink:visited {font-family: "Times New Roman", "Liberation Serif", serif; font-size: 28px; color: #fff; font-weight: normal; text-decoration: none; float: left;}

a.titlelink:hover {font-family: "Times New Roman", "Liberation Serif", serif; font-size: 28px; color: #cc0000; font-weight: normal; text-decoration: none; float: left;}

a.titlelink:active {font-family: "Times New Roman", "Liberation Serif", serif; font-size: 28px; color: #fff; font-weight: normal; text-decoration: none; float: left;}

/*---------------- element A content ----------------*/

JavaScript. Code:

var wresolution=screen.width;

var hresolution=screen.height;

function centering(){

if(wresolution>=1024 && hresolution>=768){

if(window.getComputedStyle){

var h=document.documentElement.clientHeight;

var w=document.documentElement.clientWidth;

var element_A = window.getComputedStyle(document.getElementById('element_A'), '');

var element_A_width=parseInt(element_A.getPropertyValue('width'));

var element_A_height=parseInt(element_A.getPropertyValue('height'));

document.getElementById('element_A').style.left=(w-element_A_width)/2+'px';

document.getElementById('element_A').style.top=(h-element_A_height)/2+'px';

}

else{

var h2=document.documentElement.clientHeight;

var w2=document.documentElement.clientWidth;

var element_A=document.getElementById('element_A');

var element_A_width=parseInt(element_A.currentStyle.width);

var element_A_height=parseInt(element_A.currentStyle.height);

document.getElementById('element_A').style.left=(w2-element_A_width)/2+'px';

document.getElementById('element_A').style.top=(h2-element_A_height)/2+'px';

};

window.onresize=centering;

};

};

JavaScript + CSS horizontal and vertical centering

There is no point in using this method in easy cases, when just an element's static positioning is necessary. It can be done, but it is easier and more reliable to achieve it by CSS centering. But when horizontal and vertical centering is required to start working only under some conditions or after some actions, then the horizontal and vertical centering by means of JavaScript and CSS becomes essential. VBscript or Java can be used instead of JavaScript, but JavaScript and its variation, JScript, work across a wider range of platforms and software, than VBscript; and simpler to implement than a method with Java.

There may be a variety of reasons and methods in using of JavaScript + CSS horizontal and vertical centering, but their essence all comes down to finding conditions, user's web browser and display device capabilities, running of scripts based on information obtained, if a specified condition is detected or a specified action is performed. A script can work directly with an element's CSS properties or to command what external style sheets file is to be used, which will assign new CSS properties for the element. Since case when a horizontal and vertical centering script selects which external style sheets file to use requires certain extra HTML and CSS preparations, it is not discussed here - as a less pure and apparent example of using JavaScript for objects positioning handling by direct CSS properties manipulation.

The simplest case is considered, to demonstrate the very possibility and its principle - dynamic change of an element's position in a browser's viewable area.

The first case

Condition: if screen resolution is equal to or greater than 1024 by 768 pixels, then center the page content horizontally and vertically:

An element A with dimensions declared explicitly is created. A screen resolution is specified - its arbitrary value will be the condition under which a script is to be run, for instance - 1024x768. In case the script finds screen resolution to be equal to or greater than 1024 by 768 pixels, then the rest of the function in the script is started, it determines the measurements (CSS properties assigned in external style sheets) of element A, the width and height of the browser viewable area. Using the numbers obtained, the distance between the left and top edge of the web browser viewable area and the left and top edge of the element A required for centering is calculated. In terms of CSS, it is when the CSS property "left" of the element A is equal to half difference between the width of the web browser viewable area and the width of the element A, and the CSS property "top" of the element A is equal to half difference between the height of the web browser viewable area and the height of the element A.

Since user can resize the web browser window after the page is loaded, the web browser window size is monitored. Each time it is changed, the function centering element A horizontally and vertically is run anew and element A is centered horizontally and vertically again, at the new dimensions of the web browser viewable area.

The second case

Condition: if screen resolution is equal to or greater than 1024 by 768 pixels and if mouse cursor is moved over a link in element A, then center the page content horizontally and vertically:

An element A with dimensions declared explicitly is created. A link with onMouseOver event handler and with appropriate script is created in the element A. Screen resolution is detected - a specified value of it will be the condition under which the script is to be triggered, for instance - 1024x768. When mouse cursor is moved over the link, if screen resolution is equal to or greater than 1024 by 768 pixels, the script is run to determine the measurements (CSS properties assigned in external style sheets) of element A, the width and height of the web browser viewable area. Using the numbers obtained, the distance between the left and top edge of the web browser viewable area and the left and top edge of the element A required for centering is calculated. In terms of CSS, it is when the CSS property "left" of the element A is equal to half difference between the width of the web browser viewable area and the width of the element A, and the CSS property "top" of the element A is equal to half difference between the height of the web browser viewable area and the height of the element A.

Since user can resize the web browser window after the page is loaded, the web browser window size is monitored. Each time it is changed, the function centering element A horizontally and vertically is run anew and element A is centered horizontally and vertically again, at the new dimensions of the web browser viewable area.


[ 1 ]

All in all, it works starting Opera 7.5 as well, but with a shift by a number of pixels.

[ 2 ]

All in all, it works starting Opera 7.5 as well, but with a shift by a number of pixels.


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 ]

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.