PDA

Archiv verlassen und diese Seite im Standarddesign anzeigen : [HTML/CSS]Element mittig ausrichten, mit Textausrichtung links


Lookbehind
01.10.2010, 11:44
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Ä?


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

<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?
bgld
01.10.2010, 12:05
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
Lookbehind
01.10.2010, 12:37
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. :dnuhr:
bgld
01.10.2010, 14:03
Hmm stimmt, habs grad getestet, die Liste braucht noch ne max-width. Ich glaub ohne max-width (also ganz variabel) gehts net.

Gruß bgld
Wombo-Combo
01.10.2010, 19:51
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:

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

<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