垂直居中列出项目多行ol

Question

我正试图将计数器列表相对于列表元素垂直居中，我可以在px中严格保留边距，但是当更改分辨率时显示错误

这是我的HTML

.why-ol {
  display: block;
  padding: 0 0 0 26px;
  list-style: none;
  overflow: hidden;
  counter-reset: numList;
}

.why-ol li {
  width: 43%;
  margin-right: 44px;
  display: inline-block;
  position: relative;
  margin-bottom: 25px;
  vertical-align: middle;
}

.why-ol li span {
  vertical-align: middle;
}

.why-ol li:before {
  counter-increment: numList;
  content: counter(numList)".";
  float: left;
  left: -26px;
  font: bold 25px sans-serif;
  text-align: center;
  color: #0073d5;
  line-height: 50px;
  width: 50px;
  height: 50px;
  background: #fff;
  -moz-border-radius: 999px;
  border-radius: 999px;
  border: 1px solid #0073d5;
  margin: 50px 20px 50px 0px;
  vertical-align: middle;
}

<ol class="why-ol">
  <li><span class="blue">Lorem ipsum dolor sit amet.</span><br/>
    <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex omnis dolore inventore qui, doloremque atque, architecto quae dolorum obcaecati facere consequatur, ea non ipsum corrupti iste dolorem! Reprehenderit, provident, aut!</span>
  </li>
  <li><span class="blue">Lorem ipsum dolor sit amet.</span><br/>
    <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex omnis dolore inventore qui, doloremque atque, architecto quae dolorum obcaecati facere consequatur, ea non ipsum corrupti iste dolorem! Reprehenderit, provident, aut!</span>
  </li>
  <li><span class="blue">Lorem ipsum dolor sit amet.</span><br/>
    <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex omnis dolore inventore qui, doloremque atque, architecto quae dolorum obcaecati facere consequatur, ea non ipsum corrupti iste dolorem! Reprehenderit, provident, aut!</span>
  </li>
  <li><span class="blue">Lorem ipsum dolor sit amet.</span><br/>
    <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex omnis dolore inventore qui, doloremque atque, architecto quae dolorum obcaecati facere consequatur, ea non ipsum corrupti iste dolorem! Reprehenderit, provident, aut!</span>
  </li>
  <li><span class="blue">Lorem ipsum dolor sit amet.</span><br/>
    <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex omnis dolore inventore qui, doloremque atque, architecto quae dolorum obcaecati facere consequatur, ea non ipsum corrupti iste dolorem! Reprehenderit, provident, aut!</span>
  </li>
  <li><span class="blue">Lorem ipsum dolor sit amet.</span><br/>
    <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex omnis dolore inventore qui, doloremque atque, architecto quae dolorum obcaecati facere consequatur, ea non ipsum corrupti iste dolorem! Reprehenderit, provident, aut!</span>
  </li>
</ol>

https://jsfiddle.net/q4tcf7x1/

Answer 1

稍微修改了您的代码。

• 给li左边距。
• 相对地定位了li的伪元素，将其移动了一点

亲自检查。

＆＃13;

＆＃13;

.why-ol{
  display: block;
  padding: 0 0 0 26px;
  list-style: none;
  overflow: hidden;
  counter-reset: numList;
}
.why-ol li {
  position: relative;
  width: 43%;
  margin-left: 60px;
  margin-right: 44px;
  display: inline-block;;
  position: relative;
  margin-bottom:25px;
  vertical-align:middle;
}
.why-ol li span{
  vertical-align:middle;
}
.why-ol li:before {
  counter-increment: numList;
  content: counter(numList)".";
  position: absolute;
  left: -60px;
  font: bold 25px sans-serif;
  text-align: center;
  color: #0073d5;
  line-height: 50px;
  width: 50px; 
  height: 50px;
  background: #fff;
  -moz-border-radius: 999px;
  border-radius: 999px;
  border:1px solid #0073d5;
  margin: 50px 20px 50px 0px;
  vertical-align: middle;
  display: inline-block;;
}

＆＃13;

