how do i vertically center two elements in a parent?

Question

As you can see in the demo, once I add the <em> the <button> is displaced.

I would like the button to be vertically center in the footer.

Demo: http://jsfiddle.net/chovy/5h5hc/1/

HTML

<footer>
    <button class="btn-primary">Reply</button>
</footer>

<footer>
    <em></em>
    <button class="btn-primary">Reply</button>
</footer>

CSS

footer {
    display: block;
    height: 50px;
    line-height: 50px;
    border: 1px solid red;
    padding: 0 20px;
    text-align: right;
    margin-top: 20px;
}

em {
    display: inline-block;
    height: 50px;
    width: 50px;
    border: 1px solid blue;
    box-sizing: border-box;
}

score 1 · Accepted Answer · answered Aug 31 '13 at 09:16

1

Make a small change to your HTML.

<footer>
    <button class="btn-primary">Reply</button>
</footer>

<footer>
    <em>&nbsp;</em>
    <button class="btn-primary">Reply</button>
</footer>

Add some text to your <em> it works as expected. (If you don't want any text in there, just put   for a space.)

Fiddle here.

answered Aug 31 '13 at 09:16

Sunny R Gupta

5,026
1
31
40

you add just space. but in your demo reply button not get vertical-align – Falguni Panchal Aug 31 '13 at 09:32
1

works for me. thanks. I wonder if there is a way to add the space with css. I don't like having to remember to put ` ` in there. – chovy Aug 31 '13 at 09:50

Falguni Panchal · Answer 2 · 2013-08-31T09:23:07.480

0

LIke this please add float:left; in em selector

DEMO

CSS

em {
    display: inline-block;
    height: 50px;
    width: 50px;
    border: 1px solid blue;
    box-sizing: border-box;
    float:left;
}

edited Aug 31 '13 at 09:23

answered Aug 31 '13 at 09:18

Falguni Panchal

8,873
3
27
33

Float left will move the box from right position to left, we should not try to push an element to the other side. – Sunny R Gupta Aug 31 '13 at 09:19
1

I don't want it floated left though. and your demo was my original. – chovy Aug 31 '13 at 09:20
@SUNNY R GUPTA you check my demo why you get me negative point – Falguni Panchal Aug 31 '13 at 09:22
I saw your DEMO, basically it has a glitch, you modified the layout of the original code. – Sunny R Gupta Aug 31 '13 at 09:25
@chovy http://jsfiddle.net/5h5hc/2/ see this demo and just add float:left; in your em selector may i sure you get result. – Falguni Panchal Aug 31 '13 at 09:30
1

I don't want it left aligned. – chovy Aug 31 '13 at 09:49

Moob · Answer 3 · 2013-08-31T11:49:44.643

You could tell them to behave like tables: http://jsfiddle.net/5h5hc/12/. Then your footer can be as flexible as you like and the content will always be horizontally centered.

<footer>
    <div><em>an em</em><button class="btn-primary">Reply</button></div>
</footer>

css:

footer {
    display:table;
    height:50px;
    border:1px solid #990000;
    width:100%;
}
footer div {
    display:table-cell;
    vertical-align:middle;
    text-align:right;
}

score 0 · Answer 4 · answered Aug 31 '13 at 11:51

0

You simply add vertical-align: top to the <em> to negate the default behaviour of the display: inline-block declaration. fiddle

answered Aug 31 '13 at 11:51

cjross

636
1
5
10

how do i vertically center two elements in a parent?

4 Answers4