Question

作为练习的一部分，我正在将PSD制作到HTML网站。如何使用Bootstrap使响应式，水平和垂直中心图像对齐？当屏幕缩小时，屏幕出了屏，我遇到问题，即使我向其中添加了img响应类，图像也不希望响应。我尝试使用flexbox，但是图像的减少很严重，图像变得很小。

.expertise {
    background-color: #f7f7f7;
}

.expertise__text {
    margin: 5em 0 0 5em;
}

.expertise__text h1 {
    color: #222222;
    font-family: Montserrat;
    font-size: 40px;
    font-weight: 700;
    letter-spacing: -2px;
}

.expertise__text-p {
    margin: 2em 0 4em 0;
}

.expertise__items {
    padding: 0 0 0 0;
}

.expertise__items h2 {
    color: #222222;
    font-family: Montserrat;
    font-size: 22px;
    font-weight: 600;
}

.expertise__items p {
    font-family: "Noto Sans";
    font-size: 16px;
    font-weight: 400;
}

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
        crossorigin="anonymous">

<section class='expertise container-fluid '>
        <div class='row'>
            <div class='col-sm-8'>
                <div class='expertise__text row'>
                    <h1>OTHER EXPERTISE</h1>
                    <p class='expertise__text-p'>Proin iaculis purus consequat sem cure digni ssim. Donec porttitora
                        entum suscipit aenean
                        rhoncus posuere odio in tincidunt consequat sem cure digni ssim. </p>
                    <div class='col-sm-6 expertise__items row'>
                        <div class='col-sm-1'>
                            <img src="/img/gear.png" alt="">
                        </div>
                        <div class='col-sm-11'>
                            <h2>CUSTOM HELP</h2>
                            <p>Proin iaculis purus consequat sem cure digni ssim. Donec porttitora entum suscipit
                                aenean
                                rhoncus.</p>
                        </div>

                        <div class='col-sm-1'>
                            <img src="/img/gear.png" alt="">

                        </div>
                        <div class='col-sm-11 '>
                            <h2>ALL STAR SUPPORT TEAM</h2>
                            <p>Proin iaculis purus consequat sem cure digni ssim. Donec porttitora entum suscipit
                                aenean
                                rhoncus.</p>
                        </div>

                    </div>
                    <div class='col-sm-6 expertise__items row '>
                        <div class='col-sm-1'>
                            <img src="/img/gear.png" alt="">

                        </div>
                        <div class='col-sm-11 '>
                            <h2>CLOUD CONTROL</h2>
                            <p>Proin iaculis purus consequat sem cure digni ssim. Donec porttitora entum suscipit
                                aenean
                                rhoncus.</p>
                        </div>

                        <div class='col-sm-1'>
                            <img src="/img/gear.png" alt="">

                        </div>
                        <div class='col-sm-11'>
                            <h2>TOP NOTCH SECURITY</h2>
                            <p>Proin iaculis purus consequat sem cure digni ssim. Donec porttitora entum suscipit
                                aenean
                                rhoncus.</p>
                        </div>
                    </div>
                </div>

            </div>
            <div class='col-sm-4 expertise__img '>
                <img src="https://i.imgur.com/8mdzkbV.png" alt=""></div>
        </div>
    </section>

外观如何：

Answer 1

您应该注意的是justify-content-center和align-items-center，它们将使弹性项目在垂直和水平方向上居中对齐。另一方面，对图像使用img-fluid。

如果您在stackoverflow中查看此示例，请整页查看，并使用浏览器的dev工具来模拟智能手机的屏幕尺寸：）

.bg-grey {
  background-color: #F7F7F7;
}

p {
    font-family: "Noto Sans";
    font-size: 16px;
    font-weight: 400;
}

h1 {
    color: #222222;
    font-family: Montserrat;
    font-size: 40px;
    font-weight: 700;
}

h5 {
    color: #222222;
    font-family: Montserrat;
    font-size: 22px;
    font-weight: 600;
}

.round-button {
  border-radius: 75px !important;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>


<div class="container-fluid">
  <div class="row justify-content-center align-items-center">
    <div class="col-sm-6">
      <h1 class="font-weight-bold mb-3">OTHER EXPERTISE</h1>
      <p class="mb-5">Aenean pharetra magna ac placerat vestibulum. Faucibus interdum posuere lorem ipsum dolor sit. Quis vel eros donec ac. Nisi quis eleifend quam adipiscing vitae proin sagittis.</p>
      <div class="row align-items-center">
        <div class="col-sm-6">
          <h5>SOME HEADER</h5>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
        <div class="col-sm-6">
          <h5>SOME HEADER</h5>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
        <div class="w-100 h-100"></div>
        <div class="col-sm-6">
          <h5>SOME HEADER</h5>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
        <div class="col-sm-6">
          <h5>SOME HEADER</h5>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
      </div>
      <div class="row align-items-center mt-3 mb-3">
        <div class="col-sm-4">
          <input type="button" value="LEARN MORE" class="form-control round-button">
        </div>
      </div>
    </div>
    <div class="col-sm-4 text-center">
      <img src="https://i.imgur.com/8mdzkbV.png" class="img-fluid" alt=""></div>
  </div>
</div>

另外，这是working example：）

如何在引导程序中使垂直和水平对齐响应图像

1 个答案: