So erhalten Sie Float: rechte Maustaste zum vertikalen Ausrichten in der Mitte

Question

Ich kann den Button mit der Klasse align-right nicht einfach vertikal in der Mitte ausrichten.

HTML:

<div class="panel-footer"> 
    <span style="width:100%;" class="header-footer-item"> 
     <button class="align-right" type="button">Save</button> 
    </span>  
</div> 

CSS:

Hier ist der jsfiddle: https://jsfiddle.net/d1vrqkn9/2/

Wenn ich float:right vom Button zu entfernen, es funktioniert, aber ich will es auf der rechten Seite .

Wenn ich header-footer-iteminline-block-inline dann die schwammen Taste macht über die darin enthaltenen Element zu ändern, die ich dachte, gegen die Regeln war: (# 4 in der akzeptierte Antwort hier How to vertically middle-align floating elements of unknown heights?) - obwohl das übergeordnete Element dann vertikal in ausgerichtet ist, die Mitte.

Ich habe Zeilenhöhen hinzugefügt, wie pro CSS Vertical align does not work with float

Die große Frage ist - wie kann ich das Problem beheben? Ich bin auch daran interessiert zu wissen, warum ein Elternelement (die Spanne) nicht mehr vertikal in dem enthaltenden div ausgerichtet wird (aber nur wenn es inline-block ist, nicht inline). ... und schließlich, ist es nicht "gegen die Regeln" (https://www.w3.org/TR/CSS21/visuren.html#float-rules, # 4), dass die äußere Oberseite einer schwebenden Box höher ist als die Oberseite ihres umgebenden Blocks? ... was eindeutig ist, wenn header-footer-iteminline ist.

Es gibt so viele Fragen über vertikal ausrichten Dinge, die Sie denken würden sie einen CSS für machen würde „Ernsthaft, vertikal dieses Ding ausrichten - egal was, keine Beschwerden, tun Sie es einfach: sudo force vertical-align:middle !important or I'm coming for you“

Answer 1

Die beste und sauberste Weg, das zu tun ist flex wie folgt zu verwenden:

1. hinzufügen display: flex zu Ihrem äußeren div panel-footer [Check Code unten]

2. Remo Lege den Schwimmer fest und benutze text-align:right auf der Spanne für den Knopf. [Prüfcode unten]

3. Fügen Sie align-self: center zur inneren Spannweite hinzu. [Check Code unten]

---

Für 1:

.panel-footer { 
    height: 70px; 
    border: solid; 
    display:flex; 
} 

Für 2:

.header-footer-item { 
     text-align: right; 
} 

Für 3:

.header-footer-item { 
    align-self: center; 
} 

jsFiddle:https://jsfiddle.net/d1vrqkn9/4/

Answer 2

Hier ist eine Version mit korrektem HTML und gerade genug CSS.

.panel-footer { 
 
    height: 70px; 
 
    border: solid; 
 
    position: relative; 
 
} 
 
.panel-footer button { 
 
    position: absolute; 
 
    right: .5em; 
 
    top: 50%; 
 
    transform: translate(0,-50%); 
 
}

<div class="panel-footer"> 
 
      <button>Save</button> 
 
    </div>

Answer 3

Wenn Sie Ihre Taste nicht sein modellierte Box, dann können Sie float:right; entfernen und text-align:right Mutter hinzufügen.

Aber ich stimme der vorherigen Antwort, dass flexbox ist eine gute Antwort auf alle Zweifel Positionierung.

Lösung mit text-align: https://jsfiddle.net/d1vrqkn9/8/

Lösung mit Flexbox: https://jsfiddle.net/d1vrqkn9/9/

Answer 4

Es gibt eine akzeptierte Antwort bereits mit einigen Flexbox Magie, hier ist eine Antwort, ohne sie und die zusätzliche Verpackung span-Element.

.panel-footer{ 
 
    position:relative; 
 
    height: 200px; 
 
    border:1px solid #000; 
 
} 
 

 
.panel-footer button.align-right{ 
 
    position:absolute; 
 
    right:0; 
 
    top:50%; 
 
    transform:translateY(-50%); 
 
}

<div class="panel-footer"> 
 
    <button class="align-right" type="button">Save</button> 
 
</div>