[CSS] text in div zentriert anordnen

Dieses Thema im Forum "Webdesign" wurde erstellt von encud, 27. April 2009 .

Schlagworte:
Status des Themas:
Es sind keine weiteren Antworten möglich.
  1. 27. April 2009
    text in div zentriert anordnen

    Hallo zusammen.

    Komm nicht weiter!

    ich habe einen div, in dem ein div ist, linksbündig angerichtet (mit float:left).

    die divs sind gleich hoch und der div im div hat nen dynamisch generierten %anteil von dem anderen. mache das so weil die beiden hintergründe übereinander liegen sollen.

    jetzt will ich die schrift mittig zum erstem div haben. hab nur leider keine ahnung wie ich das anstellen soll

    hier mein quelltext:

    HTML:
     <div class="status">
 <div style="background:url(pictures/status_gruen.jpg);width:25%;height:16px;float:left;">
 <span>&nbsp;75%</span>
 </div>
 </div>
    was im css von status steht ist eigentlich unrelevant.
    "<span>&nbsp;75%</span>" soll zentriert in "<div class="status">" stehen.

    hoffe mir kann da wer helfen hab keine idee mehr-.-

    gruß encud
     
  3. 27. April 2009
    AW: text in div zentriert anordnen

    text-align: center;

    ?
     
  4. 27. April 2009
    AW: text in div zentriert anordnen

    text-align:center;?

    EDIT:// gleichschnell mit Mr Mustache^__^
     
  5. 27. April 2009
    AW: text in div zentriert anordnen

    naja wenn ich das rein schreibe richtet es sich doch zentriert zu dem div im div aus und nicht zu dem 1. div, oder seh ich das falsch?! und wie gesagt der div im div soll linksbündig sein...
     
  6. 27. April 2009
    AW: text in div zentriert anordnen

    Dann könntest du den Text allerdings in den ersten div reinschreiben:

    HTML:
    <div id='outterDiv'>
 <div id='innerDiv'>
 &nbsp;
 </div>
 Irgendein Text hier.
</div>
    Und den äußeren div mit text-align: center; versehen.
     
  7. 27. April 2009
    AW: text in div zentriert anordnen

    jetzt ist es zentriert zu dem rest vom äußerem div, der nicht vom innerem bedeckt ist, aber nicht in der mitte von allem-.-
     
  8. 27. April 2009
    AW: text in div zentriert anordnen

    Das hat allerdings float so an sich.
    Du kannst auf float verzichten und den inneren div auf position: relative; left: 0px; setzen. Dann musst du allerdings noch rumwerkeln, dass der Text nicht immer weiter nach unten rutscht. Kannst ja den span absolut positionieren und den top: wert angeben.
     
  9. 27. April 2009
    AW: text in div zentriert anordnen

    Einleitung

    In folgendem Tutorial möchte ich zeigen, wie man mit CSS einen DIV-Layer permanent horizontal sowie auch vertikal in der Bildschirmmitte zentriert ausrichtet, um so z.B. eine Webseite im Browserfenster zentrieren zu können.

    Hierzu benötigt man zuerst einmal den XTHML-Code des DIV-Layers mit der ID "page", in welchem ich Beispielhalber einmal einen kleinen Text hinterlegt habe:

    HTML:
    <div id="page">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
</div>
    Nun erstellen wir im Stylesheet einen neuen CSS-Stil für den DIV-Layer "page" und definieren die Grundinformationen wie Hintergrundfarbe, Schrift und Rahmen:

    HTML:
    #page {
background: #CCC;
border: 1px solid #666;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 1.2em;
color: #333;
}
    Um die nun folgenden Veränderungen in den einzelnen Schritten aufzuzeigen, hier eine kleine Animation:
    Animation: DIV zentrieren

    Schritt 1

    Zuerst definieren wir die Positionierung, Höhe und Breite unseres DIV-Layers:

    HTML:
    #page {
background: #CCC;
border: 1px solid #666;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 1.2em;
color: #333;
position: absolute;
width: 200px;
height: 150px;
}
    Da sich der DIV-Layer nicht an anderen DIV´s ausrichten soll, definieren wir die Postition mit "postition: absolute;". Für Breite und Höhe nehme ich einmal 200px und 150px.

    Schritt 2

    Der DIV-Layer pappt nun am oberen linken Rand, da noch keinerlei Ausrichtungsangaben gemacht wurden. Damit der DIV-Layer nun permanent in der Mitte des Browserfensters positioniert ist, geben wir den Abstand zum oberen und zum linken Bildschirmrand mit "top: 50%;" und "left: 50%;" an:
    HTML:
    #page {
background: #CCC;
border: 1px solid #666;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 1.2em;
color: #333;
position: absolute;
width: 200px;
height: 150px;
top: 50%;
left: 50%;
}
    Nun rutscht der DIV-Layer jedoch nicht in die Mitte sondern von der Mitte aus nach unten rechts weg, daher müssen wir nun den Mittelpunkt des DIV-Layers definieren.

    Schritt 3

    Unser DIV-Layer hat eine Breite von 200px und eine Höhe von 150px und von diesen beiden Werten nehmen wir nun je die Hälfte als Wert für den negativen Einzug von Oben und nach Links:

    HTML:
    #page {
background: #CCC;
border: 1px solid #666;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 1.2em;
color: #333;
position: absolute;
width: 200px;
height: 150px;
top: 50%;
left: 50%;
margin-top: -75px;
margin-left: -100px;
}
    Nun ist der DIV-Layer über CSS ordnungsgemäß definiert und ausgerichtet. Als kleines Beispiel für eine Anwendungsmöglichkeit, möchte ich einmal auf ein von mir erstelltes Kundenprojekt verweisen.

    Quelle: U l f T h e i s
     
  10. 27. April 2009
    AW: text in div zentriert anordnen

    danke, auch an xxx666! habs jetzt hin bekommen, muss dann zwar nachher ein wenig mein kopf anstrengen um die richtige prozentzahl auszurechnen aber das klappt wenigstens^^ bw ist raus an all

    gruß encud
     
  11. Video Script

    Videos zum Themenbereich

    * gefundene Videos auf YouTube, anhand der Überschrift.