カスタムLIのsvg画像を整列する

Question

次のHTML（bootply here）が与えられています。 SCSSで

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

次のように：

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テキストの中央に並ぶように入手できますか。
私は多くのパディングと余白オプションを試しましたが、画像は常にテキストよりも高いです。

Answer 1

デフォルト値としてvertical-align: baselineを取ります。

追加してください：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>

Answer 2

vertical-align: middle;を疑似要素に設定する必要があります。

インライン要素あなたが他の要素との真ん中にあるアイコンを整列させる必要がある

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>