How to center a span vertically inside a h1 background

Question

I have a span inside a h1 and I would like to center it vertically in the h1 background.

h1 {
  background-color: green;
}
span {
    font-size: 8.5px;
    color: #fff;
    display: inline-block;
    width: 10px;
    height: 15px;
    padding-left: 5px;
    border: 1px solid #fff;
    border-radius: 50%;
    margin-left: 10px;
    cursor: pointer;
}

<h1>Title <span>i</span></h1>

Add `vertical-align: middle;` and `margin-top: -5px;` to your `span` — UfguFugullu, Jun 02 '17 at 09:53

Pete · Answer 1 · 2017-06-02T09:54:46.820

Just add vertical-align:middle; to it's styles:

h1 {
  background-color: green;
}
span {
    font-size: 8.5px;
    color: #fff;
    display: inline-block;
    width: 10px;
    height: 15px;
    padding-left: 5px;
    border: 1px solid #fff;
    border-radius: 50%;
    margin-left: 10px;
    cursor: pointer;
    vertical-align:middle;
}

<h1>Title <span>i</span></h1>

If that isn't central enough (it can be based on you font size), you can use flex for true centering - the following also centres the i in the circle:

h1 {
  background-color: green;
  
  /*add this*/
  display:flex;
  width:100%;
}
span {
    font-size: 8.5px;
    color: #fff;
    width: 15px;
    height: 15px;
    border: 1px solid #fff;
    border-radius: 50%;
    margin-left: 10px;
    cursor: pointer;
    
    /*use this for vertical centering*/
    align-self:center;
    
    /*use this to center the i*/
    display: inline-flex;
    justify-content:center;
    align-items:center;
}

<h1>Title <span>i</span></h1>

LKG · Answer 2 · 2017-06-02T10:00:42.167

You have to use equal height and width property with border-radius to get proper circle and remove padding-left

You can use flex for it and update css as i posted below

h1 {
  background-color: green;
  vertical-align: middle;
}

span {
  font-size: 8.5px;
  color: #fff;
  display: inline-block;
  width: 15px;
  height: 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #fff;
  border-radius: 50%;
  margin-left: 10px;
  cursor: pointer;
  vertical-align: middle;
}

<h1>Title <span>i</span></h1>

score 0 · Answer 3 · answered Jun 02 '17 at 09:52

h1 {
  background-color: green;
  position:relative;
}
span {
    font-size: 8.5px;
    color: #fff;
    display: inline-block;
    width: 10px;
    height: 15px;
    padding-left: 5px;
    border: 1px solid #fff;
    border-radius: 50%;
    margin-left: 10px;
    cursor: pointer;
    position:absolute;
    top:50%;
    transform:translate(0,-50%);
}

<h1>Title <span>i</span></h1>

How to center a span vertically inside a h1 background

3 Answers3