CSS vertically centering text without expanding div

Question

I'm attempting to vertically center text, which wraps to multiple lines, within a div, while not allowing that div to be re-sized based on the amount of text that it contains. Any text that does not fit within the specified height and width should be cut off (preferably with an ellipsis).

The text needs to be within a span element layered within two divs.

<div class="outer-div">
  <div class="inner-div">
    <span class="course-name">Text Here</span>
  </div>
</div>

The issue I'm having is that in order to get the div to not re-size vertically to fit the text I have to set the display to inline-block. However once I do this, the text is no longer vertically centered, but is instead top aligned.

I have read through this post, and played around with its suggestions. However, although these methods (specifically the table display version) do allow for vertical alignment, I still cannot achieve simultaneous centering and fixed height.

Here is a demo of the scenario I'm describing, and below is the CSS from this demo that creates this problem.
Note how in the demo when you uncomment the line which sets display: inline-block, the top div shrinks to the proper height (and exactly matches the size of the second div).

.outer-div, span {
  width: 120px;
  height: 45px;
}

.outer-div {
  text-align: center;
  display: table;
  background-color: blue;
  color: white;
}

.inner-div {
  display: table-cell;
  vertical-align: middle;
}

span {
  font-weight: bold;
  overflow: hidden;
  text-overflow: ellipsis;

  /* The line in question */
  display: inline-block;
}

What is the best way to achieve vertical centering of multiple lines of text within a div with a fixed height and width?

You want to display in single line only which should cut.. If there is more text? — ketan, Feb 23 '16 at 04:38
Flexbox is good for vertical centering: http://stackoverflow.com/a/33049198/3597276 — Michael Benjamin, Feb 23 '16 at 04:41
I dont understand, since your fiddle is already working well on my pc. Here's the result if I increase the elements size: [screenshot](https://i.gyazo.com/5277c2127218bf4c88360bc9f2ccb8b9.png) and your code with more size: [https://jsfiddle.net/ef6j661s/](https://jsfiddle.net/ef6j661s/) — L777, Feb 23 '16 at 04:46
@freestock.tk: In your fiddle I believe the inner div is centered within the outer, but the span is still top aligned in the inner div. This is shown by making the two divs the same size. I'm trying to center the span's text within the inner div. https://jsfiddle.net/zposten/mmgm42wu/2/ — Zach Olivare, Feb 23 '16 at 05:07
[inner div in yellow - CLICK-](https://jsfiddle.net/xm5zsg7p/) ps: its your fiddle, i didnt changed anything besides width and height. — L777, Feb 23 '16 at 05:51

plushyObject · Answer 1 · 2016-02-23T04:47:19.030

You can set the line-height of the text inside the div to the same as the height if it's only a single line.

.some-class{
   height: 45px;
   line-height: 45px;
}

This is better than using tables anyway in opinion.

If I ever want to center anything within a div, you can use CSS transform property.

This can be used for full screen, etc. and is really handy.:

.outer-div{
  position: relative;
}

.inner-div{
  position: absolute;
  top: 50%;
  left: 50%:
  -webkit-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
}

G.L.P · Answer 2 · 2016-02-23T05:48:12.037

1

Try like this: Demo

.inner-div {
  display: table-row; /* changed table-cell to row */
  vertical-align: middle;
}

span {
  font-weight: bold;
  overflow: hidden;
  text-overflow: ellipsis;
   display: table-cell;   /* added table-cell instead of inline-block */
   vertical-align:middle; 
}

or you can simple use line-height if there is single line text and assign vertical align to middle

Updated Demo

.outer-div {
  width: 120px;
  overflow: hidden;      
  background-color: blue;
  color: white;
  height: 45px;      
}

.inner-div {
  display: table;
  text-align: center;
  width: 120px;
}

span {
  font-weight: bold;
  overflow: hidden;
  text-overflow: ellipsis;
  display: table-cell;
  vertical-align: middle;
  height: 45px;    
}

edited Feb 23 '16 at 05:48

answered Feb 23 '16 at 04:40

G.L.P

7,119
5
25
41

In your demo, the top div has expanded to fit the text, instead of staying fixed at 45px. Here is a screenshot of these elements. To me, this looks identical to what is happening in my original demo link (in the question). http://oi64.tinypic.com/jtb1vp.jpg – Zach Olivare Feb 23 '16 at 05:31
Thank you for your help @G.L.P, I chose a different answer because it required less change from what I originally had, but I very much appreciate you taking the time answer! – Zach Olivare Feb 23 '16 at 06:39

Kashif Hussain · Accepted Answer · 2016-02-23T06:24:48.907

1

you need to make changes on two places.

instead of using

.outer-div, span {...}

use only

.outer-div {...}

and for the span, following rule will work

span {
  font-weight: bold;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 120px;
  display: inline-block;
  max-height: 45px;
}

and you are done. here is your working fiddle

https://jsfiddle.net/logiccanvas/y6cpmgdg/1/

edited Feb 23 '16 at 06:24

answered Feb 23 '16 at 04:58

Kashif Hussain

143
11

This is close to what I'm trying to accomplish, except that if the div happens to be taller, I would like it to display as much text as would fit within that space (I'm making a calendar application so each div is a fixed height, but different divs will be different heights). For example in here, look how much space is wasted: https://jsfiddle.net/zposten/y6cpmgdg/. – Zach Olivare Feb 23 '16 at 05:18
can you remove (white-space: nowrap;) from (span{...}) and also add another css rule (max-height: 100px;) on same span. As you said each div will have different height, you can specify inline style (max-height: x;) on each span a, if that's not possible for you, then you can tackle it with jquery as well. here is you solution for now https://jsfiddle.net/logiccanvas/y6cpmgdg/1/ if it doesn't work for you, we can deal it with javascript as well. – Kashif Hussain Feb 23 '16 at 05:43
Ah perfect! `max-height` for the win! Thank you for your help =). Could you possibly update your answer to reflect your last comment so that I can choose it as correct? – Zach Olivare Feb 23 '16 at 05:54
Its my pleasure you got your solution, i have updated my answer after our discussion. Good Luck ); – Kashif Hussain Feb 23 '16 at 06:25

CSS vertically centering text without expanding div

3 Answers3