Question

为什么灵活的解决方案将我的＆＃34; .time＆＃34; div不起作用？我尝试过显示：flex和justify，对齐内容。我还尝试将其显示为一个块，并设置保证金：0等。仍然无法弄清楚如何居中（而不是顶部：xx％，左：xx％）

  <div class="container">

    <h3>Pomodoro timer</h3>

<figure>
    <img src="svg/food.svg" class="tomato">

    <div class="inline time">
      <div id="min">11</div>
      <div id="sec">11</div>
    </div>
</figure>
    <div id="start">st</div>
    <div id="break"></div>
  </div>

CSS：

 $responsive-text: calc(20px + 3vw);


.container {
    margin: 0 auto;
    display:flex;
    flex-direction: column;
    align-items:center;
    width:95vw;
    max-width:450px;
    height:95vh;
    border:1px solid black;
    position: relative;
}

.tomato {
    margin-top:-30px;
    width:70vw;
    max-width: 350px;
    max-height:80%;
}

h3 {
    margin-top:0;
    font-size:$responsive-text;
}

.inline {
    display:inline-flex;
    justify-content: center;
}

.time {
    font-size: $responsive-text;
    top:37.5%;
    width:35%;
    margin:auto;
    text-align:center;
    position:absolute;
    border: 1px solid rgb(51, 28, 28);
    left:31%;
}

figure {
    display:block;
    position:relative;
    margin: 0 auto;
}

jsfiddle：https://jsfiddle.net/fakbj3v4/

Answer 1

您需要将flexbox放在CSS中的figure元素中。因此，figure元素中的每个子元素都是居中的，这就是我想要的

figure {

    display: flex;
    justify-content: center;
    align-items: center;

}

将此代码放在元素上时，这些属性将应用于其子元素

将div放在图标内

1 个答案: