Hirdetés

  2. Fórumok
  3. Szoftverfejlesztés
  4. PHP programozás
  5. (kiemelt téma)

Új hozzászólás Aktív témák

  • #3512 tildy nagyúr pumatom #3511
    Új Válasz #3512
    Új hozzászólás
    Összes hozzászólása itt Válaszok az összes hozzászólására itt Válaszok erre a hozzászólásra
    Privát üzenet küldése

    tildy

    nagyúr

    válasz pumatom #3511 üzenetére

    cssel:
    <style type="text/css">
    #outer {height: 400px; overflow: hidden; position: relative; width: 100%;}
    #outer[id] {display: table; position: static;}

    #middle {position: absolute; top: 50%; width: 100%; text-align: center;} /* for explorer only*/
    #middle[id] {display: table-cell; vertical-align: middle; position: static;}

    #inner {position: relative; top: -50%; text-align: left;} /* for explorer only */
    #inner {width: 200px; margin-left: auto; margin-right: auto;} /* for all browsers*/
    /* optional: #inner[id] {position: static;} */

    /* just format */
    div.greenBorder {border: 1px solid green; background-color: ivory;}
    </style>
    </head>

    <body>
    <h1>Vertical and horizontal centering in valid CSS - Example</h1>
    <div id="outer" class="greenBorder">
    <div id="middle">
    <div id="inner" class="greenBorder">
    any text<br>
    <b>any height, set width,</b><br>
    any content, for example generated from DB<br>
    everything is both vertically and horizontally centered<br>
    </div>
    </div>
    </div>

Új hozzászólás Aktív témák