How to center a large character over a smaller container? - html

Question

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>

Answer 1

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:
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.
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).
Use flex properties to horizontally center the content. (If you ever need vertical centering, add align-items: center.)

Answer 2

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.

Answer 3

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>