在列表标签​​中，将光盘对准中心

Question

Image 光盘和文本之间的空格将删除。 在本文中，我将使用Some类标记和CSS样式。 我正在使用Visual代码来编辑此代码。

<section class="bg-light" id="team">
  <div class="container">
      <div class="row">
          <div class="col-lg-12 text-center">
              <h3 class="section-heading text-uppercase" style="color: black;font-size: 32px;font-weight: bold;">Our Amazing Team</h3>
              <h6 class="section-subheading text-muted" style="color:gray !important"><i>"Great things in business are never done by one person. They're done by a team of people" - Steve jobs</i></h6>
          </div>
      </div>
      <div class="row">
          <div class="col-lg-3">
              <div class="team-member">
                  <img class="mx-auto rounded-circle" src="img/team/Arun.jpg" alt="">
                  <h4 style="font-size: 25px;"><a href="arunrana.html"><b style="color: black">Arun  </b></a></h4>
                  <p class="text-muted">Founder & Lead DevOps</p>
                  <ul style="font-size: 12px;">  
                    <li>B.E. (Computer Engg.)</li>
                    <li>10 Years of Experience</li>
                  </ul>
               </div>
          </div>
      </div>
  </div>

Answer 1

使用text-indent

<section class="bg-light" id="team">
  <div class="container">
    <div class="row">
      <div class="col-lg-12 text-center">
        <h3 class="section-heading text-uppercase" style="color: black;font-size: 32px;font-weight: bold;">Our Amazing Team</h3>
        <h6 class="section-subheading text-muted" style="color:gray !important"><i>"Great things in business are never done by one person. They're done by a team of people" - Steve jobs</i></h6>
      </div>
    </div>
    <div class="row">
      <div class="col-lg-3">
        <div class="team-member">
          <img class="mx-auto rounded-circle" src="img/team/Arun.jpg" alt="">
          <h4 style="font-size: 25px;"><a href="arunrana.html"><b style="color: black">Arun  </b></a></h4>
          <p class="text-muted">Founder &amp; Lead DevOps</p>
          <ul style="font-size: 12px;">  
            <li>B.E. (Computer Engg.)</li>
            <li>10 Years of Experience</li>
          </ul>
        </div>
      </div>
    </div>
  </div>

{{1}}

Answer 2

您可以在li标签上使用text-indent: -6px;之类的否定文本索引来删除空格。

Answer 3

这看起来像是居中对齐的文本

尝试在text-left中添加类ul

<div class="team-member">
                  <img class="mx-auto rounded-circle" src="img/team/Arun.jpg" alt="">
                  <h4 style="font-size: 25px;"><a href="arunrana.html"><b style="color: black">Arun  </b></a></h4>
                  <p class="text-muted">Founder & Lead DevOps</p>
                  <ul class="text-left" style="font-size: 12px;">  
                    <li>B.E. (Computer Engg.)</li>
                    <li>10 Years of Experience</li>
                  </ul>
               </div>

Answer 4

li span { position: relative; left: -10px; }

<div class="row">
          <div class="col-lg-3">
              <div class="team-member">
                  <img class="mx-auto rounded-circle" src="img/team/Arun.jpg" alt="">
                  <h4 style="font-size: 25px;"><a href="arunrana.html"><b style="color: black">Arun  </b></a></h4>
                  <p class="text-muted">Founder & Lead DevOps</p>
                  <ul style="font-size: 12px;">  
                    <li><span>B.E. (Computer Engg.)</span></li>
                    <li><span>10 Years of Experience</span></li>
                  </ul>
               </div>
          </div>
      </div>

请在span内使用li

CSS：

<style>
         li span { position: relative; left: -10px; }
     </style>

HTML：

<div class="row">
          <div class="col-lg-3">
              <div class="team-member">
                  <img class="mx-auto rounded-circle" src="img/team/Arun.jpg" alt="">
                  <h4 style="font-size: 25px;"><a href="arunrana.html"><b style="color: black">Arun  </b></a></h4>
                  <p class="text-muted">Founder & Lead DevOps</p>
                  <ul style="font-size: 12px;">  
                    <li><span>B.E. (Computer Engg.)</span></li>
                    <li><span>10 Years of Experience</span></li>
                  </ul>
               </div>
          </div>
      </div>

输出图像：

Answer 5

请尝试使用此代码

<html>
<head>
    <style>
        ul {
            list-style-position: inside;
            padding-left: 0;
        }
        li span{
            position: relative; left: -10px;
        }
    </style>

</head>    

<body>
    <div class="row">
        <div class="col-lg-3">
            <div class="team-member">
                <img class="mx-auto rounded-circle" src="img/team/Arun.jpg" alt="">
                <h4 style="font-size: 25px;"><a href="arunrana.html"><b style="color: black">Arun  </b></a></h4>
                <p class="text-muted">Founder & Lead DevOps</p>
                <ul style="font-size: 12px;">  
                    <li><span>B.E. (Computer Engg.)</span></li>
                    <li><span>10 Years of Experience</span></li>
                </ul>
            </div>
        </div>
    </div>
</body>
</html>