Question

我将径向渐变中心从顶部开始200像素，从左侧开始200像素。我用跨度女巫做的同样包含字母＆＃34; a＆＃34;。但正如我所见，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;
}

enter image description here

Answer 1

你说得对。

问题：

您看到的问题是，span 在X = 200px和Y = 200px启动 。径向渐变在此时设置 center 。这是因为默认的字体字形为上升和下降留下了空间。这将改变您拥有的每个字体系列。

这在此代码段中可见，请参阅以蓝色标记的范围：

.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>

解决方案：

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

像这样：-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%)技巧将其负面移动一半。

Answer 2

您需要使用transform: translate(-50%, -50%)上的span将其与中心对齐。这样您就不必担心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 3

在渐变定义中，您可以告诉渐变背景的中心应该在哪里。在span的左/顶部属性中，您可以设置此跨度的左上角。

这意味着渐变中心与跨度的左上角位于同一位置（您可以在http://jsfiddle.net/cyzczvd1/4/上看到）。

你需要移动一点点，我准备你另一个小提琴：

.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/

径向梯度中心与量程中心不匹配

3 个答案:

问题：

解决方案：