CODEWITHSUNDEEP
htmlcsscentering
jochen
jochen

Reputation: 3940

How to center a large character over a smaller container?

I am trying to center a single character, using CSS, in a span which is narrower than the character is.

I have:

<span id="A">X</span><span id="B">Y</span><span id="C">Z</span>

Where all three spans have

display: inline-block;
width: 32px;
height: 32px;

and the Y character in the middle span is larger than the span itself. I want the character centred over the span, overlapping both the X and the Z.

When the Y is smaller than the span, the following rules work for centring:

vertical-align: middle;
text-align: center;

When the Y is wider than the containing box this no longer works: the Y is now shifted to the right. How do I horizontally center Y when it is wider than the containing box?

(I have tried using display: table-cell, suggested in other answers, but this failed because the width: 32px was ignored then.)

Here is what I tried: https://jsfiddle.net/seehuhn/hec3xucu/

span {
  display: inline-block;
  width: 32px;
  height: 32px;
  font: bold 32px/32px courier;
  position: relative;
  vertical-align: middle;
  text-align: center;
}

#A {
  background: red;
}

#B {
  background: #8f8;
  font-size: 92px;
  color: #F99;
  z-index: 1;
}

#C {
  background: blue;
}
<p><span id="A">X</span><span id="B">Y</span><span id="C">Z</span>

Upvotes: 1

Views: 57

Answers (3)

Michael Benjamin
Michael Benjamin

Reputation: 371889

Centering anything is quite simple with CSS flexbox.

p {
  display: flex;               /* 1 */
}

span {
  width: 32px;
  height: 32px;
  text-align: center;
  font: bold 32px/32px courier;
}

#B {
  z-index: 1;
  font-size: 92px;
  color: #F99;
  background: #8f8;
  display: flex;               /* 2 */
  justify-content: center;     /* 3 */
}

#A {
  background: red;
}

#C {
  background: blue;
}
<p>
  <span id="A">X</span>
  <span id="B">Y</span>
  <span id="C">Z</span>
</p>

Notes:

  1. Make the primary container a flex container. Now you can use flex alignment properties on child elements. Plus, a flex container lines up all child elements in row, by default.

  2. Make the #B element a (nested) flex container, so you can apply flex properties to the content (which is technically three levels down in the HTML structure).

  3. Use flex properties to horizontally center the content. (If you ever need vertical centering, add align-items: center.)

Upvotes: 1

Michael Coker
Michael Coker

Reputation: 53709

You could absolutely position the Y over the other 2.

p {
  position: relative;
  display: inline-block;
  background: #8f8;
}

span:not(#B) {
  display: inline-block;
  width: 32px;
  height: 32px;
  font: bold 32px/32px courier;
  position: relative;
  vertical-align: middle;
  text-align: center;
}

#A {
  background: red;
  margin-right: 32px;
}

#B {
  font-size: 92px;
  color: #F99;
  z-index: 1;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#C {
  background: blue;
}
<p><span id="A">X</span><span id="B">Y</span><span id="C">Z</span>

Upvotes: 1

SpaceDogCS
SpaceDogCS

Reputation: 2968

You can do that with flex-box

  span {
    display: flex;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    justify-content: center;
    -webkit-justify-content: center;
    align-items: center;
    -webkit-align-items: center;
    width: 32px;
    height: 32px;
    font: bold 32px/32px courier;
    position: relative;
    float: left;
  }

  #A {
    background: red;
  }

  #B {
    background: #8f8;
    font-size: 92px;
    color: #F99;
    z-index: 1;
  }

  #C {
    background: blue;
  }

If you wanna know more about flex-box click here.

Upvotes: 1

Related Questions