text in der mitte eines divs zentrieren

  • Hallo,

    ich mache gerade ein Menü. Jedoch bekomme ich den Text in den divs nicht zentriert und das sieht dann mit dem hover nicht so gut aus. Ich habe schon vieles versuche( margin, text-align, padding und viele andere Sachen aber nichts hat funktioniert.

    [Blockierte Grafik: https://imgur.com/a/hCU6AyV]

    Außerdem hätte ich dann noch eine frage. Ich will dann oben rechts einen Button machen "Benutzer". Wenn man auf diesen klickt soll genau darunter noch der Button abmelden erscheinen. Weiß jemand vielleicht wie ich das machen kann?

    Danke im Vorraus

    mfg

  • Kannst du uns mal deinen Code zeigen ( Html und Css ).

    Text-align:center ist eigentlich richtig, aber...

    Es kommt drauf an ob es ein Block Element ist oder nicht ( selbst verschuldet oder nicht durch display:block , inline ,flex,Grid oder inline-block ).

    Wie viel Padding wurde gegeben ?, ist da überhaupt noch Platz um Texte mittig zu setzen ?

    Ist in deinen div nur Text oder noch andere Elemente wie

    Code
    1. <div><ul><li><a>Dein Text</a></li></ul></div>

    Hat dein div Feste Breiten ?

    Wenn man den Fehler nicht findet ( oder man sich noch nicht auskennt ) kann es helfen den Element einen Border zu geben.

    Kuck mal hier, https://codepen.io/basti1012/pen/XWbypKJ?editors=0110

    habe den divs mal verschiedene displays gegeben mit text-align:center;

    Durch den Border:1px solid black; kann man gleich erkennen welches Element wo hin geht und somit leichter erkennen was man ändern muß um deinen Text mittig zu bekommen


    Fall du nicht weiter kommst dann poste mal deinen Code ( html css )

  • HTML vom menü

    <div id="menu">

    <ul>

    <a href="index.php?page=Home"> <div id="menupunkt"><li> Home </li></div></a>

    <a href="index.php?page=Scanner"> <div id="menupunkt"><li> Scanner </li></div></a>

    <a href="index.php?page=Monitore"><div id="menupunkt"><li> Monitore </li></div></a>

    <a href="index.php?page=Drucker"><div id="menupunkt"><li> Drucker </li></div></a>

    </ul>

    </div>

    CSS vom menü

    #menupunkt {
    text-align: center;
    margin: 0px;
    width: 115px;
    height: 50px;
    float: left;
    border-top: 1px solid darkgrey;
    }

    #menupunkt:hover{background-color: darkgrey;}

  • Dein Code ist so falsch, wie er nur sein kann!

    Es darf nur ein einziges mal eine ID für genau ein Element geben... nutze eine Klasse (class) stattdessen.

    Weder das 'a' noch das 'div' dürfen direktes Kindelemente eine 'ul' sein... versuche es mal so...

    Code
    1. <ul>
    2. <li class="menupunkt"><a href="...">...</a></Ii>
    3. ...
    4. </ul>
    5. und lass im CSS das 'float' weg und gib den 'li" ein 'display: inline-block;'
  • Dein Quelltext ist unzulässiges, also fehlerhaftes, HTML.


    Nach ul darf direkt nur li folgen. Innerhalb des li dann a. div als Blockelement ist innerhalb von li wiederum unzulässig und zudem vollkommen überflüssig.


    Nach den HTML-Regeln sehe ich zu diesem HTML


    Code
    1. <nav class="navigation">
    2. <a href="index.php?page=Home">Home</a>
    3. <a href="index.php?page=Scanner">Scanner</a>
    4. <a href="index.php?page=Monitore">Monitore</a>
    5. <a href="index.php?page=Drucker">Drucker</a>
    6. </nav>


    dieses CSS



    Wobei die width- und die height-Angaben kritisch zu sehen sind. Das ist schlechter Stil.


    Und wie Sailor bereits schrieb sollen für das CSS grundsätzlich Klassen (class) verwendet werden. Und auch nur dann, wenn sie notwendig und sinnvoll sind. Überflüssige Angaben, auch id und class, sollten im HTML-Quelltext vermieden werden. Hier reicht eine Klasse (navigation) vollkommen aus, der Quelltext ist sehr übersichtlich und das CSS ist problemloser anzuwenden.