Ergebnis 1 bis 5 von 5

[HTML/CSS]Element mittig ausrichten, mit Textausrichtung links

  1. #1 Zitieren
    Tieftöner Avatar von Lookbehind
    Registriert seit
    Dec 2007
    Beiträge
    15.176
    Ich stehe mal wieder auf dem Schlauch.
    Ich habe ein Element mit variabler Breite, dies soll mittig innerhalb eines weiteren Elements mit fester Breite angesetzt werden, aber mit Textausrichtung links.

    HÄ?
    HTML-Code:
    <ul>
     <li>Listen-Punkt Nr.1 mit recht langem Text</li>
     <li>Listen-Punkt Nr.2 kurzer Text</li>
     <li>Listen-Punkt Nr.3 ganz langer Text, weil wegen is halt so!!!!1111einsdrölf</li>
     <li>Und so weiter und so fort</li>
    </ul>
    Die gesamte Liste soll mittig innerhalb eines 750px breiten Elementes liegen, aber so, dass die Listen-Punkte alle untereinander liegen.
    Arbeite ich mit sowas:
    HTML-Code:
    <div style="text-align: center;">
    <ul>
     <li>Listen-Punkt Nr.1 mit recht langem Text</li>
     <li>Listen-Punkt Nr.2 kurzer Text</li>
     <li>Listen-Punkt Nr.3 ganz langer Text, weil wegen is halt so!!!!1111einsdrölf</li>
     <li>Und so weiter und so fort</li>
    </ul>
    </div>
    Wird aber auch die Liste so ausgerichtet, dass die Schrift mittig sitzt, und somit die Punkte nicht mehr untereinander passen.
    Setze ich statt dessen noch ein zweites <div> mit text-align: left; rein, landet es wieder am ganz linken Rand.
    Ich hab schon überlegt mit position: relative; zu arbeiten, und ihm dann mittels left: xyz die Position in der Mitte vor zu geben. Problem ist dabei, dass die Breite variabel ist, und ich somit keine genauen Abstände vorgeben kann. Optimal wäre sowas wie "left: 50%-width/2"... aber da traue ich dem armen CSS wohl doch etwas viel zu

    Jemand ne Idee?
    Lookbehind ist offline

  2. #2 Zitieren
    Lehrling Avatar von bgld
    Registriert seit
    Sep 2010
    Beiträge
    23
    Code:
    div {
    width: 750px;
    /* kein text-align! */
    }
    
    ul {
    margin: 0 auto; /* margin oben und unten 0, links und rechts soviel wie Platz ist */
    }
    dürfte funzen.

    Gruß bgld
    bgld ist offline

  3. #3 Zitieren
    Tieftöner Avatar von Lookbehind
    Registriert seit
    Dec 2007
    Beiträge
    15.176
    Zitat Zitat von bgld Beitrag anzeigen
    Code:
    div {
    width: 750px;
    /* kein text-align! */
    }
    
    ul {
    margin: 0 auto; /* margin oben und unten 0, links und rechts soviel wie Platz ist */
    }
    dürfte funzen.

    Gruß bgld
    Danke, aber entweder bin ich grad zu blöd dafür, oder es geht eben doch nicht... Die Liste ist komplett linksbündig am linken Rand.
    Lookbehind ist offline

  4. #4 Zitieren
    Lehrling Avatar von bgld
    Registriert seit
    Sep 2010
    Beiträge
    23
    Hmm stimmt, habs grad getestet, die Liste braucht noch ne max-width. Ich glaub ohne max-width (also ganz variabel) gehts net.

    Gruß bgld
    bgld ist offline

  5. #5 Zitieren
    Benutzer, die ihr Benutzerkonto per E-Mail bestätigen müssen
    Registriert seit
    Feb 2010
    Ort
    BaWue
    Beiträge
    293
    Hallo erstmal,

    ich hab so ein bisschen rumprobiert und denke das das so geht, is ein bisschen viel Text aber ich denke es ist das dabei rausgekommen was du wolltest!
    Das Prinzip ist ganz einfach du machst 2 Spalten diese 2 floatest du dann nach Links. Den einzelnen Spalten ordnest du dann einfach Prozentuale Größen zu.
    Also ist es im Prinzip eine Div-Tabelle.

    1. Möglichkeit:
    HTML-Code:
    <body>
    <div style="width:900px; border:dotted; float:left;">
    <div style="float:left; width:25%;">
    <p>
    </p>
    </div>
    <div style="float:left; width:75%;">
      <ul>
        <li>Listen-Punkt Nr.1 mit recht langem Text</li>
        <li>Listen-Punkt Nr.2 kurzer Text</li>
        <li>Listen-Punkt Nr.3 ganz langer Text, weil wegen is halt so!!!!1111einsdrölf</li>
        <li>Und so weiter und so fort</li>
        <li>Hallo das ist nocheinmal ein experiment wie das wohl aussieht wenn der Text wirklich SEHR lang geht und nicht zu enden scheint!!!!!!!!</li>
      </ul>
    </div>
    </div>
    </body>
    2. Möglichkeit:
    HTML-Code:
    <body>
    <div style="width:900px; border:dotted; float:left;">
    <div style="float:left; width:25%;">
    <p></p>
    </div>
    <div style="float:left; width:75%;">
      <ul>
        <li>Listen-Punkt Nr.1 mit recht langem Text</li>
        <li>Listen-Punkt Nr.2 kurzer Text</li>
        <li>Listen-Punkt Nr.3 ganz langer Text, weil wegen is halt so!!!!1111einsdrölf</li>
        <li>Und so weiter und so fort</li>
        <li>Hallo das ist nocheinmal ein experiment wie das wohl aussieht wenn der Text wirklich SEHR lang geht und nicht zu enden scheint!!!!!!!!</li>
      </ul>
    </div>
    </div>
    </body>
    Hoffe das ich Helfen konnte
    BlowJoe
    Wombo-Combo ist offline

Berechtigungen

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