似乎无法移动图像
cant seem to move image
我试图将我的图像向上移动一点以与 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=en&is_copy_url=1&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>
我不确定这就是你所说的，但是在这个 CSS
.luxxreno img {
border-radius: 50%;
top: 3em;
}
顶部设置将被忽略，因为元素上没有设置位置。当你设置它时，确保你想要它定位的任何祖先元素也有一个位置设置，否则 CSS 将寻找 DOM 直到它找到这样的祖先。
我试图将我的图像向上移动一点以与 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=en&is_copy_url=1&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>
我不确定这就是你所说的，但是在这个 CSS
.luxxreno img {
border-radius: 50%;
top: 3em;
}
顶部设置将被忽略，因为元素上没有设置位置。当你设置它时，确保你想要它定位的任何祖先元素也有一个位置设置，否则 CSS 将寻找 DOM 直到它找到这样的祖先。