Почему верхние значения в% не отвечают в Google chrome, а в firefox? - PullRequest
Новая
       0

Почему верхние значения в% не отвечают в Google chrome, а в firefox?

0 голосов
/ 11 апреля 2020

Я проектирую веб-сайт, на котором у меня есть lo go, который должен быть расположен в центре. Для этого я дал следующий код: 

#logo{
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

Lo go находится внутри другой div с идентификатором cont .Code для cont выглядит следующим образом. 

#cont{
    height: 80vh;
    width: 80vw;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

Код HTML прост и выглядит следующим образом. 

<div>
    <div id="cont">
        <img src="./log.png" alt="logo" id="logo"/>
    </div>
</div>

Теперь код в firefox работает как положено. lo go центрируется без каких-либо проблем. Но в chrome он не работает должным образом. Я проверил lo go в chrome, и я заметил, что значение top : 50% не отвечает в chrome. В то время как left : 50% отвечает как ожидалось. Если я даю top : 50vh, он отвечает. Это только не отвечает на% значения. Но мне нужно использовать% значений в top. Как я могу это сделать и почему эта проблема возникает?

1 Ответ

1 голос
/ 11 апреля 2020

Ваш код работает в chrome, и весь код, который вы написали, должен работать в chrome. Помните ли вы, что обновили кэш?

однако способ написания кода не соответствует лучшим практики. Абсолютное положение следует избегать, где это возможно. Я воссоздал код здесь. 

#logo{
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

#logo img {
  max-height: 50%;
}

#cont{
    border: 2px solid red;

    height: 80vh;
    width: 80vw;

    margin: 5vh auto;
}
<body>

  <div id="cont">
      <div id="logo">
          <img src="https://media.sproutsocial.com/uploads/2017/02/10x-featured-social-media-image-size.png"
           alt="logo" />
      </div>
  </div>
</body>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...