<ol class="why-ol">
    <li><span class="blue">Lorem ipsum dolor sit amet.</span>
        <br/>
        <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex omnis dolore inventore qui, doloremque atque, architecto quae dolorum obcaecati facere consequatur, ea non ipsum corrupti iste dolorem! Reprehenderit, provident, aut!</span>
    </li>
    <li><span class="blue">Lorem ipsum dolor sit amet.</span>
        <br/>
        <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex omnis dolore inventore qui, doloremque atque, architecto quae dolorum obcaecati facere consequatur, ea non ipsum corrupti iste dolorem! Reprehenderit, provident, aut!</span>
    </li>
    <li><span class="blue">Lorem ipsum dolor sit amet.</span>
        <br/>
        <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex omnis dolore inventore qui, doloremque atque, architecto quae dolorum obcaecati facere consequatur, ea non ipsum corrupti iste dolorem! Reprehenderit, provident, aut!</span>
    </li>
    <li><span class="blue">Lorem ipsum dolor sit amet.</span>
        <br/>
        <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex omnis dolore inventore qui, doloremque atque, architecto quae dolorum obcaecati facere consequatur, ea non ipsum corrupti iste dolorem! Reprehenderit, provident, aut!</span>
    </li>
    <li><span class="blue">Lorem ipsum dolor sit amet.</span>
        <br/>
        <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex omnis dolore inventore qui, doloremque atque, architecto quae dolorum obcaecati facere consequatur, ea non ipsum corrupti iste dolorem! Reprehenderit, provident, aut!</span>
    </li>
    <li><span class="blue">Lorem ipsum dolor sit amet.</span>
        <br/>
        <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex omnis dolore inventore qui, doloremque atque, architecto quae dolorum obcaecati facere consequatur, ea non ipsum corrupti iste dolorem! Reprehenderit, provident, aut!</span>
    </li>
</ol>

＆＃13;

＆＃13;

＆＃13;

希望它能回答你的问题。快乐学习。

Answer 2

您可以在flex和span中使用height:100%来伪元素

<强> JSFIDDLE

.why-ol {
  display: block;
  padding: 0 0 0 26px;
  list-style: none;
  overflow: hidden;
  counter-reset: numList;
}

.why-ol li {
  width: 43%;
  margin-right: 44px;
  display: inline-block;
  position: relative;
  margin-bottom: 25px;
  vertical-align: middle;
}

.why-ol li span {
  vertical-align: middle;
  display: flex;
}

.why-ol li:before {
  counter-increment: numList;
  content: counter(numList)".";
  float: left;
  left: -26px;
  font: bold 25px sans-serif;
  text-align: center;
  color: #0073d5;
  line-height: 50px;
  width: 50px;
  height: 50px;
  background: #fff;
  -moz-border-radius: 999px;
  border-radius: 999px;
  border: 1px solid #0073d5;
  margin: 50px 20px 50px 0px;
  vertical-align: middle;
  display: block;
  height: 100%;
}

<ol class="why-ol">
  <li><span class="blue">Lorem ipsum dolor sit amet.</span><br/>
    <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex omnis dolore inventore qui, doloremque atque, architecto quae dolorum obcaecati facere consequatur, ea non ipsum corrupti iste dolorem! Reprehenderit, provident, aut!</span>
  </li>
  <li><span class="blue">Lorem ipsum dolor sit amet.</span><br/>
    <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex omnis dolore inventore qui, doloremque atque, architecto quae dolorum obcaecati facere consequatur, ea non ipsum corrupti iste dolorem! Reprehenderit, provident, aut!</span>
  </li>
  <li><span class="blue">Lorem ipsum dolor sit amet.</span><br/>
    <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex omnis dolore inventore qui, doloremque atque, architecto quae dolorum obcaecati facere consequatur, ea non ipsum corrupti iste dolorem! Reprehenderit, provident, aut!</span>
  </li>
  <li><span class="blue">Lorem ipsum dolor sit amet.</span><br/>
    <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex omnis dolore inventore qui, doloremque atque, architecto quae dolorum obcaecati facere consequatur, ea non ipsum corrupti iste dolorem! Reprehenderit, provident, aut!</span>
  </li>
  <li><span class="blue">Lorem ipsum dolor sit amet.</span><br/>
    <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex omnis dolore inventore qui, doloremque atque, architecto quae dolorum obcaecati facere consequatur, ea non ipsum corrupti iste dolorem! Reprehenderit, provident, aut!</span>
  </li>
  <li><span class="blue">Lorem ipsum dolor sit amet.</span><br/>
    <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex omnis dolore inventore qui, doloremque atque, architecto quae dolorum obcaecati facere consequatur, ea non ipsum corrupti iste dolorem! Reprehenderit, provident, aut!</span>
  </li>
</ol>