如何在方形div中垂直和水平居中单个字符

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何在方形div中垂直和水平居中单个字符相关的知识,希望对你有一定的参考价值。

我想在一个正方形div中居中一个任意角色。我承认这听起来像一个非常简单的任务,但我尝试过的任何东西都没有用(而且我尝试了很多东西!)1。

为了具体,让我们说div的高度和宽度等于20ex,让我们说单个字符就是所谓的“乘法符号”:✕,漂亮且对称。我希望这个角色位于20ex-by-20ex方形div内,使得两个笔划交叉的点在div内垂直和水平都是死点。

编辑:

我尝试了迄今为止收到的答案,here。由Jedidiah和Ashok Kumar Gupta(第二和第三个div)给出的解决方案产生了非常相似的结果,但是(也许我看到了事情),第三个div中的is只是垂直中心上方的头发。


1我已经了解到,无论布局任务看起来多么令人难以置信的直截了当,我仍然需要花费数小时,数小时才能找到实现它的CSS。

答案

将行高设置为容器的高度应该这样做。

text-align: center;
line-height:20px;
width:20px;
height:20px;

示例:http://codepen.io/Jedidiah/pen/rLfHz

另一答案

使用display:table-cellvertical-align:middletext-align:center。在你的CSS中像这样:

#center{
    width:100px;height:100px;
    display:table-cell;
    text-align:center;
    vertical-align:middle;
}

display:table-cell必须能够使用vertical-align将内容放在div上(不要问我为什么有人决定这样做:))。

看到这个JSFiddle

另一答案

这个问题有点陈旧,但在注意到OP的编辑之后:

我尝试了迄今为止我收到的答案。由Jedidiah和Ashok Kumar Gupta(第二和第三个div)给出的解决方案产生了非常相似的结果,但是(也许我看到了事情),第三个div中的is只是垂直中心上方的头发。

我想张贴,如果你使用×而不是,中心看起来好多了。

https://codepen.io/persianturtle/pen/zPKbRj

另一答案

这个问题有点旧,但是当你搜索“方形css中的单个字母”时,这是第一个答案

所以在2018年你可以做到

#center {

   width: 0;
   height: 0
   display: flex;
   justify-content: center;
   align-items: center;
}
  • justify-content: center水平对齐
  • align-items: center垂直对齐

请注意,无论div的形状如何,它都可以工作,也可以是矩形。

另一答案

回答你的问题:

<div style="width: 20em;height: 20em; background: red;display: table;">
<p style="display: table-cell;text-align: center;vertical-align: middle;">X</p></div>

注:背景:红色;仅用于可视化。

:)

另一答案

使用css只是不可能在div中垂直和水平居中单个字符,因为它取决于浏览器用于渲染字符的字体。

对于那些只想以“X”为中心的人来说,使“X”透明,创建:before和:after伪元素更安全,给它们一个薄的宽度和一个与初始颜色相同的背景“ X“,然后将它们旋转+或 - 45度。

html代码:

<div>X</div>

CSS代码:

* {
  box-sizing: border-box;
}

div {
  font-size: 2em;
  position: relative;
  border: 1px solid black;
  width: 2em;
  height: 2em;
  color: transparent;
}

div:before,
div:after {
  content: "X";
  display: block;
  z-index: 1;
  position: absolute;
  top: 0.25em;
  bottom: 0.25em;
  left: 0.9em;
  right: 0.9em;
  background-color: black;
}

div:before {
  transform: rotate(45deg);
}

div:after {
  transform: rotate(-45deg);
}

这是一个jsfiddle:https://jsfiddle.net/z4pmu7r9/

以上是关于如何在方形div中垂直和水平居中单个字符的主要内容,如果未能解决你的问题,请参考以下文章

前端面试CSS系列——DIV垂直水平居中

怎么使用CSS让图片水平垂直都居中?

如何让DIV水平和垂直居中

如何让DIV里面的DIV水平垂直居中

实现div内容水平垂直居中

如何设置一个div中的文字水平垂直居中