Center text vertically

[RachelR]

Hi all

I have a jsfiddle here - https://jsfiddle.net/uvzup6ww/2/

Simple question - how can I center the text vertically as well as horizontally

[ronpat]

RachelR, that’s a tooltip. Where’s the text that you want vertically and horizontally centered? Can I assume that you mean centered in the middle of the viewport? If not, in the middle of what?

[PaulOB]

If you are talking about the letter ‘i’ in the tooltip then you can move that to the centre using line-height to match the height (this assumes that you are not wanting text that wraps to a new line).

.tooltip{
  border: 1px solid red;
  border-radius: 20px;
  color: red;
  display: inline-block;
  height: 30px;
  line-height:30px;
  text-align: center;
  text-decoration: none;
  width: 30px;
}

[Ziltch]

@RachelR Hey there, see also:

.tooltip {
border: 1px solid red;
border-radius: 50%;
color: red;
text-align: center;
text-decoration: none;
margin: 0 auto;
padding: 5px 12px;
}

[Erik_J]

Or same but different fitting any size:

.tooltip{
  border: 1px solid red;
  border-radius: 50%;
  color: red;
  height: 30px;
  text-align: center;
  text-decoration: none;
  width: 30px;
  display: table-cell;
  vertical-align: middle;
}