将SVG与sass中的div中心对齐

我无法将我的SVG与圆圈中心对齐，应该如何去做呢？将SVG与sass中的div中心对齐

我试过使用imgs代替svgs，但质量受到很大影响。此外，我已经尝试了堆栈溢出的答案，并尝试使用解决方案，但无济于事。

我有这样的：

希望得到以下

HTML

<div class="topics-container"> 
<div class="row1"> 
     <div class="topic"> 
      <div class="icon-cybersecurity"><svg>BLAHBLAHBLAH</svg></div> 
      <div class="topic-name">Cybersecurity and Social Engineering</div> 
     </div> 

     <div class="topic"> 
      <div class="icon-vr"><svg>BLAHBLAHBLAH</svg></div> 
      <div class="topic-name">Virtual Reality</div> 
     </div> 
     . 
     . 
     . 

</div> 
<div class="row2"> 
     <div class="topic"> 
     . 
     . 
     . 
     </div> 
     . 
     . 
     . 
</div> 
</div>

SASS：

.row1 
    background: blue 
    +display(flex) 
    +align-items(center) 


.row2 
    background: red 
    +display(flex) 
    +align-items(center) 

.topic 
    display: block 
    margin: auto 

    [class^="icon-"] 
    +size(100px) 
    background: green 
    border-radius: 50%

来源

2016-08-21 Stanford

我们需要编写CSS，但离手，我说你需要的弯曲特性延伸到图标的div ...因为他们不是遗传。 –

使用http://fontastic.me/创建svg图标集的字体，并将其用于您的Web项目。此外，您还可以从Illustrator导出图标 - http://fontastic.me/faq –

感谢您的帮助，我想出了一个解决方案中，SVG文件没有居中对齐，所以我不得不这样做，在插画。

步骤如下：

创建一个新的Illustrator文件，100像素X 100像素
拖着SVG到空白
压变换，设置x和y，以50像素

4.保存为.SVG

连接在.SVG到代码

重复，瞧

结果：我用

代码： SASS：

（与问题相同）

<div class="topics-container"> 
<div class="row1"> 
     <div class="topic"> 
      <div class="icon-cybersecurity"><svg>BLAHBLAHBLAH</svg></div> 
      <div class="topic-name">Cybersecurity and Social Engineering</div> 
     </div> 

     <div class="topic"> 
      <div class="icon-vr"><svg>BLAHBLAHBLAH</svg></div> 
      <div class="topic-name">Virtual Reality</div> 
     </div> 
     . 
     . 
     . 

</div> 
<div class="row2"> 
     <div class="topic"> 
     . 
     . 
     . 
     </div> 
     . 
     . 
     . 
</div> 
</div>

我的SVG文件：

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
     viewBox="0 0 100 100" style="enable-background:new 0 0 100 100;" xml:space="preserve"> 
<path d="M68.9,25c0,0-0.1,0-0.1,0c-0.5,0.1-0.8,0.5-0.8,1c0,1.9-0.9,3-2.5,4s-4,1.9-6.4,2.9s-4.9,2.3-6.8,4.4c-1.8,1.9-3,4.5-3.2,8 
    c-1.8-0.1-2.9-0.7-4.1-1.4c-1.5-0.8-3.2-1.7-6-1.7c-1.7,0-3.3,1-4.9,2.5s-3.1,3.5-4.4,5.9C27,55.5,25,61.5,25,66.8 
    c0,2.2,0.5,4.2,1.6,5.7c1,1.5,2.6,2.5,4.4,2.5c4.8,0,8.3-2.5,11.2-4.8s5.2-4.4,7.8-4.4s4.8,2,7.8,4.4C60.7,72.5,64.2,75,69,75 
    c1.8,0,3.4-1,4.4-2.5c1-1.5,1.6-3.5,1.6-5.7c0-5.4-2-11.3-4.7-16.1c-1.3-2.4-2.8-4.4-4.4-5.9s-3.2-2.5-4.9-2.5c-2.8,0-4.5,0.9-6,1.7 
    c-1.2,0.6-2.2,1.2-3.9,1.3c0.2-3,1.2-5,2.6-6.6c1.6-1.7,3.8-2.9,6.2-3.9c2.3-1,4.7-1.8,6.7-3.1s3.4-3.1,3.4-5.8c0-0.6-0.4-1-1-1.1 
    C69,25,68.9,25,68.9,25z M39,44.4c2.4,0,3.6,0.6,5,1.4s3.2,1.7,6,1.7c0.1,0,0.2,0,0.3,0c0,0,0,0,0,0c2.6-0.1,4.3-0.9,5.7-1.7 
    c1.5-0.8,2.6-1.4,5-1.4c0.9,0,2.2,0.6,3.5,1.9c1.4,1.3,2.8,3.2,4,5.4c2.5,4.5,4.4,10.2,4.4,15c0,1.9-0.5,3.5-1.2,4.5 
    C71.1,72.4,70.2,73,69,73c-4.2,0-7.2-2.1-10-4.4c-2.8-2.3-5.5-4.8-9-4.8s-6.2,2.5-9,4.8S35.2,73,31,73c-1.2,0-2.1-0.5-2.8-1.6 
    c-0.7-1.1-1.2-2.7-1.2-4.5c0-4.8,1.9-10.6,4.4-15c1.3-2.2,2.7-4.1,4-5.4C36.8,45,38.1,44.4,39,44.4z M62,51.5c-1.1,0-2,0.9-2,2 
    s0.9,2,2,2s2-0.9,2-2S63.1,51.5,62,51.5z M37,52.6v3.1h-3v3.1h3v3.1h3v-3.1h3v-3.1h-3v-3.1H37z M58,55.6c-1.1,0-2,0.9-2,2s0.9,2,2,2 
    s2-0.9,2-2S59.1,55.6,58,55.6z M66,55.6c-1.1,0-2,0.9-2,2s0.9,2,2,2s2-0.9,2-2S67.1,55.6,66,55.6z M62,59.7c-1.1,0-2,0.9-2,2 
    c0,1.1,0.9,2,2,2s2-0.9,2-2C64,60.6,63.1,59.7,62,59.7z"/> 
</svg>

来源

2016-08-24 06:49:45 Stanford

这可能是酸味奇数SASS语法您需要将flex属性扩展到图标div ......因为它们没有被继承。

在原始CSS

.icon { 
 
    width: 100px; 
 
    height: 100px; 
 
    background: #0f0; 
 
    border-radius: 50%; 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
} 
 
.topic { 
 
    display: flex; 
 
    flex-direction: column; 
 
    align-items: center; 
 
    justify-content: center; 
 
} 
 
.row { 
 
    display: flex; 
 
    justify-content: space-around; 
 
    padding: 1em; 
 
}

<div class="row"> 
 
    <div class="topic"> 
 
    <div class="icon"> 
 
     <img src="http://www.fillmurray.com/50/50" alt="" /> 
 
    </div> 
 
    <div class="name">Bill Murray</div> 
 
    </div> 
 
    <div class="topic"> 
 
    <div class="icon"> 
 
     <img src="http://www.fillmurray.com/50/50" alt="" /> 
 
    </div> 
 
    <div class="name">Bill Murray</div> 
 
    </div> 
 
    <div class="topic"> 
 
    <div class="icon"> 
 
     <img src="http://www.fillmurray.com/50/50" alt="" /> 
 
    </div> 
 
    <div class="name">Bill Murray</div> 
 
    </div> 
 
</div>

来源

2016-08-21 12:14:20

将SVG与sass中的div中心对齐

回答

相关问题