如何将文本置于容量过小的文档中？

Question

我想用CSS创建一个＆＃34; +＆＃34;按钮。以下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实际上在这里完美运作。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

我不知道这是否是您所指的内容，但您可以将+包裹在另一个span内，然后使用margin: -50%。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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图标将居中。

Answer 4

我相信您正在寻找的解决方案是：

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