CSS text on the middle of div (div height:20%)

Question

<style>
._1{
  height:20%;
  width:100%;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}
</style>
<div class="_1">content</div>

how to make content align at the middle of the div? thanks. demo

Edit: Height is % not px. I set line-height: 20% but it's not work.

Possible duplicate of [CSS Center text (Horizontal and Vertical) inside a DIV block](http://stackoverflow.com/questions/5703552/css-center-text-horizontal-and-vertical-inside-a-div-block) — Jishnu V S, Nov 08 '16 at 11:01

xale94 · Accepted Answer · 2016-11-08T11:06:54.710

0

   div{ 
    height: 20%;
    width: 100%;
    text-align: center;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: space-around;
    align-content: center;    
  }

edited Nov 08 '16 at 11:06

answered Nov 08 '16 at 10:58

xale94

424
5
12

but height is % not px – Đặng Duy Tâm Nov 08 '16 at 10:58
@ĐặngDuyTâm fixed – xale94 Nov 08 '16 at 10:59
1

Percentage values for line height are the percentage of font-size, so `20%` will not help in this case. – DBS Nov 08 '16 at 11:02
@DBS then how can I fix it? sir! – Đặng Duy Tâm Nov 08 '16 at 11:05
ok... then try to use flexbox, i'm going to change the answer – xale94 Nov 08 '16 at 11:05
this will not work, because percentage height only take when the div is positioned , if you give position:absoulte it will work in percentage – Jishnu V S Nov 08 '16 at 11:09
@xale94 sir ur code work well but I can't using `text-overflow:ellipsis;` – Đặng Duy Tâm Nov 08 '16 at 11:12

score 0 · Answer 2 · answered Nov 08 '16 at 11:18

An alternative option: Use an inner element that's vertically centred.

To do this:

Set ._1 to position: relative;
Wrap the text inside a centerPosition class and use the CSS for that class below.

._1 {
  position: relative;
  height: 20%;
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  
  /* Just to make this example visible */
  border: 2px solid #555;
}

.centerPosition {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

/* Not needed, just making the page bigger */
.examplePage {
  height: 300px;
}

<div class="examplePage">
  <div class="_1">
    <div class="centerPosition">content</div>
  </div>
</div>

score 0 · Answer 3 · answered Nov 08 '16 at 11:19

If you do not want to use flexbox, you can try using CSS3 translate. But in order for this to work you need to wrap your text in paragraph or some other tag:

._1 p{
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%); 
    position: relative;
  top: 50%;
}
<div class="_1"><p>content</p></div>

With that markup you can use and table-cell aligning technic as well.

score 0 · Answer 4 · answered Nov 08 '16 at 11:24

0

Flex-box only solution. Here browser support

._1{
  height:20%;
  width:100%;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  
  display: flex;
  align-items: center;
  
  border: 1px dashed deepskyblue;
}

html,body {
 height: 100%;
}

<div class="_1">content</div>

answered Nov 08 '16 at 11:24

CastenettoA

673
5
17

you are wellcome :) – CastenettoA Nov 08 '16 at 11:30

CSS text on the middle of div (div height:20%)

4 Answers4