Question

我想制作一个半圆底的标题图片。在这张图片的中间，我想要一个标题和一个按钮。我无法使用flexbox或bootstrap将div与标题和按钮集中在一起。 mx-auto（margin x auto）有效，但是my-auto没有，align-self-center和align-items-center类不起作用，我必须添加mx-auto。要使圆形底部居中，我必须使用margin-left：-25vw。以te div为中心的最佳方式是什么？

这是我的代码：

＆＃13;

.image-wrapper {
 position: relative;
 width: 100vw;
 height: 100%;
 overflow: hidden;
}

.circular-bottom {
  width: 150vw;
  height: 90vh;
  margin-left: -25vw;
  border-bottom-left-radius: 50%;
  border-bottom-right-radius: 50%;
  overflow: hidden;
}

.circular-bottom img {
  z-index: -1;
}

.title-box {
  position: absolute;
  top: 0;
  height: 100%;
  width: 100%;
}

.title-text {
  text-align: center;
  width: 40%;
 }

＆＃13;

<div class="image-wrapper">
  <div class="circular-bottom d-flex justify-content-center">
    <img src="url/image" draggable="false">
   </div>
   <div class="title-box d-flex">
    <div class="title-text align-self-center">
      <h1>Title</h1>
      <a class="btn" href="#">button text</a>
    </div>
  </div>
</div>

＆＃13;

图像包装器可防止水平滚动。圆形底部使用溢出隐藏使图像的底部呈圆形，对于圆形的形状它更宽。这也是图像不是背景图像的原因，必须通过隐藏溢出来切断图像。

Answer 1

将justify-content: center属性添加到Flex容器（在这种情况下为.title-box）应该可以正常工作，如下所示：

.image-wrapper {
 position: relative;
 width: 100vw;
 height: 100%;
 overflow: hidden;
}

.circular-bottom {
  width: 150vw;
  height: 90vh;
  margin-left: -25vw;
  border-bottom-left-radius: 50%;
  border-bottom-right-radius: 50%;
  overflow: hidden;
}

.circular-bottom img {
  z-index: -1;
}

.title-box {
  justify-content: center;
  position: absolute;
  top: 0;
  height: 100%;
  width: 100%;
}

.title-text {
  text-align: center;
  width: 40%;
 }

<div class="image-wrapper">
  <div class="circular-bottom d-flex justify-content-center">
    <img src="url/image" draggable="false">
   </div>
   <div class="title-box d-flex">
    <div class="title-text align-self-center">
      <h1>Title</h1>
      <a class="btn" href="#">button text</a>
    </div>
  </div>
</div>

我已经尝试过了，它对我有用。

链接到正常工作的代码：https://codepen.io/anon/pen/YLOwxX

如何使用flexbox将div放在另一个div的中心？

1 个答案: