Центрирование div внутри тега рисунка

Tgralak спросил: 13 октября 2017 в 07:36 в: html

Почему гибкие решения для центрирования моего".time" div не работают? Я попытался поместить display: flex и justify, выровнять содержимое. Я также попытался отобразить его в виде блока, а также указать margin: 0 и т. Д. До сих пор не могу понять, как его отцентрировать (вместо top: 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/

0 ответов