嗨，所以我只需要一些幫助flexbox，我查看了其他人，甚至復制了那里的代碼進行測試，但由于某種原因它不起作用。我正在嘗試讓div內容在網站的頂部中心對齊。這是我當前的代碼，索引.html<div class="header"> <div class="headerContent"> <h1>TEST<h1> </div></div樣式.csshtml { display: flex;}.header { display: flex; align-items: center; justify-content: center; flex-direction: column;} .headerContent { background-color: #2C374C; width: 100%; justify-content: center;}
3 回答
九州編程
TA貢獻1785條經驗 獲得超4個贊
看來你正在做正確的事情，但在錯誤的元素上。當它是子容器時，您將.headerid 視為父容器。
在這種情況下，容器層次結構如下html-> header->.headerContent
因此，要居中，header您需要對其父級采取行動。將其想象為父母向其孩子發出命令（字面意思）。
html {
display: flex;
justify-content: center;
}
通過這樣做，父組件正在證明其內容（子組件）
我還建議不要使用 html 創建另一個 div 容器作為標頭 div 的父容器，如下所示
.headerContainer {
display: flex;
justify-content: center;
background-color: red
}
.header {
display: flex;
}
.headerContent {
background-color: #2C374C;
width: 100%;
}
<div class="headerContainer">
<div class="header">
<div class="headerContent">
<h1>TEST<h1>
</div>
</div>
</div>
子衿沉夜
TA貢獻1828條經驗 獲得超3個贊
我想就像這樣
.header {
width: 100%;
}
.headerContent {
background-color: #2c374c;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
<html>
<link rel="stylesheet" href="style.css" />
<div class="header">
<div class="headerContent">
<h1>Test</h1>
</div>
</div>
</html>
眼眸繁星
TA貢獻1873條經驗 獲得超9個贊
當您使用flex-direction: column;, 來水平居中時，請使用align-items: center;而不是justify-content: center;
您還設置了一個height屬性。
例子：
.header{
display: flex;
height: 300px;
justify-content: center;
align-items: center;
background: red
}
<header class="header">
<div>centered</div>
</header>
- 3 回答
- 0 關注
- 199 瀏覽
添加回答
舉報
0/150
提交
取消