css - 从父级分隔容器宽度

Question

我是 css 新手，我在一个简单的圆圈部分工作，在圆圈的中间我添加了一个 svg 图像，在圆圈的底部我添加了一个简单的文本
代码:

  .treatment-method__title{
    margin-top: 4em;
    color:#0e4f1f;
    text-align: center;
  }

  .treatment-method__title__complement{
    text-align: center;
  }
  .treatment-methods__icons {
    display: flex;
    /* flex-wrap: wrap; */
    text-align: center;
  }
  
  .treatment-method__icon__container {
    flex: 1 0 21%;
    margin: 5px;
    height: 100px;
  }
  
  .treatment-method__icon__outer_circle {
    background-color: #0e4f1f;
    border-radius: 50%;
    width: 130px;
    height: 130px;
    padding: 30px;
  }
  
  .treatment-methods_icon {
    vertical-align: middle;
    width: 70px;
    height: 70px;
    /* border-radius: 50%; */
    color: #ffffff;
  }

  .treatment-methods__icon__text{
    color:#0e4f1f;
     margin-top: 4em;
  }

<section class="treatment-methods">
                  <h1 class="treatment-method__title">Neque porro quisquam est qui dolorem ipsum quia dolor sit amet</h1>
                  <p class="treatment-method__title__complement">Neque porro quisquam est qui dolorem ipsum quia dolor sit amet</p>
                  <div class="treatment-methods__icons">
                    <div class="treatment-method__icon__container">
                      <div class="treatment-method__icon__outer_circle">
                        <img src="https://www.svgrepo.com/show/80293/online.svg" alt="wellness" class="treatment-methods_icon">
                            <p class="treatment-methods__icon__text">Psicoterapy</p>
                      </div>
                    </div>
                    <div class="treatment-method__icon__container">
                      <div class="treatment-method__icon__outer_circle">
                        <img src="https://www.svgrepo.com/show/80293/online.svg" alt="wellness" class="treatment-methods_icon">
                            <p class="treatment-methods__icon__text">Psicoterapy</p>
                      </div>
                    </div>
                    <div class="treatment-method__icon__container">
                      <div class="treatment-method__icon__outer_circle">
                        <img src="https://www.svgrepo.com/show/80293/online.svg" alt="wellness" class="treatment-methods_icon">
                            <p class="treatment-methods__icon__text">Psicoterapy</p>
                      </div>
                    </div>
                    <div class="treatment-method__icon__container">
                      <div class="treatment-method__icon__outer_circle">
                        <img src="https://www.svgrepo.com/show/80293/online.svg" alt="wellness" class="treatment-methods_icon">
                            <p class="treatment-methods__icon__text">Psicoterapy</p>
                      </div>
                    </div>
                
                  </div>
              </section>

问题是我所有的圆圈都有页面宽度容器的 100% 宽度，我想将其更改为仅在上面的标题内:

我怎样才能将那个圆圈的面积划定在我的两个条形之间？问候

Answer 1

您可以简单地使用 flex与 align item和 justify-content使您的 section留在屏幕中央，为标题和圆圈添加一个名为 title_icons 的 div。并使用 display:inline-block .
您的 circles将在文本 blocks 的(中心)内并且也会响应。
现场演示:

.treatment-method__title {
  margin-top: 4em;
  color: #0e4f1f;
  text-align: center;
}

.treatment-method__title__complement {
  text-align: center;
}

.treatment-methods__icons {
  display: flex;
  /* flex-wrap: wrap; */
  text-align: center;
}

.treatment-method__icon__container {
  flex: 1 0 21%;
  margin: 5px;
  height: 100px;
}

.treatment-method__icon__outer_circle {
  background-color: #0e4f1f;
  border-radius: 50%;
  width: 130px;
  height: 130px;
  padding: 30px;
}

.treatment-methods_icon {
  vertical-align: middle;
  width: 70px;
  height: 70px;
  /* border-radius: 50%; */
  color: #ffffff;
}

.treatment-methods__icon__text {
  color: #0e4f1f;
  margin-top: 4em;
}

.title_icons {
  display: inline-block;
}

.treatment-methods {
  display: flex;
  justify-content: center;
  align-items: center;
}

<section class="treatment-methods">
  <div class="title_icons">

    <h1 class="treatment-method__title">Neque porro quisquam est qui dolorem ipsum quia dolor sit amet</h1>
    <p class="treatment-method__title__complement">Neque porro quisquam est qui dolorem ipsum quia dolor sit amet</p>
    <div class="treatment-methods__icons">
      <div class="treatment-method__icon__container">
        <div class="treatment-method__icon__outer_circle">
          <img src="https://www.svgrepo.com/show/80293/online.svg" alt="wellness" class="treatment-methods_icon">
          <p class="treatment-methods__icon__text">Psicoterapy</p>
        </div>
      </div>
      <div class="treatment-method__icon__container">
        <div class="treatment-method__icon__outer_circle">
          <img src="https://www.svgrepo.com/show/80293/online.svg" alt="wellness" class="treatment-methods_icon">
          <p class="treatment-methods__icon__text">Psicoterapy</p>
        </div>
      </div>
      <div class="treatment-method__icon__container">
        <div class="treatment-method__icon__outer_circle">
          <img src="https://www.svgrepo.com/show/80293/online.svg" alt="wellness" class="treatment-methods_icon">
          <p class="treatment-methods__icon__text">Psicoterapy</p>
        </div>
      </div>
      <div class="treatment-method__icon__container">
        <div class="treatment-method__icon__outer_circle">
          <img src="https://www.svgrepo.com/show/80293/online.svg" alt="wellness" class="treatment-methods_icon">
          <p class="treatment-methods__icon__text">Psicoterapy</p>
        </div>
      </div>

    </div>

  </div>

</section>