我想把一些元素对齐到屏幕的中心,而把其他的元素留在原地。我对html很陌生,我试着在谷歌上搜索它,所以如果有人能帮助我,我将不胜感激。
*{
box-sizing: border-box;
margin:0;
padding:0;
font-weight: 300;
font-size: 13px;
text-align: center;
}
body{
background-image: none;
background-size: cover;
background-position:center center;
height:100vh;
}
a{
text-decoration:none;
}
header{
display:-webkit-flex;
display:-moz-flex;
display:-ms-flex;
display: -o-flex;
display:flex;
justify-content: center;
align-items: center;
padding:30px 70px;
}
.nav-area{
list-style: none;
}
.nav-area li{
display:inline-block;
padding:0 15px;
text-transform: uppercase;
}
.nav-area li a{
transition: .3s;
color:#000000;
}
.nav-area li a:hover{
color:#000000;
}
.btn-area{
cursor:pointer;
color:rgb(0, 0, 0);
font-size: 16px;
letter-spacing: 2px;
text-transform: uppercase;
padding:10px 30px;
border-radius: 5px;
background:#ffffff;
}
这里我的元素适合屏幕的左边和右边。我希望一些适合在中间,而让其他的地方
2条答案
按热度按时间g52tjvyc1#
您可以使用position属性使项居中,并使用absolute、top:50%,左侧:50%用于使项目相对于父元素居中。
6ljaweal2#
由于你没有包含html代码,我希望你需要保持居中的元素彼此相邻。如果是这样,你可以使用
<div></div>
元素将它们分组,然后对<div></div>
应用css。以下是代码示例。下面是示例css代码
请注意,上面的代码将内容水平居中。您可以根据需要为div指定一个单独的高度(因为默认情况下div采用内容的高度!)并使用
justify-content: center;
css属性将其在div内垂直居中。希望您会发现这个答案有用!