Как можно центрировать текст в контейнере, который слишком мал?

Question

Я хочу использовать CSS для создания кнопки «+». Следующий nearly works:

<p><span class="a">+</span>Foo</p> 
<p><span class="b">+</span>Foo</p> 

с

.a 
{ 
    width:3ex; 
    height:3ex; 
    line-height: 3ex; 
} 

.b 
{ 
    width: 1ex; 
    height: 1ex; 
    line-height: 1ex; 
} 

.a, .b 
{ 
    display:inline-block; 
    /*display:table-cell;*/ 
    background:red; 
    text-align:center; 
    vertical-align:middle; 
    margin: 0 1ex; 
} 

Это делает в Firefox, как:

Почти там. Я бы просто хотел, чтобы он все еще центрировал знак плюса в том случае, если содержащий пролет слишком узкий, так что он разливает по сторонам симметрично.

Возможно ли это?

Answer 1

Flexbox на самом деле отлично работает здесь.

span { 
 
    height: 32px; 
 
    width: 32px; 
 
    font-size: 96px; 
 
    border: 1px solid grey; /* demo only */ 
 
    display: inline-block; 
 
    margin:32px; /* demo only */ 
 
} 
 
span.flex { 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
}

<span class="flex">+</span>

Answer 2

Я не знаю, если это то, о чем вы говорите, но вы можете обернуть свой + внутри другого span, а затем использовать margin: -50%.

.a 
 
{ 
 
    width:3ex; 
 
    height:3ex; 
 
    line-height: 3ex; 
 
} 
 

 
.b 
 
{ 
 
    width: 1ex; 
 
    height: 1ex; 
 
    line-height: 1ex; 
 
} 
 

 
.a, .b 
 
{ 
 
    display:inline-block; 
 
    /*display:table-cell;*/ 
 
    background:red; 
 
    text-align:center; 
 
    vertical-align:middle; 
 
    margin: 0 1ex; 
 
} 
 

 
.text{ 
 
    margin: -50%; 
 
}

<p><span class="a">+</span>Foo</p> 
 
<p><span class="b"><span class="text">+</span></span>Foo</p>

Answer 3

Я не уверен, как вы планируете изменить размеры иконок для каждой кнопки Plus. Но вот попытка.

Использование той же самой скрипки

Попробуйте.

.a 
{ 
    width:3ex; 
    height:3ex; 
    line-height: 3ex; 
} 

.b 
{ 
    width: 1ex; 
    height: 1ex; 
    line-height: 1ex; 

} 
.a:after, .b:after { 
    content: '+'; 
    text-align: center; 
    font-size: 0.8em; 
    display: inline-block; 
    vertical-align: top; 
} 

.a, .b 
{ 
    display:inline-block; 
    background:red; 
    text-align:center; 
    vertical-align:middle; 
    margin: 0 1ex; 
} 

HTML-

<p><span class="a"></span>Foo</p> 
<p><span class="b"></span>Foo</p> 

С этим. По крайней мере, ваш значок .b с небольшим размером шрифта будет центрирован.