在网格内居中放置图像

时间：2019-03-05 17:38:55

标签： html css twitter-bootstrap

我正在创建一个网格以显示团队的图像。我有一个图像网格，我需要将底部的2个图像放置在顶部2个中间图像的下方-基本上将底部2个位置居中。如何实现此目的？我在下面添加了HTML和CSS。任何帮助将不胜感激。谢谢。

enter image description here 

.team-grids .team-img {
  overflow: hidden;
  position: relative;
  display: block;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="team">
  <div class="container">
    <div class="w3l-heading">
      <h3>Our Team</h3>
    </div>
    <div class="team-row">
      <div class="col-md-3 team-grids">
        <div class="team-img">
          <img class="img-responsive" src="https://via.placeholder.com/200x200" alt="">
          <div class="captn">
            <div class="captn-top">
              <h4>Edwards Doe</h4>
              <p>description</p>
            </div>

          </div>
        </div>
      </div>
      <div class="col-md-3 team-grids">
        <div class="team-img">
          <img class="img-responsive" src="https://via.placeholder.com/200x200" alt="">
          <div class="captn">
            <div class="captn-top">
              <h4>Mark Sophia</h4>
              <p>description</p>
            </div>

          </div>
        </div>
      </div>
    </div>
  </div>

4 个答案:

答案 0 :(得分：0)

您可以尝试添加以下内容：

this.<FORM>.get('<FIELD>').value

编辑：我不好，请尝试这个。 添加 .team-grids { margin: 0 auto; } 

justify-content-md-center
.team-grids .team-img {
	overflow: hidden;
	position: relative;
	display: block;
}

答案 1 :(得分：0)

完成。只需添加#include <nmmintrin.h> #include <stdint.h> union Uint128 { __uint128_t uu128; uint64_t uu64[2]; }; static inline uint_fast8_t popcnt_u128 (__uint128_t n) { const union Uint128 n_u = {.uu128 = n}; const uint_fast8_t cnt_a = _mm_popcnt_u64(n_u.uu64[0]); const uint_fast8_t cnt_b = _mm_popcnt_u64(n_u.uu64[1]); const uint_fast8_t cnt = cnt_a + cnt_b; return cnt; } ，请参见下面的示例：D 

text-align: center;
.team-grids .team-img {
	overflow: hidden;
	position: relative;
	display: block;
  text-align: center;
}

答案 2 :(得分：0)

尝试将这些规则display: flex;和justify-content: center;添加到.team-row类中，如下所示

.team-row{
  display: flex;
  justify-content: center;
}

运行以下代码段：

.team-row{
  display: flex;
  justify-content: center;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class="team">
  <div class="container">
    <div class="w3l-heading">
      <h3>Our Team</h3>
    </div>
    <div class="team-row">
      <div class="col-md-3 team-grids">
        <div class="team-img">
          <img class="img-responsive" src="https://via.placeholder.com/200x200" alt="">
          <div class="captn">
            <div class="captn-top">
              <h4>Edwards Doe</h4>
              <p>description</p>
            </div>

          </div>
        </div>
      </div>
      <div class="col-md-3 team-grids">
        <div class="team-img">
          <img class="img-responsive" src="https://via.placeholder.com/200x200" alt="">
          <div class="captn">
            <div class="captn-top">
              <h4>Mark Sophia</h4>
              <p>description</p>
            </div>

          </div>
        </div>
      </div>
    </div>
  </div>

答案 3 :(得分：0)

.team-grids .team-img {
  overflow: hidden;
  position: relative;
  display: block;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="team">
  <div class="container">
    <div class="w3l-heading">
      <h3>Our Team</h3>
    </div>
    <div class="team-row row justify-content-center">
      <div class="col-sm-6 col-md-3 team-grids">
        <div class="team-img mx-auto">
          <img class="img-fluid" src="https://via.placeholder.com/200x200" alt="">
          <div class="captn">
            <div class="captn-top">
              <h4>Edwards Doe</h4>
              <p>description</p>
            </div>
          </div>
        </div>
      </div>
      <div class="col-sm-6 col-md-3 team-grids">
        <div class="team-img mx-auto">
          <img class="img-fluid" src="https://via.placeholder.com/200x200" alt="">
          <div class="captn">
            <div class="captn-top">
              <h4>Mark Sophia</h4>
              <p>description</p>
            </div>
          </div>
        </div>
      </div>
      <div class="col-sm-6 col-md-3 team-grids">
        <div class="team-img mx-auto">
          <img class="img-fluid" src="https://via.placeholder.com/200x200" alt="">
          <div class="captn">
            <div class="captn-top">
              <h4>Mark Sophia</h4>
              <p>description</p>
            </div>
          </div>
        </div>
      </div>
      <div class="col-sm-6 col-md-3 team-grids">
        <div class="team-img mx-auto">
          <img class="img-fluid" src="https://via.placeholder.com/200x200" alt="">
          <div class="captn">
            <div class="captn-top">
              <h4>Mark Sophia</h4>
              <p>description</p>
            </div>
          </div>
        </div>
      </div>
      <div class="col-sm-6 col-md-3 team-grids">
        <div class="team-img mx-auto">
          <img class="img-fluid" src="https://via.placeholder.com/200x200" alt="">
          <div class="captn">
            <div class="captn-top">
              <h4>Mark Sophia</h4>
              <p>description</p>
            </div>
          </div>
        </div>
      </div>
      <div class="col-sm-6 col-md-3 team-grids">
        <div class="team-img mx-auto">
          <img class="img-fluid" src="https://via.placeholder.com/200x200" alt="">
          <div class="captn">
            <div class="captn-top">
              <h4>Mark Sophia</h4>
              <p>description</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

对代码的三处更改：

1）与row一起添加类justify-content-center和team-row。列始终与Bootstrap中的行结合使用。

2）添加类img-fluid，因为img-responsive是Bootstrap 3类，在Bootstrap 4中已更改为img-fluid。

3）如果需要将图像居中放置在列中，请将类mx-auto添加到team-img中。对于文本，可以使用text-center。

相关问题
最新问题