text in a div overflows outside when it is aligned vertically center

Question

For some reason, when applying a pretty commonly used technique for vertically centering text content within a div, the text moves out of the div in some situations.

Here is a link to an example of the problem: http://www.bootply.com/p4oma9jFjX

Note that Example 1 and 2 work just fine but Example 3 demonstrated the problem.

css

.search-result {
    background: grey;
    height: 200px;
    border-width: 10px;
    border-style: solid;
    border-color: white;
}
.search-result:before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}
.item {
    display: inline-block;
    vertical-align: middle;
}
.ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100px
}

html

<div class="col-sm-6 col-xs-12 text-center search-result">
    <div class="item">
        <p class="text-32"><b class="">Example 1</b></p>
        <p class="small hidden-xs"><b class="">Writer(s)</b><br class="">Garry Bonner, Alan Gordon</p>
        <p class="small"><b class="">Made Popular By</b><br class="">The Turtles</p>
    </div>
</div>
<div class="col-sm-6 col-xs-12 text-center search-result">
    <div class="item">
        <p class="text-32"><b class="">Example 2</b></p>
        <p class="small"><b class="">Writer(s)</b><br class="">Harold Faltermeyer</p>
        <p class="small"><b class="">Made Popular By</b><br class="">Harold Faltermeyer, Beverly Hills Cop (Original Motion Picture Soundtrack), Crazy Frog</p>
    </div>
</div>
<div class="col-sm-6 col-xs-12 text-center search-result">
    <div class="item">
        <p class="text-32 text-center"><b class="">Example 3</b></p>
        <p class="small text-center"><b class="">Writer(s)</b><br class="ellipsis">Micayle Mckinney, Rosemarie Tan, Justin Walker, Jonathan James Yip, Jeremy Reeves, Ray Romulus, James Smith, Robin Tadross, Shannon Lawrence</p>
        <p class="small text-center"><b class="">Made Popular By</b><br class="">Danity Kane</p>
    </div>
</div>

Please add the relevant code to the question – apaul May 22 '14 at 19:24 — apaul, May 22 '14 at 19:24

xec · Answer 1 · 2014-05-22T19:47:58.260

1

The issue seems to be related to the fact that you have a :before pseudo-element with height: 100%. I suggest trying an alternative way of centering content:

.search-result {
    background: grey;
    border: 10px solid white;
    display: table;
}
.item {
    height: 200px;
    display: table-cell;
    vertical-align: middle;
}

Vertical-align behaves differently on an element with display: table-cell;.

http://www.bootply.com/5EeJMgZRe7

Read more about vertical-align at: http://phrogz.net/css/vertical-align/index.html

edited May 22 '14 at 19:47

answered May 22 '14 at 19:14

xec

17,349
3
46
54

+1 for an efficient suggestion that works well. This is my `vertical-align:middle` of choice. And for those considering commenting how tables are bad and only for tabular data - `display:table` only mimics a table layout, it won't affect the semantics of your site in any way. – agrm May 22 '14 at 20:03

Dev Man · Answer 2 · 2014-05-22T19:30:54.180

0

do the following changes

.search-result {
    background: grey;
    height: 200px;
    border-width: 10px;
    border-style: solid;
    border-color: white;
    display: table;/* <==the change */
}

edited May 22 '14 at 19:30

answered May 22 '14 at 19:18

Dev Man

2,114
3
23
38

score 0 · Answer 3 · edited May 23 '17 at 12:05

0

For the record what you are doing is very hacky. You can get better results by adding a width modification to .item but in reality you should follow this: Vertically align text in a div

.item{
   width: 99%;
}

edited May 23 '17 at 12:05

Community

1
1

answered May 22 '14 at 19:19

Heath N

533
1
5
13

score 0 · Answer 4 · answered May 22 '14 at 19:20

If you open "full screen" you can see that the problem exist in example2 as well.

Try adding position: absolute; to search-result:before

.search-result:before {
    content: "";
    display: inline-block;
    height: 100%;
    position: absolute;
    vertical-align: middle;
}

Shawn Taylor · Accepted Answer · 2014-05-22T20:03:32.737

0

You should put display: table; and display: table-cell; on the outer and inner divs.

Updated Bootply

Code example:

.search-result {
    background: grey;
    height: 200px;
    border:solid 10px white;
    display:table; /* add this */
}

.item {
    vertical-align: middle;
    display: table-cell; /* and this */
}

edited May 22 '14 at 20:03

answered May 22 '14 at 19:29

Shawn Taylor

15,590
4
32
39

1

`table:cell;` is invalid css (as are html comments in css), i assume you meant `display: table-cell;` and edited the answer (but not the demo) -- the `display: inline-block;` is now redundant though. Also, what is the `:before` clause good for? – xec May 22 '14 at 19:39
I still have no idea :before and :after are for. I guess I should find out:/ – Shawn Taylor May 22 '14 at 19:46
I think it's part of OP's *pretty commonly used technique* (which i have never seen before). Basically, `:before` and `:after` are ways for css to insert content (pseudo-elements) into the document. The way used here, it looks like some hack. https://developer.mozilla.org/en-US/docs/Web/CSS/::before – xec May 22 '14 at 19:52
@xec, regarding inline-block being redundant, you're right, but it seems to do the same thing... my Bootply worked even though I messed up display:table-cell. Didn't know they have the same effect in this case. – Shawn Taylor May 22 '14 at 19:53
@ShawnTaylor Your bootply with `table:cell` only worked because OP's *pretty commonly used technique* was still in play. Thus it did not really work after all ;) – agrm May 22 '14 at 19:56
@AndersG ah you're right. I'll clean up my bootply, leaving the :before stuff in there in case OP has some other purpose for it. – Shawn Taylor May 22 '14 at 20:00

text in a div overflows outside when it is aligned vertically center

css

html

5 Answers5