Kompx.com or Compmiscellanea.com

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 ]


Aliosque subditos et thema


Mobile-friendly HTML table


If an HTML table is too wide, having too much data, it may not shrink anymore, it gets wider than the available space and breaks page layout. An horizontal scroll added to the table fixes it up. Example: 12345678910 Table_data_1 Table_data_2 Table_data_3 Table_data_4 Table_data_5 Table_data_6 Table_data_7 Table_data_8 Table_data_9 Table_data_10 HTML / XHTML. Code: <table> <tr> <th>1</th> <th>2</th> <th>3</th> <th>4</th> <th>5</th> <th>6</th> <th>7</th> <th>8</th> <th>9</th> <th>10</th> </tr> <tr> <td>Table_data_1</td> <td>Table_data_2</td> <td>Table_data_3</td> <td>Table_data_4</td> <td>Table_data_5</td> <td>Table_data_6</td> <td>Table_data_7</td> <td>Table_data_8</td> <td>Table_data_9</td> <td>Table_data_10</td> </tr> </table> CSS. Code: table {display: block; overflow-x: auto;} /* Extra CSS, just styling the look: */ table {border-collapse: collapse;} table td,th {padding: 10px; border: 1px #000 solid;} Note: the CSS property of display: block makes the table to occupy only as much space horizontally as it is needed to contain the data without shrinking. Not more, not making itself to stretch from the leftmost to the rightmost sides of the available space - even if width: 100% is added to CSS. Example: 123 Table_data_1 Table_data_2 Table_data_3 [ 1 ] As well as Netscape 9.0. [ 2 ] As well as Netscape 9.0.

CSS centering <hr />


CSS centering <hr />, if its width is less than 100%. Horizontal centering. Example: HTML / XHTML. Code: <hr /> CSS. Code: hr {width: 50%; margin: 0 25% 0 25%;} /* Extra CSS, just styling the look: */ hr {height: 1px; float: left; border: 0px; color: #f00; background: #f00;} Note: mostly it works both with float: left and float: none. But float: left makes it for sure. [ 1 ] As well as Netscape 4.04+, Mozilla 0.6+. [ 2 ] As well as Netscape 4.04+, Mozilla 0.6+.