小编And*_*rew的帖子

我需要在SVG对象的标签内水平居中文本,而不需要定义x坐标.我正在尝试在CSS中找到text-align:center的替代方法.我已经使用了text-anchor:middle但它不起作用.我有这个代码

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="0%" y2="100%">
 <stop offset="0" stop-color="#FFE89C" stop-opacity="1"/>
 <stop offset="0.2" stop-color="#FFE192" stop-opacity="1"/>
 <stop offset="0.4" stop-color="#ffd47a" stop-opacity="1"/>
 <stop offset="0.6" stop-color="#ffc967" stop-opacity="1"/>
 <stop offset="0.8" stop-color="#febd52" stop-opacity="1"/>
 <stop offset="1" stop-color="#fdba4c" stop-opacity="1"/>
</linearGradient>
</defs>
<text fill="url(#grad1)" x="73" y="50">50</text>
</svg>

我想实现如图所示的相同滑块。我的中间物品总是比其他物品大。我需要对活动幻灯片和放置在两侧的幻灯片使用不同尺寸的图像。所以我想使用这样的代码：

li {
  width: $small-item-width;
  height: $small-item-height;
  &.active {
    width: $big-item-width;
    height: $big-item-height;
  }
  position: relative;
  .item {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
   }
 }

<ul>
<li>
<div class="big-item"></div>
<div class="small-item"></div>
</li> 
<li class="active">
<div class="item big"></div>
<div class="item small"></div>
</li>   
</ul>  

我在互联网上找到的唯一解决方案是带有中心模式的Slick Slider。但这里使用的标记不适合我的情况，因为只有一个孩子可以滑动。

 <div class="your-class">
  <div>your content</div>
  <div>your content</div>
  <div>your content</div>
</div>

所以我想使用任何插件并向 li 添加类“active”，然后幻灯片处于活动状态。谁能知道怎么做这个吗？