#css #alignment
#css — код #выравнивание
Вопрос:
У меня есть кнопка class="view-more" , которую я пытаюсь выровнять по центру на странице в моем div class="main" , но я просто не могу заставить ее двигаться.
Я пробовал параметры выравнивания, содержимого и элементов, а также параметры выравнивания, но они просто остаются в левом нижнем углу div.
Я думаю, что моя позиция может быть причиной проблемы, но я не уверен. Я все еще учусь, и это сбивает меня с толку.
Вот полный основной код.
main {
background-color: var(--secondary-color);
height: 1060px;
}
main .videos {
display: grid;
grid-template-columns: 50% 50%;
margin: 5px;
}
main .videos img {
height: 240px;
width: 92%;
margin: 10px 0 0 24px;
box-shadow: 0 4px 8px rgba(0, 0, 0, .4);
z-index: 100;
position: relative;
}
main a {
position: relative;
}
main .videos h4 {
padding: 0;
margin: 15px 0 0 0;
color: var(--light-color);
text-align: center;
font-family: 'Oswald', sans-serif;
font-size: 1.6em;
}
main .videos h4 span {
background-color: rgba(0, 0, 0, 0.1);
padding: 0 10px;
border-radius: 10px;
}
main .videos i {
position: absolute;
color: white;
z-index: 3;
top: 30%;
left: 40%;
box-shadow: 0 4px 8px rgba(0, 0, 0, .8);
border-radius: 100px;
}
main .view-more {
position: absolute;
border-radius: 10px;
background-color: var(--dark-color);
color: var(--hightlight-color);
} <main>
<h3>Featured Videos</h3>
<div class="videos">
<h4><span>Hands // Tobias Levin</span></h4>
<h4><span>Rise // Virtuoso</span></h4>
<a href="https://www.youtube.com/watch?v=kQLhO7dW5ZY" class="fresco"><i class="fas fa-play-circle fa-7x"></i><img src="/images/tobias1.jpg" alt=""></a>
<a href="https://www.youtube.com/watch?v=S7kG641iA_g" class="fresco"><i class="fas fa-play-circle fa-7x"></i><img src="/images/rise.jpg" alt=""></a>
<h4><span>This is Dan and Dave</span></h4>
<h4><span>Super // Chris Webber</span></h4>
<a href="https://www.youtube.com/watch?v=hBRkiXlW_kM" class="fresco"><i class="fas fa-play-circle fa-7x"></i><img src="/images/dand.jpg" alt=""></a>
<a href="https://www.youtube.com/watch?v=Lyf_SsOThMs" class="fresco"><i class="fas fa-play-circle fa-7x"></i><img src="/images/cwebber.jpg" alt=""></a>
<h4><span>Superhuman // Brian Tudor</span></h4>
<h4><span>Smoke Screen // Jaspas Deck</span></h4>
<a href="https://www.youtube.com/watch?v=qU0I8BnwoFk" class="fresco"><i class="fas fa-play-circle fa-7x"></i><img src="/images/bt.jpg" alt=""></a>
<a href="https://www.youtube.com/watch?v=_Wk3imz44qI" class="fresco"><i class="fas fa-play-circle fa-7x"></i><img src="/images/smokescreen.jpg" alt=""></a>
</div>
<button class="view-more">Open The Vault</button>
</main> Комментарии:
1. Мы не можем определить проблему только с помощью CSS, вам также необходимо включить HTML-код в свой вопрос
2. Добавьте css и html в один фрагмент. В противном случае мы не сможем увидеть css в работе.
3. Одобренное редактирование, извините, я не очень хорошо знаю, как использовать этот сайт.
4. Почему вы смешиваете grid-template и position:absolute? Сетка может выполнить эту работу, если вы установите дочерние элементы в правильные ячейки.
5. @G-Cyrillus Спасибо, что указали на это, я все еще учусь, поэтому иногда я немного путаюсь во всех элементах. Я немного подумал и добавил кнопку обратно в основную сетку и просто выровнял себя вместе с 2 столбцами, и это сработало отлично.
Ответ №1:
Вы не возражаете, если заголовок / все в главном контейнере будет центрирован? Если нет, вы можете просто добавить выравнивание текста по центру в контейнер, который будет центрировать дочерние элементы. Проблема с тем, что ваш код не перемещает кнопку, заключается в том, что вы добавили «абсолютную позицию» к кнопке, что означает, что она будет центрироваться не относительно своего родительского элемента, а скорее к окну. Я удалил эту абсолютную позицию, и теперь кнопка будет прослушивать своего родителя. Имеет ли это смысл?
main {
background-color: var(--secondary-color);
height: 1060px;
text-align: center;
}
main .videos {
display: grid;
grid-template-columns: 50% 50%;
margin: 5px;
}
main .videos img {
height: 240px;
width: 92%;
margin: 10px 0 0 24px;
box-shadow: 0 4px 8px rgba(0, 0, 0, .4);
z-index: 100;
position: relative;
}
main a {
position: relative;
}
main .videos h4 {
padding: 0;
margin: 15px 0 0 0;
color: var(--light-color);
text-align: center;
font-family: 'Oswald', sans-serif;
font-size: 1.6em;
}
main .videos h4 span {
background-color: rgba(0, 0, 0, 0.1);
padding: 0 10px;
border-radius: 10px;
}
main .videos i {
position: absolute;
color: white;
z-index: 3;
top: 30%;
left: 40%;
box-shadow: 0 4px 8px rgba(0, 0, 0, .8);
border-radius: 100px;
}
main .view-more {
border-radius: 10px;
background-color: var(--dark-color);
color: var(--hightlight-color);
} <main>
<h3>Featured Videos</h3>
<div class="videos">
<h4><span>Hands // Tobias Levin</span></h4>
<h4><span>Rise // Virtuoso</span></h4>
<a href="https://www.youtube.com/watch?v=kQLhO7dW5ZY" class="fresco"><i class="fas fa-play-circle fa-7x"></i><img src="/images/tobias1.jpg" alt=""></a>
<a href="https://www.youtube.com/watch?v=S7kG641iA_g" class="fresco"><i class="fas fa-play-circle fa-7x"></i><img src="/images/rise.jpg" alt=""></a>
<h4><span>This is Dan and Dave</span></h4>
<h4><span>Super // Chris Webber</span></h4>
<a href="https://www.youtube.com/watch?v=hBRkiXlW_kM" class="fresco"><i class="fas fa-play-circle fa-7x"></i><img src="/images/dand.jpg" alt=""></a>
<a href="https://www.youtube.com/watch?v=Lyf_SsOThMs" class="fresco"><i class="fas fa-play-circle fa-7x"></i><img src="/images/cwebber.jpg" alt=""></a>
<h4><span>Superhuman // Brian Tudor</span></h4>
<h4><span>Smoke Screen // Jaspas Deck</span></h4>
<a href="https://www.youtube.com/watch?v=qU0I8BnwoFk" class="fresco"><i class="fas fa-play-circle fa-7x"></i><img src="/images/bt.jpg" alt=""></a>
<a href="https://www.youtube.com/watch?v=_Wk3imz44qI" class="fresco"><i class="fas fa-play-circle fa-7x"></i><img src="/images/smokescreen.jpg" alt=""></a>
</div>
<button class="view-more">Open The Vault</button>
</main> Комментарии:
1. Я удалил позицию: absolute на кнопке и добавил текстовое выравнивание, о котором вы упомянули, но теперь я вообще не могу найти кнопку. С помощью position: absolute он выровнял его, но не по центру, он был слишком далеко вправо.
2. @FrocketGaming Здравствуйте, извините, я не был активен на сайте. С Днем благодарения! Смогли ли вы найти решение? Кажется странным, что кнопка исчезнет, если у вас не будет других элементов с абсолютной позицией, которые будут мешать. РЕДАКТИРОВАТЬ :: Игнорируйте мой комментарий, я видел, что у вас есть решение, работающее в комментариях выше!