How can I center text in a container that's too small?

Question

I want to use CSS to create a "+" button. The following nearly works:

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

with

.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;
}

This renders in Firefox as:

Nearly there. I'd just like it to still center the plus sign in the case that the containing span is too narrow, so that it spills over both sides symmetrically.

Is that possible?

I'm sorry but don't try to reinvent the wheel, use fontawesome. — T04435, May 13 '16 at 16:28

Paulie_D · Accepted Answer · 2016-05-13T14:28:25.893

4

Flexbox actually works perfectly here.

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>

edited May 13 '16 at 14:28

answered May 13 '16 at 14:10

Paulie_D

107,962
13
142
161

Note, this may not work when applied directly to ` – Ben Nov 02 '18 at 12:57

score 0 · Answer 2 · answered May 13 '16 at 14:07

I do not know if this is what you are refering to but you can wrap your + inside another span and then use 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>

score 0 · Answer 3 · answered May 13 '16 at 14:21

I'm Not sure how you're planning to change icon sizes for each Plus button. But here is a try.

Using the Same Fiddle

Try it.

.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;
}

The HTML

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

With this. At-least your .b icon with small font-size will be centered.

score 0 · Answer 4 · answered Aug 26 '20 at 02:43

0

I believe the solution you are looking for is:

<div style=“position: relative;”>
  <span style=“position: absolute; left: 50%; transform: translate(-50%,0)”>
     blah
   </span>
 </div>

answered Aug 26 '20 at 02:43

Gregory Magarshak

1,883
2
25
35

How can I center text in a container that's too small?

4 Answers4