Ergebnis 1 bis 3 von 3

Thema: Text in einem Blockelement mittig ausrichten

  1. #1
    Youngster
    Registriert seit
    08.06.2015
    Beiträge
    14
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard Text in einem Blockelement mittig ausrichten

    Hallo, es handelt sich um eine horizontale Navigationsleiste mit 4 Links. Der HTML-Code
    ist folgender:
    HTML-Code:
      <div id="dnav"> 
           <ul>
               <li><a>href="#.php">Start</a></li>
               <li><a>href="#.php">Auswertung: 1</a></li>
              <li><a>href="#.php">Auswertung: 2</a></li>
              <li><a>href="#.php">Auswertung: 3</a></li>   
          </ul>
      </div> 
    Das zugehörige CSS-File:

    Code:
    #dnav {
       background-color: #FAFAFA; /* FAFAFA Hintergrundfarbe der Navigationsleiste */
       width: 900px;                     /* Breite des Bereichs */
       height: 40px;
     }
    #dnav ul {
      list-style: none;               /* keine Aufzählungspunkte */
      float:left;  
      width: 900px; /*Breite der Navileiste festlegen*/
      padding: 0px;
      margin: 0px;
      display: block;
    }
    #dnav li {
      float:left;                     /* Anordnung links   */
      width:140px;                     /* Breite der Links festlegen */      
      height: 45px; 
      border-right: 1px solid #dfdfdf;  /* trennt die Links voneinanander jeweils rechts */ 
      display: block;
      
    #dnav a{
      text-decoration: none; /* Anzeigeart des Textes z.B. bei line-through wird Text durchgestrichen angezeigt */
      display: block;
      color: #919191; /* Schriftfarbe des Textes der Navi-Elemente*/
      font-size: 12pt;
      font-family: Courier;
      font-style: normal; /* Schrift normal */
      text-align:center;
      
      /*
      padding-top:center;
      padding-bottom:center;
      
      /*
      margin-left:auto; 
      margin-top:auto;
      margin-right:auto; 
      margin-bottom:auto;
      /*
      padding-left:auto; 
      padding-top:auto;
      padding-right:auto;
      padding-bottom:auto;
      */
    Die Breite der Boxen ist unter "#dnav li" festgelegt mit 140px. Dadurch werden die Links
    "Auswertung: 1 -3" zweizeilig dargestellt, was auch so sein soll. Nun kann ich aber nicht mit
    padding (left, right, top, bottom) den Text ausrichten, da ja der Link "Start" nur einzeilig ist.
    Ich suche also eine Methode mit der Text in der Box automatisch mittig ausgerichtet wird.
    Unter "#dnav a" habe ich mittels
    Code:
     text-align:center;
    den text zumindest von
    Links nach rechts mittig hinbekommen. Aber wie bekomme ich ihn auch mittig von oben nach unten.
    Ich habe auch schon probiert:
    Code:
     padding-top:auto;padding-bottom:auto;
    Brachte alles
    nichts...
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    Meister(in)
    Registriert seit
    24.02.2007
    Beiträge
    460
    Danke
    0
    Bekam 47 mal "Danke" in 47 Postings

    Standard AW: Text in einem Blockelement mittig ausrichten

    Versuch's mal so.

    Code:
    #dnav {
       background:#fafafa;  
       width: 900px;   
       display:table;                 
     
     }
    #dnav ul {
      list-style: none;              
      float:left;  
      padding: 0px;
      margin: 0px;
      display: block;
    }
    #dnav li {
      width:100px;                    
      display:table-cell;
      border-right: 1px solid #dfdfdf;
      /*vertical-align:middle*/;
     } 
    #dnav a{
      text-decoration: none;
      display:block;
      color: #919191; 
      text-align:center;
      padding:10px;
      
     }
    Geändert von djheke (13.06.2015 um 10:22 Uhr)

  3. #3
    König(in)
    Registriert seit
    07.02.2009
    Ort
    Leipzig
    Beiträge
    1.391
    Danke
    2
    Bekam 21 mal "Danke" in 20 Postings

    Standard AW: Text in einem Blockelement mittig ausrichten

    Und korrigiere deinen HTML-Code hinsichtlich des <a>. So wie es jetzt dort steht wird es vermutlich nichts werden.

Ähnliche Themen

  1. Container Text mittig
    Von I-Tiger im Forum HTML & CSS Forum
    Antworten: 1
    Letzter Beitrag: 02.07.2014, 09:31
  2. CSS Menü mittig ausrichten
    Von donrijo im Forum HTML & CSS Forum
    Antworten: 4
    Letzter Beitrag: 13.04.2013, 00:23
  3. Bild mittig in div ausrichten
    Von Kämpfer im Forum HTML & CSS Forum
    Antworten: 1
    Letzter Beitrag: 15.11.2009, 17:20
  4. Tiltviewer - lässt sich nicht mittig ausrichten.
    Von cadoham im Forum HTML & CSS Forum
    Antworten: 3
    Letzter Beitrag: 15.09.2009, 19:02
  5. Seite vertikal mittig ausrichten
    Von madosch im Forum HTML & CSS Forum
    Antworten: 26
    Letzter Beitrag: 31.05.2006, 12:56

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •