Richten Sie HTML-Elemente in einem div horizontal aus

Lesezeit: 3 Minuten

Benutzer-Avatar
gigi

Ich habe drei HTML-Objekte und möchte die Schaltfläche „Zurück“ auf der linken Seite, die Schaltfläche „Weiter“ auf der rechten Seite und die Spanne in der Mitte in einem Container-Div anordnen.

<PREVIOUS> |SPAN| <NEXT>

    #btnPrevious
    {
        float:left;
    }
    #spanStage
    {
        font-weight:bold;
        vertical-align:middle;    
    }
    #btnNext
    {
        float:right;
    }
    <div>
        <input type="button" value="Previous" id="btnPrevious"/>
        <span id="spanStage">Stage 5</span>
        <input type="button" value="Next" id="btnNext"/>
    </div>

Benutzer-Avatar
facebook-100006652272506

Der Stil “display:flex” ist eine gute Möglichkeit, diese Elemente in derselben Zeile zu erstellen. Egal welche Art von Element im div. Besonders wenn die Eingabeklasse Form-Control ist, funktionieren andere Lösungen wie Bootstrap, Inline-Block nicht gut.

Beispiel:

<div style="display:flex; flex-direction: row; justify-content: center; align-items: center">
     <input type="button" value="Previous" id="btnPrevious"/>
     <span id="spanStage">Stage 5</span>
     <input type="button" value="Next" id="btnNext"/>
</div>

Mehr Details zu Flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Flex-Richtung: Zeile, Spalte

justify-content: flex-end, center, space-between, space-around

Ausrichtungselemente: Dehnung, Flex-Start, Flex-Ende, Mitte

  • könnten Sie bitte mehr abot hinzufügen biegen Es kann mehr für Leute helfen, die neu in CSS-Flex-Concpets sind.

    – SakthiSureshAnand

    9. August 2018 um 12:58 Uhr

Einfach hinzufügen text-align: center zu Ihrem Wrapper, um die horizontale Ausrichtung aller nicht schwebenden/nicht positionierten untergeordneten Elemente festzulegen:

div{
    text-align:center;
}

<span> sind standardmäßig Inline-Elemente. Also müssen Sie entweder verwenden display:block auf sie und stylen sie entsprechend, oder optimieren Sie einfach den übergeordneten Stil ein wenig. Da es keine anderen Kinder als die gibt <span> und die <button>s Ihr Bestes mit dieser einfachen Lösung.

Beachten Sie, dass text-align:<value> vom übergeordneten Element geerbt wird. Wenn Sie also etwas anderes in Ihren Wrapper aufnehmen möchten, sollten Sie prüfen, ob text-align:center ist okay für dich. Ansonsten verwenden text-align:<value> im spezifischen Element, wo value ist left, right, center oder justify.

JSFiddle-Demo

Benutzer-Avatar
Kundan

Versuchen Sie es mit display:flex.

.header {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
<div class="header">
    <input type="button" value="Previous" id="btnPrevious"/>
    <span id="spanStage">Stage 5</span>
    <input type="button" value="Next" id="btnNext"/>
</div>

Benutzer-Avatar
Vivek Chandra

Klasse hinzufügen line zu allen untergeordneten Elementen, die Sie in einer einzigen Zeile und möchten voila! Sie sind dir gehorchen in einer Reihe bleiben.

.line {
    width:33%;
    float:left;
}
<div>
    <input type="button" class="line" value="Previous" id="btnPrevious"/>
    <span id="spanStage" class="line">Stage 5</span>
    <input type="button" class="line" value="Next" id="btnNext"/>
</div>

Benutzer-Avatar
Taiti

Fügen Sie dies einfach zu Ihrem CSS hinzu.

#btnPrevious,#spanStage,#btnNext {
      width:33%;
       display:inline-block;
     }

1225150cookie-checkRichten Sie HTML-Elemente in einem div horizontal aus

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy