径向渐变中心与跨度中心不匹配

Question

我将径向渐变从顶部居中 200 像素，从左侧居中 200 像素。我对 span 所做的同样包含字母 "a"。但正如我所见，gradient center doesn't mach the span center. 为什么会这样？

<body>
    <div class="box"><span>a</span></div>
</body>

CSS

.box {
position:relative;
width: 300px;
height: 300px;
background: -webkit-gradient(radial, 200 200, 20, 200 200, 30,  from(#FCFCFC), to(#CF0C13));
}

span {
position: absolute;
left: 200px;
top: 200px;
}

Answer 1

您需要在 span 上使用 transform: translate(-50%, -50%) 将其居中对齐。这样你就不用担心 font-size.

.box {
  position: relative;
  width: 300px;
  height: 300px;
  background: -webkit-gradient(radial, 200 200, 20, 200 200, 30,  from(#FCFCFC), to(#CF0C13));
}
span {
  position: absolute;
  left: 200px;
  top: 200px;
  font-size: 16px;
  transform: translate(-50%, -50%);
}

<div class="box"><span>a</span>
</div>

对于 radial-gradient，您应该使用以下语法。

background: -webkit-radial-gradient(200px 200px, #FCFCFC 20px, #CF0C13 30px);
background: -moz-radial-gradient(200px 200px, #FCFCFC 20px, #CF0C13 30px);
background: radial-gradient(200px 200px, #FCFCFC 20px, #CF0C13 30px);

Answer 2

在渐变定义中，您告诉渐变背景的 center 应该在哪里。在跨度的 left/top 属性中，您设置了此跨度的左上角。

表示渐变中心与span的左上角在同一个位置（在http://jsfiddle.net/cyzczvd1/4/上可以看到）。

你需要稍微移动一下span，我再给你准备一个fiddle:

.box {
    position:relative;
    width: 300px;
    height: 300px;
    background: -webkit-gradient(radial, 200 200, 20, 200 200, 30,  from(#FCFCFC), to(#CF0C13));
}

span {
    position: absolute;
    left: 200px;
    top: 200px;
    /* 
       added lines below, background to see element borders, size, centering of text and 
       move back - you can set directly left: 180px; top: 180px; and avoid this negative margins 
    */
    background: red;
    display: block; 
    width: 40px; 
    height: 40px;
    margin: -20px 0 0 -20px;
    text-align: center;
    line-height: 40px;
}

http://jsfiddle.net/cyzczvd1/3/

Answer 3

你猜对了。

问题：

您看到的问题是因为 span 在 X = 200px 和 [=16] 处开始 =].而径向渐变在该点设置其 center。这是因为默认字体标志符号 space 用于上升和下降。对于您拥有的每个字体系列，这都会发生变化。

在此代码段中可见，请参阅以蓝色标记的跨度：

.box {
    position: relative;
    width: 300px; height: 300px;
    background: -webkit-radial-gradient(200px 200px, circle, #fcfcfc 10%, #cf0c13 15%, #cf0c13 100%);
}
    
span {
    position: absolute; 
    left: 200px; top: 200px;
    border: 1px solid blue;
}

 <div class="box"><span>a</span></div>

解决方案：

只需将径向原点在 Y 轴上向下移动 10px。

像这样：-webkit-radial-gradient(200px 210px....

片段:

.box {
    position: relative;
    width: 300px; height: 300px;
    background: -webkit-radial-gradient(200px 210px, circle, #fcfcfc 10%, #cf0c13 15%, #cf0c13 100%);
}
    
span {
    position: absolute; 
    left: 200px; top: 200px;
}

 <div class="box"><span>a</span></div>

或者，如果您的 span 内容要改变，那么最好使用 translate(-50%, -50%) 技巧将其负向移动其大小的一半。

径向渐变中心与跨度中心不匹配

Radial gradient center doesn't match span center

css

问题：

解决方案：