为什么这个 div 不居中？

Question

我一直在尝试将最底一行的蓝色卡片居中。如您所见，它不是：

到目前为止，我已经尝试过 text-align、width: 100%; 和 margin-left: auto; margin right: auto;

但它不会居中！有什么我明显执行不佳/错误的事情吗？

HTML：

<!-------------------     SKILLS     --------------------->

        <section>
            <div class="container-fluid skillset">

                <div class="row">
                    <div class="col-xs-12">
                        <h3>Skills</h3>
                    </div>
                </div>


            <div class="row lang">

                <div class="col-md-3">
                    <div class="card card-outline-primary text-xs-center">
                        <div class="card-block">
                            <blockquote class="card-blockquote">
                                <p><i class="fa fa-html5" aria-hidden="true"></i></p>
                            </blockquote>
                        </div>
                    </div>
                </div>

                <div class="col-md-3">
                    <div class="card card-outline-primary text-xs-center">
                        <div class="card-block">
                            <blockquote class="card-blockquote">
                                <p><i class="fa fa-css3" aria-hidden="true"></i></p>
                            </blockquote>
                        </div>
                    </div>
                </div>

                <div class="col-md-3">
                    <div class="card card-outline-primary text-xs-center">
                        <div class="card-block">
                            <blockquote class="card-blockquote">
                                <p><i class="fa fa-twitter" aria-hidden="true"></i></p>
                            </blockquote>
                        </div>
                    </div>
                </div>

                <div class="col-md-3">
                    <div class="card card-outline-primary text-xs-center">
                        <div class="card-block">
                            <blockquote class="card-blockquote">
                                <p><i class="fa fa-database" aria-hidden="true"></i></p>
                            </blockquote>
                        </div>
                    </div>
                </div>

            </div>

</div>

</section>

CSS：

/* -------------------------------------
SKILLS
--------------------------------------*/

.card {
    width: 100px;
    height: auto;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    transition: 0.3s;
    border-radius: 5px; /* 5px rounded corners */
   /* margin-left: 30%; */
}

/* Add rounded corners to the top left and the top right corner of the image */
img {
    border-radius: 5px 5px 0 0;
}

/* On mouse-over, add a deeper shadow */
.card:hover {
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.8);
}

.lang {
    text-align: center;
}

Answer 1

将display: inline-block; 添加到.col-md-3。
https://jsfiddle.net/q6hpqob1/

.card {
  width: 100px;
  height: auto;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  transition: 0.3s;
  border-radius: 5px;  /* 5px rounded corners */
  /* margin-left: 30%; */
}


/* Add rounded corners to the top left and the top right corner of the image */

img {
  border-radius: 5px 5px 0 0;
}


/* On mouse-over, add a deeper shadow */

.card:hover {
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.8);
}

.lang {
  text-align: center;
}

.col-md-3 {
  height: 50px;
  width: 50px;
  border: 1px solid black;
  
display: inline-block; /*add this*/
}

<section>
  <div class="container-fluid skillset">
    <div class="row">
      <div class="col-xs-12">
        <h3>Acomplishments</h3>
      </div>
    </div>
    <div class="row">
      <div class="col-xs-2">
        <h4>Internship</h4>
      </div>
      <div class="col-xs-10">
        <p>Every day is taco ipsum tuesday. Tacos Al pastor/De Adobada are made of thin pork steaks seasoned with adobo seasoning, then skewered and overlapped on one another on a vertical rotisserie cooked and flame-broiled as it spins. 50 cent tacos! I’ll
          take 30. Carne asada on corn tortillas. Let’s do a beef and a chicken, and one with both. I’ve been following that taco truck around all day. Josh’s taco shack is the best taco shack. Let’s do a beef and a chicken, and one with both. CARNE ASADA!!</p>
      </div>
    </div>
    <div class="row">
      <div class="col-md-2">
        <h4>Live Project</h4>
      </div>
      <div class="col-md-10">
        <p>Every day is taco ipsum tuesday. Tacos Al pastor/De Adobada are made of thin pork steaks seasoned with adobo seasoning, then skewered and overlapped on one another on a vertical rotisserie cooked and flame-broiled as it spins. 50 cent tacos! I’ll
          take 30. Carne asada on corn tortillas. Let’s do a beef and a chicken, and one with both. I’ve been following that taco truck around all day. Josh’s taco shack is the best taco shack. Let’s do a beef and a chicken, and one with both. CARNE ASADA!!</p>
      </div>
    </div>

    <div class="row">
      <div class="col-xs-12">
        <h3>Skills</h3>
      </div>
    </div>


    <div class="row lang">

      <div class="col-md-3">
        <div class="card card-outline-primary text-xs-center">
          <div class="card-block">
            <blockquote class="card-blockquote">
              <p><i class="fa fa-html5" aria-hidden="true"></i></p>
            </blockquote>
          </div>
        </div>
      </div>

      <div class="col-md-3">
        <div class="card card-outline-primary text-xs-center">
          <div class="card-block">
            <blockquote class="card-blockquote">
              <p><i class="fa fa-css3" aria-hidden="true"></i></p>
            </blockquote>
          </div>
        </div>
      </div>

      <div class="col-md-3">
        <div class="card card-outline-primary text-xs-center">
          <div class="card-block">
            <blockquote class="card-blockquote">
              <p><i class="fa fa-twitter" aria-hidden="true"></i></p>
            </blockquote>
          </div>
        </div>
      </div>

      <div class="col-md-3">
        <div class="card card-outline-primary text-xs-center">
          <div class="card-block">
            <blockquote class="card-blockquote">
              <p><i class="fa fa-database" aria-hidden="true"></i></p>
            </blockquote>
          </div>
        </div>
      </div>

    </div>

  </div>

