Question

给出以下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文本的中间对齐我尝试了大量的填充和边距选项，但图像总是高于文本。

Answer 1

您需要将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>

Answer 2

您需要将中间的图标与其他元素对齐。

添加：vertical-align：middle;

Css代码

＆＃13;

 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;

对齐自定义LI svg图像

2 个答案: