✔ DIV-Text problem

[EuroCent]

Habe wieder mal ein Problem mit dem DIV -.-

Und zwar möchte ich den text Zentriert angezeigt bekommen...

In der Horizontal Linie kein Thema *center* aber in der Vertikalen Linie da komm ich absolut nicht weiter...

Derzeit mach ich es mit padding-top doch das ist leider auch keine lösung zu mindestens nicht auf dauer...

Ich hab mir auch überlegt in dem bereich wo News etc rein kommen mit Table zu arbeiten allerdings hab ich mich jetzt so aufs DIV konzentriert das ich ungern Table in einem DIV-Tag verwenden möchte

Hoffe es gibt eine möglichkeit den Text in einem Div-Element Zentriert "Vertikal sowie Horizontal" angezeigt zu bekommen...

Derzeit zeigt er mir den Text oberhalb des Randes eines Div-Elements Zentriert an jedoch nicht in der Vertikalen Ebene

Hoffe mir kann hierzu jemand Tips geben wie ich es am besten lösen kann

MfG

Lenox

 

[Sven Mintel]

Moin,

Hier findest du eine Lösung http://www.jakpsatweb.cz/css/css-vertical-center-solution.html

 

[Maik]

Moin,

und hier gibt's noch ein paar Zugaben zum Thema "Vertikale Zentrierung":

• http://www.pmob.co.uk/temp/vertical-align-examples.htm
• http://www.pmob.co.uk/temp/vertical-align3.htm
• http://www.pmob.co.uk/temp/vertical-align11.htm

Bei einem "einzeiligen Text" kann auch anstelle von height die line-height-Eigenschaft deklariert werden, um ihn im Element vertikal zu zentrieren.

Ich verschieb das Thema dann mal ins CSS-Board

mfg Maik

 

[EuroCent]

Erstmal ein riesen Danke schön...

Allerdings kann ich dies nicht bei 5 DIVs gleichzeitig verwenden -.-

Daher werd ich wohl mit Table arbeiten müssen um den gewünschten effekt zu erzielen

Dennoch ein Riesen Dank an euch beiden

Bei mir sehe es dann wenn ich table-cell benutze so aus:

<style>
div#title {
display: table-cell;
text-align: left;
vertical-align: middle;
}

div#desc {
display: table-cell;
text-align: left;
vertical-align: middle;
}
</style>

<div id="main">
<div id="title">Zentriert</div>
<div id="desc">Text der auch Zentriert sein soll</div>
</div>

in Echt würde es aber jetzt so aussehen:

<div id="main">
<div id="title">Zentriert</div><div id="desc">Text der auch Zentriert sein soll</div>
</div>

und genau das sollte nicht so sein

hoffe es findet sich hierzu eine Lösung ansonsten trotzdem ein dickes Danke schön

 

[Maik]

Hi,

und wo ist da jetzt der Unterschied zwischen den beiden HTML-Snippets, abgesehen davon, dass darin die beiden inneren DIVs einmal in einer Zeile, und das andere mal untereinander notiert sind?

mfg Maik

 

[Maik]

Oder sprichst du vielleicht von der horizontalen Ausrichtung der DIVs im Browserfenster?

Dann erweiter das Markup folgendermaßen:

<div id="main">
     <div id="titleBox">
          <div id="title">Zentriert</div>
     </div>
     <div id="descBox">
          <div id="desc">Text der auch Zentriert sein soll</div>
     </div>
</div>

mfg Maik

 

[EuroCent]

Oder sprichst du vielleicht von der horizontalen Ausrichtung der DIVs im Browserfenster?

Dann erweiter das Markup folgendermaßen:

<div id="main">
     <div id="titleBox">
          <div id="title">Zentriert</div>
     </div>
     <div id="descBox">
          <div id="desc">Text der auch Zentriert sein soll</div>
     </div>
</div>

mfg Maik

Dein ich meinte es in dem zweiten snippes so:

im Ersten steht es so:

Thema
Description

im Zweiten sieht es mit display: table-cell so aus

ThemaDescription

PS: Siehe anhang hab da mal meine test.html angehängt *txt in htm umbenennen*

Hoffe ihr wisst jetzt was ich meine

*siehe ab: <div id="content_in">*

hoffe ihr könnt abhilfe schaffen ^^

 

[Maik]

hoffe ihr könnt abhilfe schaffen ^^

Das sollte eigentlich mein letzter Vorschlag.

mfg Maik

 

[EuroCent]

Werd ich mal versuchen ^^

Danke und hoffe dass das diesmal den Erfolg bringt

*Hab den Anhang entnommen zwecks kopierung ^^*

 

[EuroCent]

Derzeit zeigt er es mir im Browser "Mozilla/FireFox" richtig an nur unter IE7 nicht

Was kann ich dagegen tun?

Hier mal der Snippsel:

<!-- News Box -->
     <div id="titleBox">
   	  <div id="title">Aktuelle News</div>
      </div>
      <div id="newsBox">
        <div id="news">Derzeit keine News vorhanden.</div>
      </div>
     <!-- News Box Ende -->

Hier der CSS:

div#title {
	width: 569px;
	background-color:#1E3745;
	background-image: url(footer.png);
	background-repeat: repeat-x;
	height: 24px;
	text-align: center;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #101D24;
	border: 1px solid #000000;
	vertical-align: middle;
	display: table-cell;
}

div#news {
	width: 569px;
	background-color:#1E3745;
	background-image: url(footer.png);
	background-repeat: repeat-x;
	height: 24px;
	text-align: center;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #101D24;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-right-color: #000000;
	border-bottom-color: #000000;
	border-left-color: #000000;
	vertical-align: middle;
	display: table-cell;
}