• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Text in Div Container Zentrieren

Waterfront_xD

Waterfront_xD

Neues Mitglied
Hey leute, ich hab glaube ich nur eine leichte Frage ^^

Aber mit google kam ich grad nciht weiter und deswegen frag ich mal schnell nach:
Ich hab nen einfachen Div Container dessen Breite 80% ist und höhe 120px ...
Jetzt steht da eine kleine Überschrift drin in die soll genau in der mitte des Containers ausgerichtet werden...

ich hab das mit text-align:center probiert aber dann ist der Text nur horizontal mittig ...
dann bin ich im netz auf vertical-align:center; gestoßen ... mhh verändert nix

LG
Water
 
Werbung:
vertical-align:middle;

hab ich jetzt nochmal ausprobiert, hatte davor vertical-align:center;
zu stehen, leider ist der text immern och nicht in der mitte :S
 
Werbung:
HTML: 
<div id="banner"><font size="12">Der kleine Hase</font></div>

Code: 
#banner{
width:80%;
float:right;
background: rgb(181,189,200); /* Old browsers */
background: -moz-radial-gradient(center, ellipse cover,  rgba(181,189,200,1) 0%, rgba(130,140,149,1) 36%, rgba(40,52,59,1) 100%); /* FF3.6+ */
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(181,189,200,1)), color-stop(36%,rgba(130,140,149,1)), color-stop(100%,rgba(40,52,59,1))); /* Chrome,Safari4+ */
background: -webkit-radial-gradient(center, ellipse cover,  rgba(181,189,200,1) 0%,rgba(130,140,149,1) 36%,rgba(40,52,59,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-radial-gradient(center, ellipse cover,  rgba(181,189,200,1) 0%,rgba(130,140,149,1) 36%,rgba(40,52,59,1) 100%); /* Opera 12+ */
background: -ms-radial-gradient(center, ellipse cover,  rgba(181,189,200,1) 0%,rgba(130,140,149,1) 36%,rgba(40,52,59,1) 100%); /* IE10+ */
background: radial-gradient(ellipse at center,  rgba(181,189,200,1) 0%,rgba(130,140,149,1) 36%,rgba(40,52,59,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b5bdc8', endColorstr='#28343b',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
text-align:center;
vertical-align:middle;
height:120px;
}

(dieser Gradient Code ist vom generator, nicht irritieren lassen :) )
 
Nicht dein Ernst, oder?
Was glaubst du wohl, warum ich dir das in #2 geschrieben habe? Damit du das gekonnt ignorierst? :mad: Kopfschüttel :mad:

Füttere google mit dem, was ich dir geschrieben habe, erster Link, ganz nach unten scrollen.
 
nö hat nix verändert.

Code: 
.container{
    min-height: 10px;
    display: table-cell;
    vertical-align: middle;
}

HTML: 
 <div id="banner" class="container"><font size="12px">Text</font></div>
 
Werbung:
Wie willst du bei einem 10 Pixel hohen Element eine Schrift von 12px mittig ausrichten? Und wozu dient dieses font-Element?
 
Code: 
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>vertikal zentrieren mit padding</title>
<style>

* {
margin:0;
padding:0;
}

#banner {
padding:53px 30px ; /* 53px 30px 52px 30px  h=105px*/
font-size:12px; /* Gesamthöhe der Schrift ca.  15px  */
color:#000;
background:#ddd;
text-align:center;
}
</style>
</head>
<body>
<h4 id="banner">Gesamthöhe 121px - wird ja wohl nicht weiter stören!</h4>
</body>
</html>

Kann alles so einfach sein.
 
Zuletzt bearbeitet:
Hallo Waterfront,

es wäre sinnvoll, wenn du zunächst das aktuelle Grundlagenwissen von HTML5 und CSS3 lernen würdest. Deine Informationen sind teilweise falsch und teilweise veraltet. Mit aktuellem HTML5 und CSS3 haben die nichts zu tun.

Zunächst mal deine Lösung:

http://foreninfo.bplaced.net/seiten_fremdprobleme/2014_05_17_waterfront_01_text_mittig.html

Dort hast du folgende Fehler und Probleme "eingebaut":

1. Text gehört grundsätzlich in passende Elemente wie p, h1 bis h6, li und so weiter. Niemals direkt in div, header, main u.s.w.

2. Das font-Element ist seit Jahren veraltet und sollte bei neuen Seiten nicht mehr verwendet werden. Zur Festsetzung der Schriftgröße wird css verwendet. Entsprechend wird es vom Validator als Fehler betrachtet:

http://validator.w3.org/check?verbose=1&uri=http://foreninfo.bplaced.net/seiten_fremdprobleme/2014_05_17_waterfront_01_text_mittig.html

3. Der HTML-Quelltext wird heutzutage semantisch korrekt und möglichst schlank gehalten. Da es sich offensichtlich um eine Überschrift handeln soll ist das div-Element überflüssig. Die Überschrift kann direkt in ein h1-Element eingetragen werden.

4. Die gradient-Orgie ist teilweise überflüssig und teilweise falsch. Für den IE (prefix -ms-) gab es nie ein Prefix. In Opera und Firefox funktioniert gradient seit Jahren ohne Prefix. Lediglich das webkit-prefix ist noch sinnvoll. Den Generator, der dir das erstellt hat, solltest du zukünftig wie die Pest meiden. Siehe auch

http://caniuse.com/#search=gradient

5. Wenn du "display: table-cell;" verwendest wird der Inhalt wie in einer Tabelle dargestellt, mit allen Vor- und Nachteilen. Ein bißchen table-cell gibt es nicht. Entsprechend darf in diesem Zusammenhang "float" nicht verwendet werden. In deinem Fall verhindert "float" das "vertical-align" funktioniert. Du kannst ja einfach mal die float-Anweisung bei dir löschen und schauen, was passiert.

Mit deinen bisherigen Informationen (Überschrift, 80%-breit, 120px hoch, die gesamte Überschrift soll rechtsbündig sein, wobei der Text innerhalb der 80% zentriert sein soll, schlage ich folgende Lösung vor (Das gesamte CSS befindet sich im head-Bereich des Quelltextes):

http://foreninfo.bplaced.net/seiten_fremdprobleme/2014_05_17_waterfront_03_text_mittig.html

Nix float, nix table-cell, nix überflüssiges, schlankes HTML, semantisch korrekt ...

Gruss

MrMurphy
 
Zuletzt bearbeitet:
Werbung:
Danke erstmal für die Antworten & Tipps :)

Ähm ich hab das jetzt so veränder, das es wieder im Container und nicht in einer <h1> Überschrift steckt, weil sonst die Container die unten drunter sind ein <br> bekommen und dann ein Abstand haben den ich nicht haben will :) Schlussendlich sieht es dann aber so aus, wie ich es haben will, danke :)

LG
Water
 
Diese von dir ungewollten Abstände, bekommst du durch CSS weg. Welches HTML-Tag du für deinen Inhalt wählst, sollte nie davon abhängig sein, wie es der Browser anzeigt.

Eine Überschrift gehört in <h1>-<h6>, je nach Ebene der Überschrift. Den Außenabstand bekommst du durch
Code: 
h1 {margin: 0;}
entfernt.
 
Werbung:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben