CODEWITHSUNDEEP
htmlcss
gigi
gigi

Reputation: 3956

Align HTML elements horizontally in a div

I have three HTML objects and want to arrange Previous button at the left side, Next button at right side and span in the middle inside a container div.

<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>

Upvotes: 53

Views: 167167

Answers (5)

Vivek Chandra
Vivek Chandra

Reputation: 4358

Add the class line to all the children elements that you want in a single line and voila! They are obeying you to stay in a line.

.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>

Upvotes: 8

Kundan
Kundan

Reputation: 1962

Try using 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>

Upvotes: 14

facebook-100006652272506
facebook-100006652272506

Reputation: 1250

The "display:flex" style is a good way to make these elements in same line. No matter what kind of element in the div. Especially if the input class is form-control,other solutions like bootstrap, inline-block will not work well.

Example:

<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>

More detail about flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

flex-direction: row, column

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

align-items: stretch, flex-start, flex-end, center

Upvotes: 62

Taiti
Taiti

Reputation: 377

Just add this to your css.

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

Upvotes: 4

Zeta
Zeta

Reputation: 105965

Just add text-align: center to your wrapper to set the horizontal alignment of all non-floating/non-positioned children:

div{
    text-align:center;
}

<span> are inline elements by default. Thus you either have to use display:block on them and style them appropriately, or just tweak the parent style a little bit. Since there are no other children than the <span> and the <button>s your best of with this simple solution.

Note that text-align:<value> gets inherited from the parent, so if you want to include something else in your wrapper you should check whether text-align:center is okay for you. Otherwise use text-align:<value> in the specific element, where value is left, right, center or justify.

JSFiddle Demo

Upvotes: 26

Related Questions