gpt4 book ai didi

html - 在导航栏中将文本居中放置在 div 中

转载 作者:太空宇宙 更新时间:2023-11-04 06:46:47 27 4
gpt4 key购买 nike

我想在第一个网格中对齐此文本 ZENZZEX。完美的垂直和水平,我已经水平对齐了。

body{
margin: 0;;
}

.navGrid {
display: grid;
grid-template-columns: repeat(6, 1fr);
height: 40px;
position: fixed;
width: 100%;
top:0;
background-color: white;
box-shadow: 0px 5px 10px rgba(0,0,0,0.3);


}
.span-col-4{
grid-column: span 4 / auto;
}



.navGrid .first{
color: black;
text-align: center;
font-family: 'Dosis', sans-serif;
font-size: 1.2em;
font-weight: 800;
position: relative;
top: 20%;


}


.navGrid .first:hover{
cursor: pointer;
font-size: 1.28em;
}
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Dosis" rel="stylesheet">
</head>
<body>
<div class="navGrid">
<div class="first">ZENZZEX </div>
<div class="span-col-4 second">Item 2</div>
<div class="third">Item 3</div>
</div>

<div class="content"><h1>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Laboriosam hic, adipisci quasi eius nesciunt veniam exercitationem dolorem aperiam id vero perferendis voluptatum ab ad laborum quaerat? Minus exercitationem iure assumenda perspiciatis dolorem ullam? Dolorum accusamus, possimus culpa molestias ipsum sequi animi numquam omnis delectus odio magni id. Obcaecati quo, reiciendis id explicabo veritatis qui excepturi distinctio autem voluptate quaerat dolorem?Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nulla iure ullam, ad nisi distinctio cumque molestiae vitae porro ex nihil facere harum delectus in laborum fugiat corporis maiores deserunt reiciendis laboriosam alias rerum. Nisi corrupti nostrum esse perferendis labore animi iure, nam aut laborum tenetur officia veniam consectetur odio, maxime consequatur deleniti illum harum et dicta quibusdam numquam sit commodi id libero. Facilis, incidunt reprehenderit ad beatae omnis obcaecati adipisci impedit, non quo porro deserunt nemo! Sed quo non reprehenderit! Voluptatibus aspernatur, praesentium harum, quod incidunt fugiat quidem adipisci, itaque pariatur minima deserunt porro velit? Laboriosam, minus! Sit, neque quibusdam.</h1></div>
</body>
</html>

最佳答案

你可以使用 flexbox 来做到这一点:

.navGrid .first {
color: black;
text-align: center;
font-family: 'Dosis', sans-serif;
font-size: 1.2em;
font-weight: 800;
display: flex;
align-items: center;
justify-content: center;
}

关于html - 在导航栏中将文本居中放置在 div 中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53225739/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com