那些遇到过的问题

相关疑难解决方法(0)

如何使用CSS垂直居中文本？

我有一个包含文本的div元素,我想将此div的内容垂直居中对齐.

这是我的div风格:

#box {
  height: 170px;
  width: 270px;
  background: #000;
  font-size: 48px;
  color: #FFF;
  text-align: center;
}
Run Code Online (Sandbox Code Playgroud) 
<div id="box">
  Lorem ipsum dolor sit
</div>
Run Code Online (Sandbox Code Playgroud)

做这个的最好方式是什么？

html css vertical-alignment

Ira*_*ili
2019 02-27
2190
推荐指数
19
解决办法
314万
查看次数

如何在CSS中垂直对齐所有文本？

这个问题似乎是某些字母一样g，y，q等有一个尾巴向下倾斜，不允许垂直居中。这是展示问题的图片一种。

绿色框中的字符基本上是完美的，因为它们没有向下的尾巴。红色框中的内容演示了该问题。

我希望所有字符都垂直居中对齐。在图像中，尾巴向下的字符未垂直居中。这可以纠正吗？

这是充分说明问题的小提琴。

.avatar {
    border-radius: 50%;
    display: inline-block;
    text-align: center;
    width: 125px;
    height: 125px;
    font-size: 60px;
    background-color: rgb(81, 75, 93);
    font-family: "Segoe UI";
    margin-bottom: 10px;
}

.character {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    line-height: 100%;
    color: #fff;
}
Run Code Online (Sandbox Code Playgroud) 
<div class="avatar">
  <div class="character">W</div>
</div>

<div class="avatar">
  <div class="character">y</div>
</div>
Run Code Online (Sandbox Code Playgroud)

html javascript css vertical-alignment

Chr*_*Bag
2019 11-19
10
推荐指数
1
解决办法
213
查看次数

标签 统计

css ×2

html ×2

vertical-alignment ×2

javascript ×1