</section>

我已经为它们添加了高度、宽度和边框，因为它们本质上是空的。
但是当你将图标放入其中时，你可以删除它们。

Answer 2

尝试将 .card 设为内联块 (display: inline-block) 并在其父级上使用 text-align: center。为此，您可能希望为这些父 col-md-3 元素提供一个专用类。

Answer 3

将此类应用于<div class='row lang'> div：

.flex {
  display:flex;
  justify-content: space-between; /* or center */
  flex-wrap:nowrap
}

片段

.card {
  width: 100px;
  height: auto;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  transition: 0.3s;
  border-radius: 5px;
  /* 5px rounded corners */
  /* margin-left: 30%; */
}
/* Add rounded corners to the top left and the top right corner of the image */

img {
  border-radius: 5px 5px 0 0;
}
/* On mouse-over, add a deeper shadow */

.card:hover {
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.8);
}
.lang {
  text-align: center;
}
.flex {
  display: flex;
  justify-content: space-between;/* or center */
  flex-wrap: nowrap
}

<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/fontawesome/4.6.3/css/font-awesome.min.css">

<section>
  <div class="container-fluid skillset">
    <div class="row">
      <div class="col-xs-12">
        <h3>Acomplishments</h3>
      </div>
    </div>
    <div class="row">
      <div class="col-xs-2">
        <h4>Internship</h4>
      </div>
      <div class="col-xs-10">
        <p>Every day is taco ipsum tuesday. Tacos Al pastor/De Adobada are made of thin pork steaks seasoned with adobo seasoning, then skewered and overlapped on one another on a vertical rotisserie cooked and flame-broiled as it spins. 50 cent tacos! I’ll
          take 30. Carne asada on corn tortillas. Let’s do a beef and a chicken, and one with both. I’ve been following that taco truck around all day. Josh’s taco shack is the best taco shack. Let’s do a beef and a chicken, and one with both. CARNE ASADA!!</p>
      </div>
    </div>
    <div class="row">
      <div class="col-md-2">
        <h4>Live Project</h4>
      </div>
      <div class="col-md-10">
        <p>Every day is taco ipsum tuesday. Tacos Al pastor/De Adobada are made of thin pork steaks seasoned with adobo seasoning, then skewered and overlapped on one another on a vertical rotisserie cooked and flame-broiled as it spins. 50 cent tacos! I’ll
          take 30. Carne asada on corn tortillas. Let’s do a beef and a chicken, and one with both. I’ve been following that taco truck around all day. Josh’s taco shack is the best taco shack. Let’s do a beef and a chicken, and one with both. CARNE ASADA!!</p>
      </div>
    </div>

    <div class="row">
      <div class="col-xs-12">
        <h3>Skills</h3>
      </div>
    </div>


    <div class="row lang flex">

      <div class="col-md-3">
        <div class="card card-outline-primary text-xs-center">
          <div class="card-block">
            <blockquote class="card-blockquote">
              <p><i class="fa fa-html5" aria-hidden="true"></i>
              </p>
            </blockquote>
          </div>
        </div>
      </div>

      <div class="col-md-3">
        <div class="card card-outline-primary text-xs-center">
          <div class="card-block">
            <blockquote class="card-blockquote">
              <p><i class="fa fa-css3" aria-hidden="true"></i>
              </p>
            </blockquote>
          </div>
        </div>
      </div>

      <div class="col-md-3">
        <div class="card card-outline-primary text-xs-center">
          <div class="card-block">
            <blockquote class="card-blockquote">
              <p><i class="fa fa-twitter" aria-hidden="true"></i>
              </p>
            </blockquote>
          </div>
        </div>
      </div>

      <div class="col-md-3">
        <div class="card card-outline-primary text-xs-center">
          <div class="card-block">
            <blockquote class="card-blockquote">
              <p><i class="fa fa-database" aria-hidden="true"></i>
              </p>
            </blockquote>
          </div>
        </div>
      </div>

    </div>

  </div>

</section>

Answer 4

对于 bootstrap3，center 的类是 text-center

              <div class="col-md-3 text-center">
                <div class="card card-outline-primary text-xs-center">
                    <div class="card-block">
                        <blockquote class="card-blockquote">
                            <p><i class="fa fa-html5" aria-hidden="true"></i></p>
                        </blockquote>
                    </div>
                </div>
            </div>

Answer 5

在内部 div 上使用 margin: 0 auto; css 可以轻松完成。

.inblock{
    display: inline-block;
    margin: 0 auto; 
}

<div>

  <center>
    <div class="inblock">1</div>
    <div class="inblock">2</div>
    <div class="inblock">3</div>
    <div class="inblock">4</div>
  </center>
  
</div>