How to center Text vertically?

Question

How to center the Text Test Text vertically? see here

I want to make distance between the text and the boarder bottom equals the distance between the text and the boarder top. `

Is it single lined text? If yes, than use line height same as height — Justinas, Jan 16 '15 at 11:10
Maybe this will help: http://stackoverflow.com/questions/396145/how-to-vertically-center-a-div-for-all-browsers — Pavelloz, Jan 16 '15 at 11:11
line-height is not going to help here, because element is made of different size borders, whole approach should be different. — lima_fil, Jan 16 '15 at 11:25

score 4 · Answer 1 · answered Jan 16 '15 at 11:12

For single lined text, use line-height that is equal to height (or rounded up to even number).

#a {
  display: inline-block;
  padding-right: 20px;
  padding-left: 15px;
  font-family: 'Roboto';
  font-size: 12px;
  font-weight: bold;
  font-stretch: condensed;
  COLOR: white;
  border-left: 10px solid transparent;
  border-bottom: 25px solid;
  border-bottom-color: #FF3300;
  height: 0;
  line-height: 26px;
  top: 50%;
}

<span id="a">TEST TEXT</span>

score 2 · Answer 2 · answered Jan 16 '15 at 11:11

Use line-height: 25px(will work for single-line text only).

#a {
  display: inline-block;
  padding-right: 20px;
  padding-left: 15px;
  font-family: 'Roboto';
  font-size: 12px;
  line-height: 25px;
  font-weight: bold;
  font-stretch: condensed;
  COLOR: white;
  border-left: 10px solid transparent;
  border-bottom: 25px solid;
  border-bottom-color: #FF3300;
  height: 0;
  top: 50%;
}

<span id="a">TEST TEXT</span>

score 0 · Answer 3 · answered Jan 16 '15 at 11:21

0

Use :before pseudo element for left part, line height is not going to work with bottom-border. I updated your fiddle:

http://jsfiddle.net/wfkd6Lbn/8/

answered Jan 16 '15 at 11:21

lima_fil

1,744
27
34

score 0 · Answer 4 · answered Jan 16 '15 at 11:26

.area { 
  width: 300px; 
  height: 300px;  
  position: relative;
}

.bubble { 
  position: absolute; 
  left: 93px; 
  top: 21px; 
  width: 135px; 
  height: 84px; 
  display: table; 
}

.bubble p {
  display: table-cell; 
  vertical-align: middle; 
  text-align: center;

<div class="area">
      <div class="bubble">
          <p>To look best, text should really be centered inside this bubble both vertically and horizontally.</p>
      </div>
</div>

How to center Text vertically?

4 Answers4