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，中心的类是文本中心

              <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，您可以轻松完成。

＆＃13;

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

＆＃13;

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

＆＃13;

为什么这个div不会只是居中？

5 个答案: