[英]I can't keep my button content to stay centered
我正在處理一個項目,每當單擊按鈕時,它就會沿着出現在其下方的文本旁邊移動。 在過去的幾個小時里,我一直在努力解決這個問題,但似乎無法弄清楚。 我試圖讓按鈕保持居中。 我試過 align-items 但它似乎對我不起作用。
body {
margin: 0;
font-family: "Lato", sans-serif;
}
* {
box-sizing: border-box;
}
a {
color: black;
text-decoration: none;
}
.app {
width: 100vw;
display: flex;
flex-direction: column;
align-items: center;
min-height: 100vh;
background-color: peachpuff;
}
.error,
.loading {
margin: 22px;
text-align: center;
}
.error {
color: red;
}
.home-buttons-wrapper {
display: flex;
justify-content: space-between;
a {
border-radius: 5px;
padding: 10px;
width: 135px;
text-align: center;
}
}
button {
font-size: 18px;
padding: 15px 20px;
margin-top: 40px;
border: none;
border-radius: 10px;
cursor: pointer;
box-shadow: 2px 2px 12px rgba(0, 0, 0, 0.2);
transition: transform 0.3s;
}
button:hover {
transform: scale(1.125);
}
@keyframes fade {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.fade-animation {
animation: fade 0.5s;
}
.fortune-text {
display: flex;
justify-content: center;
.h4 {
align-items: center;
}
}
盡管我無法分辨 HTML 結構並且“沿文本旁邊移動”可能意味着不同的事情,但我的猜測是這些項目正在重新對齊,因為它們的父容器的display
設置為flex
並且文本本身相對定位,使得彈性盒反應。
您可以嘗試將文本的position
設置為absolute
或fixed
,這應該將兩個元素的位置解耦。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.