mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: So 04.12.2016 13:40 Benutzername: Passwort: Auto-Login

Thema: Text in DIV vertikal zentrieren vom 26.03.2004


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Programmierung -> Text in DIV vertikal zentrieren
Seite: Zurück  1, 2
Autor Nachricht
cloneraiser

Dabei seit: 14.04.2011
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Do 14.04.2011 14:11
Titel

Antworten mit Zitat Zum Seitenanfang

Auch wenn wieder viel Zeit vergangen ist, aber ich hab auch ne Lösung.

Ich hatte das Problem bei einem Text der im header stehen sollte. Das Funktioniert aber nur wenn der Text immer an der gleichen Stelle steht.

Meine Lösung:

<html>
...
<div id=header>
<header>Text der hier stehen soll</header>
</div>
...

</html>

css

#header {
background-image:url(header950x60.gif);
position: absolute;
width:950px;
height:60px;
top: 136px;
left:0px;
}

header {
position: absolute;
top: 16px;
left:130px;
color:#EFE7CE;
font-family:Verdana;
font-size:22px;
text-align: center;
}

Das ganze geht noch eleganter, es gibt eine Möglichkeit, das bezeichnete Bereiche inherhalb einer div, bestimmte Eigenschaften zu gewiesen werden, aber das ändert nichts an der Funktion.


Zuletzt bearbeitet von cloneraiser am Do 14.04.2011 14:18, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden
o0Puk

Dabei seit: 15.02.2011
Ort: Bayreuth
Alter: 34
Geschlecht: Männlich
Verfasst Mo 18.04.2011 15:16
Titel

Antworten mit Zitat Zum Seitenanfang

Au weia! Au weia!

cloneraiser hat geschrieben:

<html>
...
<div id=header>
<header>Text der hier stehen soll</header>
</div>
...
</html>


Wikipedia hat geschrieben:

Strukturierende Elemente
Die Elemente section, nav, article, aside, hgroup, header und footer sollen eine bessere Strukturierung ermöglichen. Anders als div-Kästen, die bislang zur Strukturierung von HTML-Dokumenten verwendet wurden, wird durch das Element hier auch definiert, welche Art von Inhalt sich in dem Element befindet. Zum Beispiel bezeichnet section einen Abschnitt eines durchgängigen Textes, nav ein Menü, article einen Artikel oder footer einen Seitenfuß.


HTML5 – Wikipedia
w3schools - HTML5 <header> Tag



---

Aber, um beim Thema zu bleiben, denn diese abenteuerliche Programmierung mit der absoluten Positionierung und Zahlenwerten, die teilweise jenseits von Gut und Böse liegen, kann sich ja niemand ansehen. Mittels text-align kann die horizontale Ausrichtung von Text in Block-Elementen bestimmt werden. Die vertikale Ausrichtung kann man mit der Eigenschaft vertical-align vornehmen. Diese Eigenschaft ist nur auf Inline-Elemente ( z.B. <span> ) oder Tabellenzellen (<td>) anwendbar, nicht aber auf Block-Elemente ( z.B. <div> ).

Wenn ich jetzt Text in einem Block-Element vertikal zentrieren möchte, habe ich entweder die Möglichkeit, dass über eine Tabelle zu lösen, oder, was die elegantere Variante ist, ich sage dem Block-Element, dass es sich wie eine Tabellenzelle verhalten soll ( display:table-cell ). Einen Haken gibt es aber leider auch hier, denn die Redmonder machen bis Internet Explorer 7 einen Strich durch diese Rechnung - wäre auch zu schön gewesen! Da müssen eben die Leute mit einem veralteten Browser Einschnitte in der Gestaltung hinnehmen. *hehe*

w3schools hat geschrieben:

The display property is supported in all major browsers.

Note: The values "inline-table", "run-in", "table", "table-caption", "table-cell", "table-column", "table-column-group", "table-row", "table-row-group", and "inherit" is not supported in IE7 and earlier. IE8 requires a !DOCTYPE. IE9 supports the values.

w3schools - CSS display Property




Code:
CSS

#header
{
width:500px; height:150px;
display:table-cell;
text-align:center;
vertical-align:middle;   
}



Code:
HTML

<div id="header">
Dieser Text hat keinen tieferen Sinn.<br />
Er steht einfach nur da!
</div>   


LG Chris
  View user's profile Private Nachricht senden
Anzeige
Anzeige
Benutzer 29349
Account gelöscht


Ort: -

Verfasst Mo 18.04.2011 17:56
Titel

Antworten mit Zitat Zum Seitenanfang

Code:
#header
{
width:500px; height:150px;
display:table-cell;
text-align:center;
vertical-align:middle;   
}


anstelle von vertical-align nimmste:

Code:
margin:0 auto;


Zuletzt bearbeitet von am Mo 18.04.2011 17:57, insgesamt 1-mal bearbeitet
 
o0Puk

Dabei seit: 15.02.2011
Ort: Bayreuth
Alter: 34
Geschlecht: Männlich
Verfasst Di 19.04.2011 07:49
Titel

Antworten mit Zitat Zum Seitenanfang

thecamillo hat geschrieben:

anstelle von vertical-align nimmste:
Code:
margin:0 auto;

*balla balla*

Mit ( margin:0 auto; ) bestimme ich die Aussenabstände eines Elements, also die Abstände zwischen dem Rand und anderen Elementen bzw. dem übergeordneten Element. Mal davon abgesehen, dass dies nichts mit den Innenabständen zu tun hat und schon gar nichts mit Text, bezieht sich ( margin:0 auto; ) auf die horizontale Zentrierung. *zwinker*

LG Chris
  View user's profile Private Nachricht senden
Benutzer 29349
Account gelöscht


Ort: -

Verfasst Mi 20.04.2011 16:57
Titel

Antworten mit Zitat Zum Seitenanfang

so wie ich das verstanden habe gings doch darum Hä? Hä? Hä? Hä? Hä? Hä? Hä?

Objekt mittig ausrichten ist
Code:
 margin: 0 auto;
und text wie zuvor richtig deklariert
Code:
text-align:center;


so wie ich das beim drüberfliegen gesehen habe will errreicht werdn in den Header eine Navigation einzubauen. Warum das nicht mit einer Liste glöst wird ist mir nicht klar, aber jedem das seine und mir Apfelkuchen.
 
 
Ähnliche Themen [css] div(float: right) vertikal im elternelement zentrieren
Text in Textfeld vertikal zentrieren in PS?
[CSS] Bild + Text vertikal zentrieren?
Text in DIV zentrieren per CSS
Webseite vertikal zentrieren
vertikal zentrieren in dreamweaver cs3
Neues Thema eröffnen   Neue Antwort erstellen Seite: Zurück  1, 2
MGi Foren-Übersicht -> Programmierung


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.