Search
 
SCRIPT & CODE EXAMPLE
 
CODE EXAMPLE FOR CSS

alignment

CENTERING LINES OF TEXT:
P { text-align: center }
H2 { text-align: center }

CENTERING A BLOCK OR IMAGE
P.blocktext {
    margin-left: auto;
    margin-right: auto;
    width: 8em
CENTERING VERTICALLY
    DIV.container {
    min-height: 10em;
    display: table-cell;
    vertical-align: middle }
CENTERING VERTICALLY AND HORIZONTALLY IN CSS LEVEL 3
CSS level 3 offers other possibilities. At this time (2014), a good way to center blocks vertically without using absolute positioning (which may cause overlapping text) is still under discussion. But if you know that overlapping text will not be a problem in your document, you can use the 'transform' property to center an absolutely positioned element. For example:
    For a document that looks like this:

<div class=container3>
  <p>This paragraph…
</div>
the style sheet looks like this:

div.container3 {
   height: 10em;
   position: relative }              /* 1 */
div.container3 p {
   margin: 0;
   position: absolute;               /* 2 */
   top: 50%;                         /* 3 */
   transform: translate(0, -50%) }   /* 4 */
 
PREVIOUS NEXT
Tagged: #alignment
ADD COMMENT
Topic
Name
9+8 =