Results 1 to 5 of 5

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

  1. #1 Reply With Quote
    Tieftöner  Lookbehind's Avatar
    Join Date
    Dec 2007
    Posts
    12,307
    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 is offline

  2. #2 Reply With Quote
    Lehrling bgld's Avatar
    Join Date
    Sep 2010
    Posts
    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 is offline

  3. #3 Reply With Quote
    Tieftöner  Lookbehind's Avatar
    Join Date
    Dec 2007
    Posts
    12,307
    Quote Originally Posted by bgld View Post
    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 is offline

  4. #4 Reply With Quote
    Lehrling bgld's Avatar
    Join Date
    Sep 2010
    Posts
    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 is offline

  5. #5 Reply With Quote
    Provinzheld Wombo-Combo's Avatar
    Join Date
    Feb 2010
    Location
    BaWue
    Posts
    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
    [Bild: steam.png] Steam | [Bild: quote.png] I gonna put my pain into your soul! | [Bild: twitter.png] Follow me

    [Bild: HL3Sig.png]
    Wombo-Combo is offline

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •