给出以下html(bootply here)。
<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文本的中间对齐 我尝试了大量的填充和边距选项,但图像总是高于文本。
答案 0 :(得分:3)
您需要将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>
答案 1 :(得分:1)
您需要将中间的图标与其他元素对齐。
添加: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;
vertical-align: middle; /* This line */
width: 30px;
margin-left: -30px; }
&#13;
<div class="risk">
<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>
&#13;