Heinrich-: Vertical-Align mit Float

SELF-Forum

Vertical-Align mit Float

Heinrich-
– Informationen zu den Bewertungsregeln

Hallo,
ich habe Probleme: Elemente die mit einem float ausgestattet sind, reagieren auf vertical-align nicht mehr (da float für den Textfluss außenrum angegeben wird, irgend wie auch sinnvoll).
In meinem Szenario würde ich es aber trotzdem gern können.

Ich habe 3 Elemente in einem div. Das eine soll links von der Seite sein, das andere genau mittig und das dritte rechts.

Ich habe es bis jetzt so gemacht:

  
<div id="outer" style="text-align: center; height: 40px; width:100%">  
    <div id="left" style="display:inline-block; float: left; width:100px;height:25px">ist irgend ein Button</div>  
    <div id="center" style="display:inline;">ein Label</div>  
    <div id="right" style="display:inline-block; float: right;">Eine Forme mit einem Dropdown</div>  
</div>

Nun würde ich aber gern, dass left, center und right auch mittig (von outer) ausgerichtet werden.

Wie kann ich dieses Szenario mit den 3 Elementen so umsetzen, dass ich das bekomme was ich eigentlich will?

Danke

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Vertical-Align mit Float

    Matthias Apsel Homepage des Autors
    – Informationen zu den Bewertungsregeln

    Om nah hoo pez nyeetz, Heinrich-!

    <div id="outer" style="text-align: center; height: 40px; width:100%">
        <div id="left" style="display:inline-block; float: left; width:100px;height:25px">ist irgend ein Button</div>
        <div id="center" style="display:inline;">ein Label</div>
        <div id="right" style="display:inline-block; float: right;">Eine Forme mit einem Dropdown</div>
    </div>

      
Du verwendest sinnfreie Id's. Falls sie überhaupt notwendig sein sollten, benenne sie nicht nach der (gegenwärtig) gewünschten Gestaltung sondern nach ihren Inhalten.  
  
Du verwendest sinnfreie Elemente. Nimm button, label und form. Zudem ist es äußerst unsinnig das algemeine Blockelement per CSS zu einem Inlineelement zu machen, nimm gleich span bzw. (die deutlich bessere Idee) semantisch passende Elemente, in dem Fall also label.  
  
Zu deiner Frage:  
  
display: table-cell könnte helfen oder der Suchbegriff faux-columns.  
  
  
Matthias

-- 
1/z ist kein Blatt Papier.  
![](http://www.billiger-im-urlaub.de/kreis_sw.gif)
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Vertical-Align mit Float

      Heinrich-
      – Informationen zu den Bewertungsregeln

      die ids und divs sind hier nur beispielhaft

      die ids habe ich so genommen, damit man hier leicht das element benennen kann, über das man redet
      habe alles als div angegeben, da mir die elementart bei der fragestellung erstmal egal ist.

      ich schau mir table-cell und faux-columns mal an.

      danke

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln