我試圖練習(xí)我的 Flexbox 技能，但我無法將 Flexbox 容器中的某個(gè)類居中。它僅在我應(yīng)用于justify-content: center;容器時(shí)居中，但如果我將其應(yīng)用于孩子，它就不會(huì)居中.head1。我也無法使用對(duì)齊項(xiàng)目垂直對(duì)齊它。即使我在彈性盒容器中使用它，它仍然不會(huì)垂直對(duì)齊。我也嘗試過對(duì)齊h1元素，但它也不起作用。我究竟做錯(cuò)了什么？？編輯：為了澄清，我試圖更改元素h1和.head1元素。body,html { width: 100%;height: 100%;font-family: 'Montserrat', sans-serif;background: url(header.jpg) no-repeat center center fixed; -webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover;}.flex-container{display: flex;justify-content: center; }h3{/*color: white;*/color: black;font-size: 3rem;}h1{display: flex;flex-wrap: wrap;justify-content: center;align-items: center;/*color: white;*/color: black;font-size: 3rem; }.head1{}<!-- Google Fonts --><link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet"><!-- Bootstrap CSS from a CDN. This way you don't have to include the bootstrap file yourself --><link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <!-- Your own stylesheet --><link rel="stylesheet" type="text/css" href="style.css"><h1 class ="text-uppercase"><strong>Welcome to the Landing Page</strong></h1> <div class="flex-container"> <h3 class="head1"> Find out more!</h3></div>
2 回答
偶然的你
TA貢獻(xiàn)1841條經(jīng)驗(yàn) 獲得超3個(gè)贊
如果您想讓h1和h3在頁面上垂直居中，您需要將 移動(dòng)h1到您的.flex-container. 應(yīng)用flex-direction: column, justify-content: center和height: 100%到那個(gè) 和text-align: center到h1和h3
body,
html {
width: 100%;
height: 100%;
font-family: 'Montserrat', sans-serif;
background: url(header.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.flex-container {
display: flex;
flex-direction: column;
justify-content: center;
height: 100%;
}
h3 {
color: black;
text-align: center;
font-size: 3rem;
}
h1 {
color: black;
font-size: 3rem;
text-align: center;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="flex-container">
<h1 class="text-uppercase"><strong>Welcome to the Landing Page</strong></h1>
<h3 class="head1"> Find out more!</h3>
</div>
狐的傳說
TA貢獻(xiàn)1804條經(jīng)驗(yàn) 獲得超3個(gè)贊
如果我理解正確，您想要垂直對(duì)齊.head1元素。您可以通過兩種方式來完成此操作，將屬性 align-items: center添加到父flex-container或?qū)lign-self: center添加到flex-container中的子元素。而且您還必須指定父容器的高度。我希望這可以幫助你。
body,
html {
width: 100%;
height: 100%;
font-family: 'Montserrat', sans-serif;
background: url(header.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.flex-container{
display: flex;
justify-content: center;
height: 100%;
/* align-items: center; it's works too*/
}
h3{
/*color: white;*/
color: black;
font-size: 3rem;
}
h1{
text-align: center;
color: black;
font-size: 3rem;
}
.head1{
align-self: center;
}
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<!-- Bootstrap CSS from a CDN. This way you don't have to include the bootstrap file yourself -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<!-- Your own stylesheet -->
<link rel="stylesheet" type="text/css" href="style.css">
<h1 class ="text-uppercase"><strong>Welcome to the Landing Page</strong></h1>
<div class="flex-container">
<h3 class="head1"> Find out more!</h3>
</div>
- 2 回答
- 0 關(guān)注
- 149 瀏覽
添加回答
舉報(bào)
0/150
提交
取消