Is there a way to vertical center variable length text with fix height container?

Question

It is a common trick to center text inside div by:

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

The problem is that the text inside my div is some string with variable length and I want the container to be fix height and width. However, when changing the above CSS to this:

.center-div {
    display:table-cell;
    vertical-align: middle;
    width: 100px;
    height: 100px;
    text-overflow: ellipsis;
}

As it is a table-cell, it simply change the height of the div instead of overflowing. As my text will be a multi-line text, so the line-height trick won't work. Is there a way for me to center text and being able to overflow at the same time?

P.S. A CSS only answer is prefered. The content will be rendered by angularjs and it is impossible to know when the rendering is finished. In case javascript is absolutely needed, please also state a way I can use it together with angularjs. (ng-repeat, to be specific)

in my experience vertical-align:middle never works for some reason, you're better off giving your text div a fixed height, going with padding top and bottom and setting your overflow to scroll — Rachel Gallen, Apr 10 '15 at 05:06

Prime · Accepted Answer · 2015-06-03T12:00:38.750

3

Text will be vertically center with fixed height and width. word-wrap:break-word; added to span

div.center-div
{
    display: table;
    table-layout:fixed;
    margin:0 auto;
}

div.center-div span
{
    display:table-cell;
    max-width:300px;
    height:100px;
    vertical-align:middle;
  background :red;
text-align:center;  
 word-wrap:break-word;
}

HTML

<div class="center-div">
     <span>
          hi
     </span>
</div>

http://jsbin.com/kixizehuhu/3/edit

edited Jun 03 '15 at 12:00

answered Jun 03 '15 at 11:54

Prime

3,530
5
28
47

Bounty awarded because this is the only answer that doesn't require support of CSS3. – cytsunny Jun 08 '15 at 03:07

score 2 · Answer 2 · edited Jun 04 '15 at 04:49

If your text is going to be put in a div with fixed width and height, you can simply use this:

.center-div {
  width: 100px;
  height: 100px;
  position: relative;
  text-align: center;
  border: 1px solid #333;
}
.content {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  max-height: 100px;
  overflow: auto;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
}

<div class="center-div">
  <div class="content">Lorem ipsum dolor sit amet, consectetur.</div>
</div>

CSS:

.center-div {
   width: 100px;
   height: 100px;
   position: relative;
}
.content {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    max-height: 100px;
    overflow: auto;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
}

CodePen Preview Link

Note that text-overflow: ellipsis works only with white-space: nowrap; for a single line text.

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

The text-overflow:ellipsis doesn't work on multiline text. There are some css-only workarounds that have very poor browser support. If you want it to work, you could look into some JavaScript solutions.

Anyway, as for centering your text, I prupose adding a container and using line-height: 100px for it and display: inline-block and max-height:100px for the content:

http://jsfiddle.net/ilpo/jwcyfwpw/

score 0 · Answer 4 · answered Jun 04 '15 at 02:52

I think you have to place an element inside the div to carry the text, to make overflowing, and center it vertically, and the div container handle the size

something like this:

HTML:

<div class="center-div-content">
    <div class="center-div">
        this a long long long long long long long long long long long long text
    </div>
</div>

CSS:

.center-div-content{    
    position: relative;
    display: inline-block;
    width: 100px;
    height: 100px;
}

.center-div {
    position: absolute;
    width: 100%;    
    top: 50%;
    text-align: center; //if you want center horizontal too

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    transform: translateY(-50%);
}

in this FIDDEL you can see how the text changes its length and it's still aligned and overflowing

http://jsfiddle.net/Yandy_Viera/qnmm1Lm5/1/

Rohit Kumar · Answer 5 · 2015-06-05T20:15:20.600

0

Okay, I think this is what you want?? add a span to around your text

http://jsfiddle.net/ct9ey95k/1/

try adding more or removing text and see that it is according to your need or not?

edited Jun 05 '15 at 20:15

answered Jun 05 '15 at 20:10

Rohit Kumar

2,048
1
14
28

