Vertikale Zentrierung mit Header

  • CSS

Es gibt 3 Antworten in diesem Thema. Der letzte Beitrag () ist von Link.

    Vertikale Zentrierung mit Header

    Abend,

    Ich möchte ein Bild vertikal zentrieren und ein wenig nach rechts einrücken und darüber dann ein Container der Dinge wie eine Text enthält mittig darüber positionieren.


    Hier mal mein Ansatz:

    HTML-Quellcode

    1. ​<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    2. <html xmlns="http://www.w3.org/1999/xhtml">
    3. <head>
    4. <link rel="stylesheet" href="style.css"/>
    6. </head>
    9. <div class="content">
    10. <div class="header">TEST<div>
    11. <div class="slider">
    12. <img src="wall.jpg"/>
    13. </div>
    15. </div>
    17. </body>
    18. </html>


    Quellcode

    1. ​.content{
    2. width:900px;
    3. height:700px;
    4. margin:auto;
    5. border:2pt solid #000;
    7. }
    8. .slider{
    9. position: relative;
    10. top: 50%;
    11. -webkit-transform: translateY(-50%);
    12. -ms-transform: translateY(-50%);
    13. transform: translateY(-50%);
    14. margin-left:100px;
    15. }


    Problem ist zudem, dass die Bildgröße varriieren kann (von width:100-300) und das Bild korrekt skaliert sein soll. Kann mir jemand auf die Sprünge helfen wie ich die Überschrift mittig über das Bild bekomme :) ?

    8-) faxe1008 8-)

Facebook
Telefonspende