kostenloser Webspace werbefrei: lima-city

<a> im <li> mit CSS zentrieren

lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript

1. Autor dieses Themas

   m**********n

   19:40, 15.10.2011

   Hallo liebe Community!
   
   Ich bastel derzeit mal wieder an meriner HP rum.
   Im Moment baue ich meine Navigation, die sieht im Code so aus:
   

   <div id="nav">
   			<ul>
   				<li class="nav_li"><a href="link1.php" class="nav_a">Punkt A</a></li>
   				<li class="nav_li"><a href="link2.php" class="nav_a">Punkt B</a></li>
   			</ul>
   		</div>

   
   
   Der zugerhörige CSS-Code
   

   /* Navigation */
   #nav
   {
   	width: 100%;
   	height: 32px;
   	background-image: url("img/bg/nav/grey.png");
   }
   
   #nav > ul
   {
   	height: 100%;
   }
   
   #nav > ul > li
   {
   	list-style-type: none;
   	width: 100px;
   	float: left;
   }
   
   #nav > ul > li > a
   {
   	text-decoration: none;
   	margin: auto;
   }

   
   
   So, nun habe ich gedacht, dass ich das <a>-Element mithilfe von

   margin: auto;

   sowohl horizontal, als auch vertikal zentriere. Ist aber nicht so . Wäre super nett, wenn mit jemand helfen könnte.
   
   Danke schonmal im Voraus.
   
   Mfg
   
   mator

2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

   lima-city: Gratis werbefreier Webspace für deine eigene Homepage

3. thriller

   thriller hat kostenlosen Webspace.

   19:55, 15.10.2011

   habs zwar nicht getestet aber versuch mal die textausrichtung bei allen <li> zu zentrieren:
   
   

   #nav > ul > li
   {
   	text-align: center;
   }

4. Autor dieses Themas

   m**********n

   20:03, 15.10.2011

   Erstmal Danke für die schnelle Antwort.
   
   Das funktioniert, darauf bin ich auch schon gekommen, aber wie zentriere ich es vertikal, ohne absolute angaben machen zu müssen. Ich wusste mal, wie das geht, aber ich finde es nicht mehr heraus.

5. advancer

   advancer hat kostenlosen Webspace.

   22:02, 15.10.2011

   Hallo mator-kaleen,
   
   vertikal soll man es so lösen können:
   
   position: absolute;
   left: 50%;
   top: 50%;
   text-align:center;
   width: 100%;
   margin-left: -50%;
   
   Aber keine Ahnung, ob es so funktioniert. Ich habe es eben gefunden und noch nicht testen können.
   
   Ich zentriere übrigens so:
   
   <div align="center">
   Der eigentliche Code
   </div>
   
   Ich hoffentlich konnte ich dir helfen. Bis dann. Advancer
   
   Beitrag zuletzt geändert: 15.10.2011 22:25:49 von advancer
6. Autor dieses Themas

   m**********n

   22:29, 15.10.2011

   Danke, aber so will ich es nicht machen, 1. hasse ich absolute, 2. hasse ich div-Suppe. Ich hab das vor einiger Zeit schon mal hinbekommen, aber ich weiß nicht mehr wie . Aber trotzdem Danke.

7. computer-freak

   computer-freak hat kostenlosen Webspace.

   17:26, 16.10.2011

   Hallo,
   Einfach hinschreiben

   <div style="text-align:center;"> test </di>

8. nemoinho

   

   nemoinho hat kostenlosen Webspace.

   18:03, 16.10.2011

   Bei dir reicht es, wenn du noch folgende Regeln hinzufügst:

   #nav li { height:100%; }
   #nav a {
       display:block;
       text-align:center;
       vertical-align:middle;
       line-height:32px; 
   }

   
   Die display-Eigenschaft sorgt dafür, das du das Layout verändern kannst, sonst passiert einfach gar nichts bei margin oder width oder ähnlichen Angaben.
   Das text-align zentriert den Text in der Mitte, das ersetzt auch das margin:auto.
   das vertical-align zentriert den Text vertikal auf der Textzeile.
   Und das line-height setzt dann die Zeilenhähe auf die selbe Höhe wie die Navigation ist.
   
   Mit freundlichen Grüßen
9. Autor dieses Themas

   m**********n

   20:19, 17.10.2011

   Ich bin leider nicht vorher dazu gekommen zu antworten, aber danke, dass funktioniert.
   
   Schönen Abend noch.
   
   Mfg
   
   mator

10. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?