Vertical align two lines of text

Question

I am having trouble vertical aligning text in a div. I have tried suggestions that i have read on other posts. I'm sure its obvious what I am doing wrong but its not working.

http://jsfiddle.net/o6gqvtoo/

<div class="banner">
  <div class="span10"> <!-- bootstrap -->
    <div class="banner-text">
        <div class="pull-left">Here is the first line of text i want to center</div>
        <div class="pull-left">Here is the second line of text i want to center</div>
        <div class="clear"></div>
    </div>
</div>

.banner{
margin-top:-2;
height: 70px;
background-color: #cf0000;
color: white;
height: 70px;
position: relative;
}

.banner-text{
display: block;
vertical-align: middle;
}

.pull-left {
display: block;
}

What do you mean by `vertical align` text? - This ? - http://jsfiddle.net/o6gqvtoo/5/ — Paulie_D, Feb 23 '15 at 15:27
See also - http://stackoverflow.com/questions/79461/vertical-alignment-of-elements-in-a-div?rq=1 — Paulie_D, Feb 23 '15 at 15:29
@Paulie_D if I change the line height that does not work. but yes thats what i would like — , Feb 23 '15 at 15:30
Obviously it does work but perhaps you need to expand on why line height doesn't work...do you have multiple lines? — Paulie_D, Feb 23 '15 at 15:31
@Paulie_D the line height is too big. I want a smaller line height — , Feb 23 '15 at 15:32
That doesn't **explain** why the smaller line height is required. Perhaps you could provide an image of what this is supposed to look like? — Paulie_D, Feb 23 '15 at 15:40

score 0 · Answer 1 · answered Feb 23 '15 at 15:32

0

vertical-align is sort of an odd one.

Generally you should use it on the elements themselves, not their containers and it's really only for inline and inline-block elements.

But even then it probably won't vertically center like (I'm guessing) you are wanting. So a little trick is to set your line-height to the same as your height and voila:

http://jsfiddle.net/06c7eosv/

Note: With display: inline-block and width: 50% you can't have any white space between the elements in your html

Good:

<div>...</div><div>...</div>

Bad:

<div>...</div>
<div>...</div>

answered Feb 23 '15 at 15:32

Jonathan Dumaine

5,575
3
38
50

this is close. can you put the two lines on separate lines? – Feb 23 '15 at 15:34
see the photo i have added – Feb 23 '15 at 15:50
@CamSonaris Oh, if that's all you wanted, just set some padding around the container and let it size itself to the text. Here http://jsfiddle.net/owtw17re/ – Jonathan Dumaine Feb 23 '15 at 18:00

score 0 · Answer 2 · answered Feb 23 '15 at 16:11

Based on the supplied image and limited information availableI believe that the best option available is to absolutely position the banner-text wrapper div

.banner {
  margin-top: -2;
  height: 70px;
  background-color: #cf0000;
  color: white;
  height: 70px;
  position: relative;
}
.banner-text {
  display: block;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.pull-left {
  display: block;
}

<div class="banner">
  <div class="span10">
    <!-- bootstrap -->
    <div class="banner-text">
      <div class="pull-left">Here is the first line of text i want to center</div>
      <div class="pull-left">Here is the second line of text i want to center</div>
    </div>
  </div>
</div>

That said, other options may be available if the two internal divs can be combined.

Oriol · Answer 3 · 2015-02-23T17:16:59.387

Usually, vertical-align sets the alignment of inline level elements relatively to the line box.

However, in when applied to table cells, it has a different meaning: it sets the alignment of the content inside the cell.

Therefore, you can use CSS tables:

.banner {
    display: table;
    width: 100%;
}
.banner > .span10 {
    display: table-row;
}
.banner-text {
    display: table-cell;
    vertical-align: middle;
}

.banner{
  margin-top:-2;
  height: 70px;
  background-color: #cf0000;
  color: white;
  height: 70px;
  position: relative;
  display: table;
  width: 100%;
}
.banner > .span10 {
  display: table-row;
}
.banner-text{
  display: table-cell;
  vertical-align: middle;
}
.pull-left {
  display: block;
  /* float:left; */
}

<div class="banner">
  <div class="span10"> <!-- bootstrap -->
    <div class="banner-text">
      <div class="pull-left">Here is the first line of text i want to center</div>
      <div class="pull-left">Here is the second line of text i want to center</div>
      <div class="clear"></div>
    </div>
  </div>
</div>

Vertical align two lines of text

3 Answers3