css 如何对齐特定的ul元素？

rxztt3cl 于 2023-02-14 发布在其他

关注(0)|答案(2)|浏览(158)

我想把一些元素对齐到屏幕的中心，而把其他的元素留在原地。我对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;
}

这里我的元素适合屏幕的左边和右边。我希望一些适合在中间，而让其他的地方

css

来源：https://stackoverflow.com/questions/75406928/how-to-align-specific-ul-elements

2条答案

按热度按时间

g52tjvyc1#

您可以使用position属性使项居中，并使用absolute、top：50%，左侧：50%用于使项目相对于父元素居中。

赞(0）回复(0）举报 2023-02-14

6ljaweal2#

由于你没有包含html代码，我希望你需要保持居中的元素彼此相邻。如果是这样，你可以使用<div></div>元素将它们分组，然后对<div></div>应用css。以下是代码示例。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css" />
</head>

<body>
    <button>button1</button> //other elements
    <button>button2</button>

    <div class="sample">
        <button>button3</button> //elements you want to center
        <button>button4</button>
        <button>button5</button>
    </div>

    <button>button6</button> //other elements
    <button>button7</button>
</body>

下面是示例css代码

.sample{
    display: flex;
    flex-direction: column;
    align-items: center;
    
}

请注意，上面的代码将内容水平居中。您可以根据需要为div指定一个单独的高度（因为默认情况下div采用内容的高度！）并使用justify-content: center; css属性将其在div内垂直居中。希望您会发现这个答案有用！

赞(0）回复(0）举报 2023-02-14

我来回答

css 如何对齐特定的ul元素？

2条答案

相关问题

热门标签

最新问答