score 0 · Answer 6 · answered Jun 06 '15 at 20:18

Not sure if this is exactly what you want, but I use this trick:

CSS:

.outer {
     overflow-x: hidden;
     overflow-y: auto;
     text-align: center;
     position: fixed;
     top: 0;
     left: 0;
     bottom: 0;
     right: 0;
}
.outer:after {
     content: "\a0 ";
     position: relative;
     display: inline-block;
     vertical-align: middle;
     top: 0px;
     left: 0px;
     width: 0px;
     height: 100%;
}
.inner {
     display: inline-block;
     vertical-align: middle;
     width: 70%;
     min-height: 100px;
     background: red;
}

HTML

<div class="outer">
  <div class="inner">
    Your Text ....
  </div>
</div>

Jsbin: http://jsbin.com/duwuzogodo/1/edit

Now, the inner layer is centered both vertically and horizontally within the outer layer (fixed in this example). Now, if the text in the inner Layer is getting too large it can overflow and you can scroll it. Imho this is better than using the table-cell hack. Plus, no scripts needed.

score 0 · Answer 7 · edited Sep 14 '21 at 15:23

This is a possible solution combining some of the answers from above and adding in bootstrap to vertically center the text.

Fiddle

HTML

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="dlink.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>


<div class="row my-row">
  <div class=" col-12 my-col container-w-header">
    <div class="col-12 my-col">

      <div class="ContainerSingle ">
        <div class="icon">
          <a href="http://placeholder.com"><img src="https://via.placeholder.com/72"></a>
        </div>
        <div class="labelContainer-overflow">
          <div class="row my-row align-items-center label-row">
            <div class=" col-12 my-col label-col">
              <div class="iconLabel-overflow">
                <span>
                  This is a super long label that probably is not going to fit in this little box so it overflows with an elipsis
                </span>
              </div>
            </div>
          </div>
        </div>
        
        <div class="ContainerSingle ">
        <div class="icon">
          <a href="http://placeholder.com"><img src="https://via.placeholder.com/72"></a>
        </div>
        <div class="labelContainer-overflow">
          <div class="row my-row align-items-center label-row">
            <div class=" col-12 my-col label-col">
              <div class="iconLabel-overflow">
                <span>
                  Try changing this text to various line lengths
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

CSS

.my-col { 
    /* border: 3px dotted blue;  */
    padding: 0;

}

.my-row {
    /* border: 3px solid red; */

}

.label-row {
    height: 72px;
    justify-content: start;
    align-items: center!important;

}

.ContainerSingle {
    text-align: center;
    display: inline-block;
    max-height: 72px;
    vertical-align: top;
}

.icon {
    display: inline-block;
    float: left;
    margin-right: 16px;
    height: 72px;
    width: 72px;
}

.labelContainer-overflow{
    display: inline-block;
    text-align: left;
    vertical-align: top;
    min-width: 124px;
    
    
}

.iconLabel-overflow span {
    max-width:124px;
    color: #707070;
    font-size: .85rem;
    line-height: 1.15rem;
    overflow: hidden;
    display: -webkit-box;
  -webkit-box-orient: vertical;
  
  /* <integer> values */
  -webkit-line-clamp: 4;

score -2 · Answer 8 · answered Apr 10 '15 at 05:08

-2

try this..

Html

<div class="center-div">
  <div class="content">text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here</div>
</div>

Css

    .center-div {
    display:table-cell;
    vertical-align: middle;
    width: 100px;    
    text-overflow: ellipsis;
    border:1px solid red;    
}
.content {       
    height: 100px;
    overflow: auto;
}

Fiddle Demo

answered Apr 10 '15 at 05:08

Aru

1,840
1
12
15

The problem of your code is that when there are less text, the text are not vertically center. See this http://jsfiddle.net/hzx3xbvy/2/ . It is just your demo with same css settings but less text. I am using Chrome. – cytsunny Apr 10 '15 at 05:38

Is there a way to vertical center variable length text with fix height container?

8 Answers8