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. Bild 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 Voraus Mit freundlichen Grüßen.

Der hier verwendete Code

<style> div{ border:1px solid black; text-align:center; margin-top:10px; } div:hover{ background:rgba(0,0,0,0.5) } #test1{ display:block; } #test2{ display:inline-block; width:300px; } #test3{ display:inline; width:300px !important; padding:0 100px; } #test4{ display:block; width:300px; margin:0 auto; } #test5{ display:flex; justify-content:center; } li{ border:1px solid red; text-align:center; margin-top:10px; } li:hover{ background:rgba(255,0,0,0.5) } a{ border:1px solid green; text-align:center; margin-top:10px; }a:hover{ background:rgba(0,255,0,0.5) } ul{ border:1px solid blue; text-align:center; margin-top:10px; } ul:hover{ background:rgba(0,0,255,0.5) } li{ list-style:none; } #test11{ display:block; } #test22{ display:inline-block; width:300px; } #test33 a{ display:inline; width:300px !important; padding:0 100px; } #test44{ display:block; width:300px; margin:0 auto; } #test55{ display:flex; justify-content:center; } </style> <div id="test1">Text 1</div> <div id="test2">Text 2</div> <br> <div id="test3">Text 3</div> <div id="test4">Text 4</div> <div id="test5">Text 5</div> <h3>Mit ul li a</h3> <div id="test11"><ul><li><a>Text 1</a></li></ul></div> <div id="test22"><ul><li><a>Text 2</a></li></ul></div> <br> <div id="test33"><ul><li><a>Text 3</a></li></ul></div> <div id="test44"><ul><li><a>Text 4</a></li></ul></div> <div id="test55"><ul><li><a>Text 5</a></li></ul></div>

Add Comment

* Required information
1000
Drag & drop images (max 3)
Powered by Commentics

Comments

No comments yet. Be the first!