对齐自定义LI svg图像

给定以下html（bootply here）。对齐自定义LI svg图像

<div class="risk"> 
    <ul> 
    <li><span>Aggressive</span>Lorem ipsum dolor ...</li> 
    <li><span>Growth</span>doloremque autem...</li> 
    </ul> 
</div>

随着SCSS如下：

ul { 
    list-style: none; 
    margin: 0; 
    padding: 0; 
    li { 
     margin: 0; 
     padding: 0 0 0 40px; 
     span { 
      &:before { 
       content: url('data:image/svg+xml;utf8,<svg width="24px" height="24px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><rect x="1" y="1" rx="6" ry="6" width="22" height="22" style="fill:transparent;stroke:black;stroke-width:1.1;opacity:0.9" ></rect></svg>'); 
       display: inline-block; 
       width: 30px; 
       margin-left: -30px; 
      } 
      font-weight: bold; 
      margin-right: 2rem; 
     } 
    } 
}

我怎么了SVG与LI文本中间排队。
我已经尝试了大量的填充和边距选项，但图像始终比文本要高。

来源

2017-04-06 Jim

你需要在中间与其他元素排列的图标。

只需添加：vertical-align：middle;

CSS代码

div.risk ul { 
 
    list-style: none; 
 
    margin: 0; 
 
    padding: 0; } 
 
    div.risk ul li { 
 
     margin: 0; 
 
     padding: 0 0 0 40px; } 
 
     div.risk ul li span { 
 
     font-weight: bold; 
 
     margin-right: 2rem; } 
 
     div.risk ul li span:before { 
 
      content: url('data:image/svg+xml;utf8,<svg width="24px" height="24px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><rect x="1" y="1" rx="6" ry="6" width="22" height="22" style="fill:transparent;stroke:black;stroke-width:1.1;opacity:0.9" ></rect></svg>'); 
 
      display: inline-block; 
 
    \t \t \t vertical-align: middle; /* This line */ 
 
      width: 30px; 
 
      margin-left: -30px; }

<div class="risk"> 
 
\t <ul> 
 
    <li><span>Aggressive</span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit quibusdam tempora numquam, officiis cupiditate libero maxime explicabo accusantium, deserunt voluptatem a doloremque autem laborum eligendi magnam recusandae ab, perferendis impedit.</li> 
 
    <li><span>Growth</span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit quibusdam tempora numquam, officiis cupiditate libero maxime explicabo accusantium, deserunt voluptatem a doloremque autem laborum eligendi magnam recusandae ab, perferendis impedit.</li> 
 
    </ul> 
 
</div>

来源

2017-04-06 11:00:06

您需要将vertical-align: middle;设置为伪元素。

内联元素需要vertical-align: baseline为默认值

ul { 
 
    list-style: none; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
li { 
 
    margin: 0; 
 
    padding: 0 0 0 40px; 
 
} 
 

 
span { 
 
    font-weight: bold; 
 
    margin-right: 2rem; 
 
} 
 

 
span:before { 
 
    content: url('data:image/svg+xml;utf8,<svg width="24px" height="24px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><rect x="1" y="1" rx="6" ry="6" width="22" height="22" style="fill:transparent;stroke:black;stroke-width:1.1;opacity:0.9" ></rect></svg>'); 
 
    display: inline-block; 
 
    width: 30px; 
 
    margin-left: -30px; 
 
    vertical-align: middle; 
 
}

<div class="risk"> 
 
    <ul> 
 
    <li><span>Aggressive</span>Lorem ipsum dolor ...</li> 
 
    <li><span>Growth</span>doloremque autem...</li> 
 
    </ul> 
 
</div>

来源

2017-04-06 10:52:15

对齐自定义LI svg图像

回答

相关问题