basti1012.bplaced.net

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. <img class="vorschau" src="image/textindemitte.png" alt="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.

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>