Блог

Главная - Вопросы по программированию - Как мне переместить мой текст так, чтобы он был под изображением, которое я использовал

Как мне переместить мой текст так, чтобы он был под изображением, которое я использовал

#html #css #grid #alignment #center

Вопрос:

Как бы я использовал свой CSS, чтобы разместить свой текст под ледяным изображением. Я также хотел бы узнать, как вы завершили код, поскольку я не вижу никаких последствий после обновления моего браузера. Я тестировал этот код несколько раз, и, похоже, он не подталкивает, как только я добавил дополнительные обновления в CSS. Я не могу поделиться с вами изображениями, поскольку они классифицированы и не могут быть предоставлены в данный момент времени.

 body {
  display: block !important;
  position: static !important;
  height: auto !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important
}

a {
  text-decoration: none !important;
}

#centre-screen {
  background: none;
  position: absolute;
  top: 55%;
  left: 65%;
  transform: translate(-50%, -50%);
  display: grid;
  grid-template-columns: auto;
  padding: 1rem;
  width: 100%;
  max-width: 100%;
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
  color: steelblue;
  column-fill: auto;
}

#logo {
  background: none;
  position: relative;
  display: block;
  margin: auto;
  border: 3px solid #AAAAAA;
  border-radius: 100rem
}

#logo img {
  z-index: -50;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  object-fit: contain
}

#icy-email img {
  height: 35%;
  width: 50%;
  float: left;
  margin-bottom: ;
}

#text {
  margin-right: auto;
}

@media (orientation: portrait) {
  emphasized text #centre-screen {
    grid-gap: 10vh;
  }
  #logo {
    height: 40vw !important;
    width: 40vw !important;
    margin: auto
  }
}

@media (orientation: landscape) {
  #centre-screen {
    grid-gap: 10vw;
    grid-template-columns: auto auto
  }
  #buttons {
    width: 18em !important;
  }
  #logo {
    height: 40vh !important;
    width: 40vh !important
  }
}

@media (orientation: landscape) and (min-width: 800px) {
  #buttons {
    width: 25em !important;
  }
} 
 <!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">

<head>
  <title>ICY.EMAIL</title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="ICY.EMAIL - Free personal email" />
</head>

<body>

  <div id="centre-screen">
    <div id="logo">
      <img src="https://pixy.org/src2/600/6007376.jpg" alt="">
    </div>
    <div id="icy-email">
      <img src="https://pixy.org/src2/600/6007376.jpg" alt="">
    </div>
    <div id="text">
      <p class="font-size-30">Thank you for your order!</p>
      <p class="font-size-20">Your new email address(as below) is now active </p>
      <a href="<?php echo $req_redirect; ?>">
        <?php echo $req_address; ?>
      </a>
      <p class="font-size-20">Please allow up to 30 minutes for your new</p>
      <p class="font-size-20" style="margin-top: -20px"> mailbox to start working and receiving email.</p>
      <p class="font-size-20">You will be now redirected to your mailbox.</p>
    </div>

  </div>

  <a id="terms-of-use" href="https://pixy.org/src2/600/6007376.jpg" target="_blank" rel="noopener noreferrer">Terms of Use</a>

</body>

</html>

Комментарии:

1. Добавьте также немного html

2. Добавлен HTML, вам придется использовать свои собственные примеры изображений, так как я не могу предложить имеющиеся у меня изображения, поскольку они являются конфиденциальными.

3. Итак, что вы хотите в ближайшее время?

4. Используйте flex-box, это облегчит вам перемещение по мере необходимости. Вы можете начать отсюда

Метки: , ,