How do I vertically align my text with the button?

Question

I built an HTML banner ad and would like to vertically align the text with the button. See in my example how the text is aligned to the top of the button? I'd like to align it in the exact middle.

http://jsfiddle.net/3PTtv/62/

<div id="wrapper-landing">
<div class="box-row">
    <div class="box-form-body">
        <h4>See What You're Missing</h4>
    </div>
    <div class="box-form-button">
        <img src="http://www.ei.edu/wp-content/uploads/2013/03/button_submit.jpg" /></div>
    </div>
</div>


#wrapper-landing {
    width: 916px;
    margin: 0 auto 50px auto;
    padding: 0;
}

.box-form-body {
    float: left;
    display: block;
    width: 75%;
    padding: 0 0 0 2em;
    border:1px solid #e2e3e4;
}

h4 {
    font-size: 1.05em;
    margin: 0 0 2px 0;
    font-family: "HelveticaNeueW01-75Bold",Helvetica,"Helvetica Neue",Arial,sans-serif;
    font-weight: normal;
}

.box-form-button {
    float: left;
    display: block;
    width: 15%;
    border:1px solid #e2e3e4;
    padding: 0 0 0 3em;
}

.box-row {
    width:100%;
    padding:10px;
    border:1px solid #e2e3e4;
    margin:0px;
    overflow: hidden;
    background-color:#f66511;
}

I updated my jsfiddle: http://jsfiddle.net/3PTtv/74/ The text is in the exact middle, but the button isn't. It's up higher on the banner than the text. How do I get the button to be in the exact vertical middle? — user3075987, Feb 27 '14 at 18:24

score 1 · Accepted Answer · edited May 23 '17 at 12:03

1

You could change the display type of the wrapper <div> elements to inline-block and align them vertically at the middle by vertical-align: middle;.

Here you go:

.box-form-body, .box-form-button {
  display: inline-block;
  vertical-align: middle;
}

.box-form-body { width: 75%; }
.box-form-button { width: 15%; }

Working Demo

Note that there's a white space between inline(-block) elements. I've fixed that by removing the space characters and tabs between those two HTML elements.

In addition, there's a 5px gap underneath the image. That's because the image (inline element) is aligned in its baseline by default (It belongs to the line height reserved characters).

You can remove the gap by aligning the image vertically as follows:

.box-form-button img {
    vertical-align: bottom;
}

Updated Demo.

edited May 23 '17 at 12:03

Community

1
1

answered Feb 27 '14 at 17:41

Hashem Qolami

97,268
26
150
164

Also for further details about the white space issue, you can refer [this answer](http://stackoverflow.com/questions/21875226/space-between-nowrap-inline-blocks/21875532#21875532). – Hashem Qolami Feb 27 '14 at 17:49
The button isn't in the exact vertical middle. It's up higher than the text. How do I get it in the exact middle? – user3075987 Feb 27 '14 at 18:23
Thanks. Do you think the code I put together is best practices? I'm going to use this code for banners going forward. – user3075987 Feb 27 '14 at 18:35
@user3075987 Well, the *best practice* is sort of opinion-based issue; BTW, I may or may not do this completely different but I don't see any problem or *Bad practice* in your code. Just remove the useless CSS declarations such as `overflow: hidden;` for the `.box-row` (as it has no floated child), group the selectors to remove the repeated styles. – Hashem Qolami Feb 27 '14 at 18:43

score 0 · Answer 2 · answered Feb 27 '14 at 17:37

http://jsfiddle.net/3PTtv/67/

Try this CSS:

h4 {
    font-family: "HelveticaNeueW01-75Bold",Helvetica,"Helvetica Neue",Arial,sans-serif;
    font-weight: normal;
}

If this does not suit your needs, let me know and I will edit my answer and JSFiddle if necessary.

score 0 · Answer 3 · answered Feb 27 '14 at 17:44

0

The simple answer is to give your h4 a line-height:

h4 {
    line-height: 2.4;
}

Demo

You could also wrap it in a span and give it a class specific line-height, if you want to preserve the original h4 line-height for future use.

answered Feb 27 '14 at 17:44

Xareyo

1,357
1
13
25

How do I vertically align my text with the button?

3 Answers3