kostenloser Webspace werbefrei: lima-city


<a> im <li> mit CSS zentrieren

lima-cityForumDie eigene HomepageHTML, CSS & Javascript

  1. Autor dieses Themas

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

    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 :mad:. 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. 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

    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. 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

    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.

    Hallo,
    Einfach hinschreiben
    <div style="text-align:center;"> test </di>
  8. 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

    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?

Über lima-city

Login zum Webhosting ohne Werbung!