如何将比容器大的文本集中

Question

这是代码：

#add_cal_in {
    width: 30px;
    height: 30px;
    line-height: 30px;
    font-size: 50px;
    text-align: center;
    background-color: #f38268;
    display: inline-block;
    vertical-align: top;
    cursor: pointer;
    color: #fff;
    margin-left: 5px;
}

<span id="add_cal_in">M</span>

如果您运行此代码，则可以看到文本" M"不是我想象的。如果将font-size更改为30px或更小，则可以正常工作。那是怎么发生的？我该如何将" M"置于中间？

另一件事是，尽管" M"不是水平居中的，但似乎" M"仍以垂直为中心。但是，如果我将" M"更改为" "，则不会在水平和垂直方面将其居中。顺便说一句，它在Chrome 53中完美工作，我发现在升级铬后。

对不起英语，希望您能理解我的意思。

Answer 1

您可以使用Flexbox，如果设置align-items: center和justify-content: center，它将始终在SPAN中中心文本。

span {
  margin: 20px;
  width: 30px;
  height: 30px;
  font-size: 50px;
  text-align: center;
  background-color: #f38268;
  display: inline-block;
  cursor: pointer;
  color: green;
  display: flex;
  align-items: center;
  justify-content: center;
}

<span>M</span>
<span>+</span>
<span>A</span>

另一个选项是使用伪元素添加字母并使用position: absolute和transform: translate将其集中。

span {
  margin: 20px;
  width: 30px;
  height: 30px;
  font-size: 50px;
  text-align: center;
  background-color: #f38268;
  display: inline-block;
  cursor: pointer;
  position: relative;
}
span:after {
  position: absolute;
  left: 50%;
  top: 50%;
  content: 'M';
  color: green;
  transform: translate(-50%, -50%);
}

<span></span>

Answer 2

我认为只需用100％更改宽度和高度..

#add_cal_in {
    width: 100%;
    height: 100%;
    line-height: 30px;
    font-size: 50px;
    text-align: center;
    background-color: #f38268;
    display: inline-block;
    vertical-align: top;
    cursor: pointer;
    color: #fff;
    margin-left: 5px;
}

<span id="add_cal_in">M</span>

Answer 3

您可以通过脚本水平中心字母：

var marginLeft = ($('#add_cal_in').width() - $('.letter').width())/2;
$('.letter').css('margin-left', marginLeft+'px');

#add_cal_in {
    width: 30px;
    height: 30px;
    line-height: 30px;
    font-size: 50px;
    text-align: center;
    background-color: #f38268;
    display: inline-block;
    vertical-align: top;
    cursor: pointer;
    color: #fff;
    margin-left: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<span id="add_cal_in"><span class="letter">M</span></span>

Answer 4

您的意思是这样吗？

#add_cal_in {
    width: 30px;
    height: 30px;
    line-height: 30px;
    font-size: 50px;
    text-align: center;
    background-color: #f38268;
    display: inline;
    vertical-align: top;
    cursor: pointer;
    color: #fff;
    margin-left: 5px;
}

<span id="add_cal_in">M</span>