我正在為學校創建一個網站，卻陷入了一個我到處尋找解決方案的問題。我對html和css非常了解，所以我希望我沒有問一些愚蠢的問題。我有一個行div標簽，里面有2個div標簽，用于2列，因為這個網頁有點分成2部分。在右邊的列中，我有一個按鈕，它不會與右邊列的中心對齊。對于該列中的文本，它使用display: flex和justify-content: center在中心對齊；但是按鈕就是不動。我可以只使用頁邊空白，但當我調整頁面大小時，按鈕保持不變。
代碼如下:
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap");
/* ---- Set up site grid ---- */
@media (max-width: 600px) {
.left,
.right {
width: 100%;
}
}
* {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body {
background: gray;
font-family: "Montserrat", sans-serif;
}
main {
grid-area: main;
background: #272727;
}
footer {
grid-area: footer;
background-color: black;
text-align: right;
color: white;
}
h1.titleH1 {
font-family: 'Montserrat', sans-serif;
font-size: 2.3vw;
padding-left: 150px;
margin: auto;
color: white;
/* -- Transform to vertically center heading */
position: relative;
top: 50%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
}
img.roundleft {
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
box-shadow: 1px 0px 10px #000;
float: left;
}
/*--- Navigation Bar ---*/
.wrapper {
display: grid;
grid-template-areas: 'headerLeft headerRight';
grid-template-columns: 600px 1fr;
}
.headerLeft {
text-align: left;
background-color: black;
}
.headerRight {
text-align: right;
background: linear-gradient(to left, #55524e, black);
}
.navMenu {
margin-top: 30px;
margin-right: 20px;
}
.navMenu a {
color: #f6f4e6;
text-decoration: none;
font-size: 1vw;
text-transform: uppercase;
font-weight: 500;
margin-left: 50px;
margin-right: 50px;
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-i n-out;
}
.navMenu a:hover {
color: #fddb3a;
}
/*---- Main Pages (Rows and Columns) ----*/
.row {
display: flex;
}
.column {
height: 800px;
}
.left {
background-color: black;
width: 50%;
float: left;
}
.right {
background: linear-gradient(to left, #55524e, #171716);
width: 50%;
float: left;
}
.homeImage {
max-width: 100%;
height: 800px;
}
h1.mainH1 {
color: white;
font-size: 2.5vw;
display: flex;
justify-content: center;
margin-top: 1em;
}
h2.mainH2 {
color: white;
font-size: 2vw;
font-family: "Montserrat", sans-serif;
display: flex;
justify-content: center;
margin-top: 20px;
}
.listItems {
color: white;
font-size: 1vw;
font-family: "Montserrat", sans-serif;
display: flex;
justify-content: center;
}
.btnQuiz {
font-family: "Montserrat", sans-serif;
background-color: #ffe31c;
border-radius: 10px;
border: none;
color: black;
padding: 11px 28px;
text-align: center;
text-decoration: none;
font-size: 16px;
display: flex;
justify-content: center;
}<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<main>
<div class="row">
<div class="column left">
<!-- Left -->
<img class="homeImage" src="images/barbell.jpg" alt="Man lifting barbell">
</div>
<div class="column right">
<!-- Right -->
<h1 class="mainH1">Welcome to the Fitness project</h1>
<h2 class="mainH2">Here you can:<br></h2>
<br>
<ul>
<li class="listItems">Learn the fundementals to fitness as well as diet</li>
<br>
<li class="listItems">Take a quiz to optimise the information for your goals</li>
<br>
<li class="listItems">Expand your knowledge with usefull body building tips</li>
</ul>
<button class="btnQuiz">Take Quiz</button>
</div>
</div>
</main>你可以用它來使一個按鈕居中。
.center {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}<div class="center">
<button>Centered Button</button>
</div>有兩種簡單的方法可以做到這一點:
方法1:
將下列css屬性賦予列右類名:
.right {
display: flex;
justify-content: center;
align-items: center;
}上面的內容將使你的div中的所有內容居中，類名為“右列”
方法2
如果您只想讓按鈕居中，讓其他元素保持原樣，那么可以用一個div容器包裝按鈕，如下所示:
<div class='btn-wrapper'>
<button class="btnQuiz">Take Quiz</button>
</div>然后將這個css交給css中的btn-wrapper:
.btn-wrapper {
display: flex;
justify-content: center;
align-items: center;
}嘗試使用
<center> <!-- button code here --> </center>這是硬編碼，但工作非常好。