✔ vertical-align: middle;

[Zack]

Hallo,
vertical-align: middle; wird nicht angenommen:

	div#subnav_right
	{
		height: 60px;
		float: right;
		vertical-align: middle;
		background-color: #0f0;
	}

 

[Maik]

Hi,

was du nicht sagst.

In dieser Regel für ein allgemeines Blockelement fehlt auch die display-Eigenschaft mit einem der Tabellenwerte (siehe http://de.selfhtml.org/css/eigenschaften/positionierung.htm#display), damit vertical-align hier überhaupt greift.

Achja, der IE in all seinen bisherigen Versionen unterstützt diese Tabellenwerte der display-Eigenschaft nicht, womit ein Workaround erforderlich ist, wie z.B. http://www.pmob.co.uk/temp/vertical-align3.htm

mfg Maik

 

[Zack]

also quais so:

	div#subnav_right
	{
		float: right;
		display:table-cell;
		vertical-align:middle;
		position:relative;
		height: 60px;
		background-color: #0f0;
	}

Dosnt work...mit opera und ff

 

[Maik]

Das liegt in diesem Fall schlichtweg an der float:right-Deklaration.

Was soll denn eigentlich dieses div-Element zukünftig in sich aufnehmen?

mfg Maik

 

[Zack]

da kommt ein login rein. das div ist in einem übergeordnetem div und soll sich halt an der rechten seite von diesem anbinden.

mein problem ist das ich bis jetzt nur mit tabellen gearbeitet habe^^ aber das soll man ja eigentlich nicht nehmen.

dann bleibt mir ja nix anderes übrig als weiter zu verschachteln, nagut aber danke für die hilfe.

 

[Maik]

Wenn das Markup so lautet:

<div id="subnav_right">
        <input type="text">
</div>

empfehle ich dir wegen der float-Angabe anstelle von vertical-align:middle die line-height-Eigenschaft:

div#subnav_right
        {
                float:right;
                height:60px;
                line-height:60px;
                position:relative;
                background-color: #0f0;
        }

Lediglich die Vorgänger des IE7 verweigern hier die vertikale Zentrierung des input-Elements.

mfg Maik

 

[Zack]

naja momentan isses so:

<div id="subnav_right">
	<div id="subnav_right_center">
		<!-- Login -->
		<form name="form_loginbox" method="post" action="index.php">
  			<label for="email">E-Mail</label>
  			<input name="email" type="text" class="form" id="email" size="18" tabindex="1" />
  			<a href="index.php?mod=signon"><img src="design/images/icon_add_user.png" alt="add_user"  width="20" height="20" border="0" /></a>
  			<label for="password" class="copyright">Passwort</label>
  			<input type="password" name="password" id="password" class="form" size="18" tabindex="2" />
  			<a href="index.php?mod=usrmgr&amp;action=pwrecover"><img src="design/images/icon_pw_forgot.png" alt="pw_forgot"  width="20" height="20" border="0" /></a>
    		<input type="submit" class="Button" name="login" value="Einloggen" />
    	</form>
	</div>
</div>

geht halt nur im ie net, muss ich mir noch was einfallen lassen.

line-height:60px; geht leider nicht, habs gerade versucht. dann passt das mit dem button nicht und wenn man eingeloogt sieht das auch bescheiden aus

 

[Maik]

Na, in diesem Fall hätte ich was für dich, was sogar der IE "1A" beherrscht

div#subnav_right form {
height:20px;
margin-top:20px;
}

mfg Maik

 

[Zack]

wäre zu schön um war zu sein^^ aber an der selben stelle, im selben div wird nach dem login wieder text ausgegeben. die wäre dann wieder falsch ausgerichtet.

 

[Maik]

Einzeilige Textpassagen, die Betonung liegt hier auf einzeilig, lassen sich in allen Browsern mittels der line-height-Eigenschaft vertikal zentrieren.

mfg Maik