24

I just can't get the button with class align-right to vertically align in the middle.

HTML:

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

CSS:

.panel-footer {
    height: 70px;
    vertical-align: middle;
    border: solid;
}

.header-footer-item {
    display: inline-block;
    line-height: 70px;
    border: solid red;

}

.align-right {
    float: right;
}

.align-middle {
  vertical-align: middle;
}

Here's the jsfiddle: https://jsfiddle.net/d1vrqkn9/2/

If I remove float:right from the button, it works, but I want it on the right.

If I change header-footer-item from inline-block to inline then the floated button renders above its containing element, which I thought was against the rules: (#4 in the accepted answer here How to vertically middle-align floating elements of unknown heights?) - although the parent element is then vertically aligned in the middle.

I have added line heights as per CSS Vertical align does not work with float

The big question is - how do I fix it? I'm also interested to know why making a child element (the button) float right makes the parent element (the span) no longer vertically align in the containing div (but only if it is inline-block, not inline). ...and finally, isn't it 'against the rules' (https://www.w3.org/TR/CSS21/visuren.html#float-rules, #4) for a floating box's outer top to be higher than the top of its containing block? ...which it clearly is if header-footer-item is inline.

There are so many questions about vertically aligning things you'd think they'd make a css for "Seriously, vertically align this thing - no matter what, no complaints, just do it: sudo force vertical-align:middle !important or I'm coming for you"

18
  • 1
    minimal reproducible example in your question please
    – j08691
    Commented Feb 9, 2017 at 20:53
  • You want the button to be centered horizontally and vertically? Commented Feb 9, 2017 at 20:55
  • 1
    is it what you need?: jsfiddle.net/banzay52/r5bLb1c5/1
    – Banzay
    Commented Feb 9, 2017 at 20:57
  • 1
    @j08691 I linked to a jsfiddle page with the exact issue - does that not meet the criteria?
    – WillyC
    Commented Feb 9, 2017 at 21:03
  • 1
    No, unfortunately it doesn't meet the criteria. If jsFiddle is ever down, goes away, or blocked, then your question loses all value for future visitors.
    – j08691
    Commented Feb 9, 2017 at 21:06

6 Answers 6

19

The cleanest way to do that is to use flex like this:

  1. Add display: flex to your outer div panel-footer [Check code below]

  2. Remove the float and use text-align:right on the span for the button. [Check code below]

  3. Add align-self: center to the inner span. [Check code below]


For 1:

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

For 2:

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

For 3:

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

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

3
  • This looks like a winner. I'd still love to know the answers to my secondary questions because it doesn't seem like it is following 'the rules' as stated at w3.org (specifically that floating elements should not render higher than their containing element), but I'll take it.
    – WillyC
    Commented Feb 9, 2017 at 21:11
  • "....isn't it 'against the rules' for a floating box's outer top to be higher than the top of its containing block?" -- What do you mean by "higher than"?
    – AndrewL64
    Commented Feb 9, 2017 at 21:15
  • Rendered above it on the Y axis. In my original code if you change the span to display:inline you can see the button is entirely rendered above (Y axis) the span, which from the w3.org rules I linked too seems wrong. I mean, I'm obviously the one who's incorrect but I am trying to learn why.
    – WillyC
    Commented Feb 9, 2017 at 21:22
13

Here's a version with proper HTML, and just enough 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>

3
  • The top of the button is aligned in the middle, but I want the centre of the button to be aligned.
    – WillyC
    Commented Feb 9, 2017 at 21:09
  • 1
    Eh, what? No, the middle of the button is aligned in the center. What browser are you using if you see the top aligned in the middle? Commented Feb 9, 2017 at 21:23
  • It isn't actually the top, but it is slightly shifted to the bottom. If I use a pixel ruler the bottom of that button is 10px closer to the border than the top of the button. Safari 10.0.3.
    – WillyC
    Commented Feb 9, 2017 at 21:36
1

There's an accepted answer already with some flexbox magic, here's an answer without it and the extra wrapping 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>

4
  • If you use a pixel ruler you can tell that the bottom of the button is a few pixels closer to the border than the top.
    – WillyC
    Commented Feb 9, 2017 at 21:39
  • All I can tell you is in my browser this solution is down a few pixels and the accepted answer is not. I'm happy your solution works for you!
    – WillyC
    Commented Feb 9, 2017 at 21:49
  • What browser are you using? Commented Feb 9, 2017 at 21:50
  • Using Safari 10.0.3
    – WillyC
    Commented Feb 9, 2017 at 21:50
0

If you don't need your button to be box-modeled then you can remove float:right; and add text-align:right to parent.

But I agree with previous answer that flexbox is pretty good answer to all positioning doubts.

Solution with text-align: https://jsfiddle.net/d1vrqkn9/8/

Solution with flexbox: https://jsfiddle.net/d1vrqkn9/9/

0

line-height will do. Try different height values.

<span style="width:100%; line-height: ??px;" class="header-footer-item">
0

In my point of view, trying to achieve that with a float element is a dead end. If your goal is to have an element at the right inside another element, you better use another solution, like table positionning.

You just have to create the 4 following css class (the row element is not used in this case) :

.table {
    display: table;
    width: 100%;
}

.row {
    display: table-row;
    width: 100%;
}

.cell {
    display: table-cell;
}

.cell-min-width {
    display: table-cell;
    width: 1%;
}

Then you just have to change your code for :

<div class="panel-footer table"> <!-- Position with table -->
    <span style="width:100%;" class="header-footer-item">
        <div class="cell"></div><!-- Empty cell to fill the left-->
        <div class="cell-min-width"> <-- Cell with min width to fit the button -->
          <button class="" type="button">Save</button>
        </div>  
    </span>    
</div>

https://jsfiddle.net/outch27/d1vrqkn9/366/

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.