Kompx.com or Compmiscellanea.com

Ссылки


Aliosque subditos et thema

 

CSS vertical alignment

 

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

CSS horizontal and vertical centering - 1

 

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