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

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

css

Css 径向渐变中心与跨度中心不匹配,css,Css,我将径向梯度从顶部以200像素为中心，从左侧以200像素为中心。和我用字母a做的一样。但在我看来，为什么会这样 <body> <div class="box"><span>a</span></div> </body> 您需要在跨度上使用transform:translate-50%，-50%将其对齐到中心。这样你就不用担心字体大小了 .盒子{ 位置：相对位置；宽度：300px；高度：300px；背景：-w

我将径向梯度从顶部以200像素为中心，从左侧以200像素为中心。和我用字母a做的一样。但在我看来，为什么会这样

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

您需要在跨度上使用transform:translate-50%，-50%将其对齐到中心。这样你就不用担心字体大小了

.盒子{ 位置：相对位置；宽度：300px；高度：300px；背景：-webkit gradientradial，2002002020030，来自FCFC，toCF0C13； } 跨度{ 位置：绝对位置；左：200px；顶部：200px；字体大小：16px；转化：转化-50%，-50%； } A.

在“渐变定义”中，您可以确定渐变背景的中心位置。在跨度的左/顶属性中，设置该跨度的左上角

这意味着渐变中心与跨度的左上角位于同一位置，您可以在上看到它

你需要移动一下跨度，我给你准备另一把小提琴：

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

你说得对

问题: 您看到的问题是，跨度从X=200px和Y=200px开始。而径向渐变将其中心设置在该点。这是因为默认字体标志符号为升序和降序留下了空间。对于您拥有的每个字体系列，这都会发生变化

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

.盒子{ 位置：相对位置；宽度：300px；高度：300px；背景：-webkit-radial-gradient200px 200px，圆形，FCFC 10%，cf0c13 15%，cf0c13 100%； } 跨度{ 位置：绝对位置；左：200px；顶：200px；边框：1px纯蓝色； } A.

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