How to … center a YAML Layout

How to

Some Layouts must be centered in your browser display. You can use several ways – i will present here my “best practice”

We use the CSS Framework from Dirk Jesse ->YAML . The author includes a horizontal alignment with the following code:

[basemod.css]
/* Layout Alignment | Layout-Ausrichtung */
#page_margins { margin: 0 auto; }

So, if you need also a vertical alignment, you can use my solution:

[basemod.css]
#page_margins {
position: absolute;
width: 1000px;
height: 500px;
left: 50%;top:50%;
margin-top: -250px;   /* enter half of height: */
margin-left: -500px;  /* enter half of width:  */
}

With this CSS code you can easily center your YAML Layout in front of your display.

If you search for more options, have a look here (german language).

Any questions?

Greetz, Martin

Related posts:

  1. How to build a YAML fullscreen layout
  2. Using YAML and be fully variable
  3. How to code a jQuery slider menu
  4. CSS: center background image in Firefox & Co.
  5. CSS floating problems
  6. Floating problems with IE 6
  7. How to … integrate a YAML Menu to TYPO3
  8. How to use position-absolute and z-index with Internet Explorer 7 and nested containers

1 Response to “How to … center a YAML Layout”


  1. 1 blumentritt

Leave a Reply