在半分割的索引页面上显示两个 div 的块

Question

我有一个半分裂的索引页。我用twitter bootstrap-v5.1.3来拆分。在左侧我有两个 div，其中有一个文本和一个图像 class.

这些 div 在 flex-parent 中。所以他们正在寻找内联块。

我想要上面的文字和底部的图像，我在下面提到过。但文本和图像也必须位于“左侧 col-md-6”的中心。

我需要这个：

body {
  font-family: "Merriweather", sans-serif;
  background-color: #fafafa;
  overflow-x: hidden;
}

.leftside,
.rightside {
  height: 50vh;
  width: 100%;
}

@media screen and (min-width: 768px) {
  .leftside,
  .rightside {
    height: 100vh;
  }
}

.leftside {
  background-color: #8a68ff;
  opacity: 83%;
}

.rightside {
  background-color: #ffffff;
}

.left-hero-text {
  font-size: 48px;
  font-weight: 400;
  color: #ffffff;
}

.bold-text {
  font-size: 55px;
  font-weight: 700;
}

img {
  width: 50%;
  height: auto;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<div class="row gx-0">
  <div class="col-md-6 gx-0">
    <div class="leftside d-flex justify-content-center align-items-center">
      <div class="left-hero-text">
        <span class="bold-text">Lorem</span> ipsum
        <span class="bold-text">dolor</span> sit amet
      </div>
      <img src="https://wiki.geogebra.org/uploads/a/a4/Menu-tools.svg" alt="tools" />
    </div>
  </div>
  <div class="col-md-6 gx-0">
    <div class="rightside d-flex justify-content-center align-items-center">
      Right Side
    </div>
  </div>
</div>

Answer 1

您只需将内部弹性容器的方向更改为列即可。

body {
  font-family: "Merriweather", sans-serif;
  background-color: #fafafa;
  overflow-x: hidden;
}

.leftside,
.rightside {
  height: 50vh;
  width: 100%;
}

@media screen and (min-width: 768px) {
  .leftside,
  .rightside {
    height: 100vh;
  }
}

.leftside {
  background-color: #8a68ff;
  opacity: 83%;
}

.rightside {
  background-color: #ffffff;
}

.left-hero-text {
  font-size: 48px;
  font-weight: 400;
  color: #ffffff;
}

.bold-text {
  font-size: 55px;
  font-weight: 700;
}

img {
  width: 50%;
  height: auto;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<div class="row gx-0">
  <div class="col-md-6 gx-0">
    <div class="leftside d-flex flex-column justify-content-center align-items-center">
      <div class="left-hero-text">
        <span class="bold-text">Lorem</span> ipsum
        <span class="bold-text">dolor</span> sit amet
      </div>
      <img src="https://wiki.geogebra.org/uploads/a/a4/Menu-tools.svg" alt="tools" />
    </div>
  </div>
  <div class="col-md-6 gx-0">
    <div class="rightside d-flex justify-content-center align-items-center">
      Right Side
    </div>
  </div>
</div>

在半分割的索引页面上显示两个 div 的块

displaying block of two divs on half splitted index page

html

css

bootstrap-5