Question

我有想要水平和垂直居中的图标。

请参阅下面的codepen和摘要：

div {
  border: 1px solid black;
}
.icon-placeholder {
  height: 34px;
  overflow: hidden;
  width: 34px;
}
.icon {
  color: hotpink;
  font-size: 400%;
}
.icon::before {
  content: '+';
}

<div class="icon-placeholder">
  <span class="icon"></span>
</div>

无论.icon的字体大小如何，我该怎么做呢。

我尝试了transform，position: absolute，display: table没有运气。我不能使用flex。

Answer 1

您可以使用transform和absolute定位

来实现这一目标

div {
  border: 1px solid black;
  margin: 10px;
}

.icon-placeholder {
  height: 34px;
  overflow: hidden;
  width: 34px;
  position: relative;
}

.icon {
  color: hotpink;
  font-size: 400%;
  margin-top: -10%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  left: 50%;  
}
.icon::before {
  content: '+';
}

.plus-symbol{
  font-size: 400%;
  outline: dotted 1px red;
  color: hotpink;
}

.left, .right{
  width: 45%;
  padding: 20px;
  box-sizing: border-box;
}

.left{
  float: left;
}
.right{
  float: right;
}

.custom-plus-icon, .custom-plus-icon:before{
  position: absolute;
  width: 10%;
  border-radius: 1px;
  background-color: hotpink;
  height: 80%;
  margin: auto;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}
.custom-plus-icon:before{
  content: '';
  width: 100%;
  height: 100%;
  transform: rotate(90deg);
}

<div class="left">
  <h3>Plus symbol using font</h3>
  <span class="plus-symbol">+</span>

  <br/>
  <br/>

  <label>Font-size : 400%</label>
  <div class="icon-placeholder">
    <span class="icon"></span>
  </div>
  <label>Font-size : 300%</label>
  <div class="icon-placeholder">
    <span class="icon" style="font-size: 300%;"></span>
  </div>
  <label>Font-size : 200%</label>
  <div class="icon-placeholder">
    <span class="icon" style="font-size: 200%;"></span>
  </div>
  <label>Font-size : 100%</label>
  <div class="icon-placeholder">
    <span class="icon" style="font-size: 100%;"></span>
  </div>
</div>
<div class="left">
  <h3>Plus symbol using pseudo element</h3>
  <div class="icon-placeholder">
    <span class="custom-plus-icon"></span>
  </div>
</div>

Answer 2

但值得注意的是，+不一定在第一位置居中，具体取决于字体。

div {
  border: 1px solid black;
}

.icon-placeholder {
  height: 34px;
  overflow: hidden;
  position: relative;
  width: 34px;
}

.icon {
  color: hotpink;
  font-size: 400%;
}

.icon::before {
  content: '0';
  display: inline-block;
  position: absolute;
  right: 50%;
  bottom: 50%;
  transform: translate(50%, 50%);
}

<div class="icon-placeholder">
  <span class="icon"></span>
</div>

如何将大于其容器的字符居中

2 个答案: