Блог

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

не могу, кажется, переместить изображение

#html #css #position #responsive

Вопрос:

Я пытаюсь немного сдвинуть изображение вверх, чтобы выровнять его по оси x, но я попробовал расположить его относительно и дополнить, но, похоже, оно не перемещается, но когда я меняю ширину, это работает. Я вношу изменения в .luxxreno img, но он не работает, кто-нибудь знает, почему и как я буду корректировать его положение? Я просто хочу немного поднять его, потому что он не выровнен в моем div/

CSS

 .container {
  padding: 2.5em 1.25em 0;
  margin: 0 auto;
  border-bottom: 0.125em solid rgb(105, 105, 105);
  border-width: 100%;
  padding-bottom: 1.25em;
}
h1 {
  margin: 0;
  text-align: center;
  font-size: 3.125em;
  overflow: hidden;
  line-height: 1;
  color: white;
}
h1 span {
  display: block;
  animation: reveal 1.5s cubic-bezier(0.77, 0, 0.175, 1) 0.5s;
}

.meet-the-owner h3 {
  text-align: center;
  color: rgb(255, 215, 0);
  font-size: 1.5625em;
  font-family: "BatmanForeverAlternate";
}
.meet-the-owner-top h3 {
  text-align: center;
  color: rgb(255, 215, 0);
  font-size: 1.5625em;
  font-family: "BatmanForeverAlternate";
  padding: 2.5em;
}

.luxxreno {
  text-align: center;
  width: 100%;
  padding-bottom: 2.5em;
}

.luxxreno img {
  border-radius: 50%;
  top: 3em;
}

.meet-the-owner {
  padding: 3.125em;
  border-top: 0.125em solid rgb(105, 105, 105);
}
.q-l {
  color: white;
  display: inline-block;
  text-align: left;
  font-size: 1em;
  padding-left: 10%;
  padding-top: 2em;
}

.questions p {
  padding: 0.625em;
  padding-left: 0;
  font-size: 1.4em;
}
.luxx-name {
  font-family: "BatmanForeverAlternate";
  left: 0.2em;
  font-size: 3.125em;
  top: 1.9em;
  padding-bottom: 10px;
}

.owner {
  font-family: "BatmanForeverAlternate";
  color: red;
  padding-bottom: 25px;
}
.luxx-socials {
  padding-top: 30px;
}

HTML

 <section class="player-bios">

      <div class="container">
        <h1>
            <span>Players</span>
        </h1>
    </div>

    <div class="meet-the-owner-top">

    <h3>Meet the Owner</h3>

  </div>

  <div class="luxxreno">

    <img src="images/luxx.jpg">
    <div class="q-l">
    <div class="questions">
      <h2 class="luxx-name">LUXX RENO</h2>
      <h2 class="owner">OWNER</h2>
      <p>Real Name: <b>Cory George</b></p>
      <p>Online Name: <b>Luxx Reno</b></p>
      <p>First Game Played as a Kid: <b>Duck Hunter/Super Nintendo</b></p>
      <p>Game I'm Best At: <b>Fortnite</b></p>
      <p>If You Were a Superhero, What Would Your Power Be?: <br><b>Mimicry, so I'd be able to mimic and super power I see.</b></p>
      <p>Favourite Artist of All Time: <b>Billy Raffoul</b></p>
      <p>Hidden Talents: <b>Won lots of medals for swimming!</b></p>
    </div>

  <div class="luxx-socials">
<ul>
    <a href="https://www.youtube.com/channel/UCPqsHNuWTAbckHg4R3WAJIg" target=”_blank”><li>487 @ YouTube</li></a>
    <a href="https://www.instagram.com/luxxreno/?hl=en" target=”_blank”><li>2.6k @ Instagram</li></a>
    <a href="https://www.twitch.tv/luxxreno" target=”_blank”><li>3k @ Twitch</li></a><br>
    <a href="https://twitter.com/LuxxReno" target=”_blank”><li>2.5k @ Twitter</li></a>
    <a href="https://www.tiktok.com/@luxxxreno?lang=enamp;is_copy_url=1amp;is_from_webapp=v1" target=”_blank”><li>657k @ TikTok</li></a>
</ul>
  </div>
</div>

  </div>

  <div class="meet-the-owner">

    <h3>Content Creator</h3>

  </div>

  <div class="luxxreno">

    <img src="images/abz-c.png">
    <div class="q-l">
    <div class="questions">
      <h2 class="luxx-name">ABZZINO</h2>
      <h2 class="owner">Content Creator</h2>
      <p>Real Name: <b>Abdullah Khan</b></p>
      <p>Online Name: <b>Abzzino</b></p>
      <p>First Game Played as a Kid: <b>Call Of Duty</b></p>
      <p>Game I'm Best At: <b>Call Of Duty (all of them)</b></p>
      <p>If You Were a Superhero, What Would Your Power Be?: <br> <b>Flying</b></p>
      <p>Hidden Talents: <b>They're hidden for a reason.</b></p>
    </div>

  <div class="luxx-socials">
<ul>
    <a href="https://www.youtube.com/c/Abzzino/featured" target=”_blank”><li>360 @ YouTube</li></a>
    <a href="https://www.instagram.com/_abzzino_/" target=”_blank”><li>193 @ Instagram</li></a>
    <a href="https://www.twitch.tv/abzzinok" target=”_blank”><li>2.6k @ Twitch</li></a><br>
    <a href="https://twitter.com/_Abzzino_" target=”_blank”><li>142 @ Twitter</li></a>
    <a href="https://www.tiktok.com/@abzzinoyt?lang=en" target=”_blank”><li>23.6k @ TikTok</li></a>
</ul>
  </div>
</div>

  </div>

  <div class="meet-the-owner">

    <h3>COMPETITIVE PLAYER</h3>

  </div>

  <div class="luxxreno">

    <img src="images/kyran-c.png">
    <div class="q-l">
    <div class="questions">
      <h2 class="luxx-name">KEEZO</h2>
      <h2 class="owner">COMPETITIVE PLAYER</h2>
      <p>Real Name: <b>Kyran Garden</b></p>
      <p>Online Name: <b>KEEZO</b></p>
      <p>First Game Played as a Kid: <b>Call Of Duty 3</b></p>
      <p>Game I'm Best At: <b>Warzone</b></p>
      <p>If You Were a Superhero, What Would Your Power Be?: <br> <b>Flying</b></p>
      <p>Favourite Artist of All Time: <b>Drake</b></p>
      <p>Hidden Talents: <b>I'm good at football.</b></p>
    </div>

  <div class="luxx-socials">
<ul>
    <a href="https://www.twitch.tv/LKeezo" target=”_blank”><li>400 @ Twitch</li></a>
    <a href="https://twitter.com/KEEZZ0" target=”_blank”><li>1.2k @ Twitter</li></a>
    <a href="https://www.tiktok.com/@kkeezo?lang=en" target=”_blank”><li>1.1k @ TikTok</li></a>
</ul>
  </div>
</div>

  </div>

  <div class="meet-the-owner">

    <h3>Content Manager</h3>

  </div>

  <div class="luxxreno">

    <img src="images/brad-c.png">
    <div class="q-l">
    <div class="questions">
      <h2 class="luxx-name">SPODERBRAD</h2>
      <h2 class="owner">Content Manager</h2>
      <p>Real Name: <b>Brad</b></p>
      <p>Online Name: <b>SpoderBrad</b></p>
      <p>First Game Played as a Kid: <b>Metal Gear Solid</b></p>
      <p>Game I'm Best At: <b>Splitgate</b></p>
      <p>If You Were a Superhero, What Would Your Power Be?: <br><b>Honestly don’t want a super power just wanna <br> be Iron Man.</b></p>
      <p>Favourite Artist of All Time: <br> <b>Drake or Eminem can’t decide</b></p>
      <p>Hidden Talents: <b>Best Free Kick Taker on Twitch.</b></p>
    </div>

  <div class="luxx-socials">
<ul>
    <a href="https://www.youtube.com/channel/UCnqgXWWmmg1F3L919lzT6aQ" target=”_blank”><li>353 @ YouTube</li></a>
    <a href="https://www.instagram.com/spoderbrad/?hl=en-gb" target=”_blank”><li>115 @ Instagram</li></a>
    <a href="https://www.twitch.tv/SpoderBrad" target=”_blank”><li>2.1k @ Twitch</li></a><br>
    <a href="https://twitter.com/SpoderBrad" target=”_blank”><li>392 @ Twitter</li></a>
    <a href="https://www.tiktok.com/@spoderbrad?lang=en" target=”_blank”><li>60k @ TikTok</li></a>
</ul>
  </div>
</div>

  </div>

    </section>

Ответ №1:

Я не совсем уверен, что это то, о чем вы говорите, но в этом CSS

 .luxxreno img {
  border-radius: 50%;
  top: 3em;
}

верхний параметр будет проигнорирован, поскольку для элемента не задана позиция. И когда вы его установите, убедитесь, что любой элемент-предок, относительно которого вы хотите, чтобы он был расположен, также имеет заданную позицию, иначе CSS будет искать DOM, пока не найдет такого предка.

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

1. спасибо, это сработало, я могу изменить свою позицию, но знаете ли вы, как я изменю размер, потому что я использую ширину: 400 пикселей, и никаких изменений не происходит.

2. Это может быть другой вопрос, но сейчас дайте мне знать, где вы меняете ширину.

3. я хочу изменить размер изображения, я использую .luxxreno img

4. Взгляните на инструменты разработчика вашего браузера, чтобы точно увидеть, какой CSS — код применяется к изображению-это должно показать вам, почему ваши 400 пикселей перезаписываются, если это так

Метки: , ,