Html 如何将ul列表作为按钮与中心对齐_Html_Css

Html 如何将ul列表作为按钮与中心对齐

html css

Html 如何将ul列表作为按钮与中心对齐,html,css,Html,Css,晚上好,，我有一个练习来做标题和下面的按钮。我们已经准备好了按钮的代码。我们的目标是把它放在一个边框中，在这些按钮上做一个标题，并将按钮和标题对齐到中心我的代码现在看起来像这样 CSS HTML: 菜单poziome 标题如何将此列表/按钮居中？提前谢谢我减少了您的代码以简化它。我知道，导航仍然经常使用列表，但使用FlexBox、网格或内联块是不需要的。此外，如果它已经在导航中包装，则不需要将其包装到节中在本例中，我只是使用了您的链接并在其中放置了一个div来模拟一个

晚上好,，我有一个练习来做标题和下面的按钮。我们已经准备好了按钮的代码。我们的目标是把它放在一个边框中，在这些按钮上做一个标题，并将按钮和标题对齐到中心

我的代码现在看起来像这样

CSS

HTML:


菜单poziome
标题

如何将此列表/按钮居中？提前谢谢

我减少了您的代码以简化它。我知道，导航仍然经常使用列表，但使用FlexBox、网格或内联块是不需要的。此外，如果它已经在导航中包装，则不需要将其包装到节中

在本例中，我只是使用了您的链接并在其中放置了一个div来模拟一个按钮。它们被设置为inline block，而tehrefor表现为“text”（inline）。因此，可以轻松地与

文本对齐：居中

.naglowek{
文本对齐：居中；
边框：5px纯黑；
最小宽度：600px；
填充：10px；
}
#导航a分区{
显示：内联块；
文本对齐：居中；
字体大小：1.2米；
宽度：130px；
文字装饰：无；
颜色：浅绿色；
背景颜色：蓝色；
填充：10px 0px；
保证金：0px 1px 1px 0px；
边界：1件坚固的海军；
边界半径：3px；
-moz边界半径：5px；
-webkit边界半径：5px；
盒影：0px 2px 3px灰色；
-莫兹盒阴影：0px 2px 3px灰色；
-网络工具包盒阴影：0px 2px 3px灰色；
}
#导航a分区：悬停{
颜色：蓝色；
背景：水；
边框：1px纯蓝色；
}

标题
大家好，欢迎来到SO。请更具体一点，对准中心？垂直中心，水平中心？你希望它看起来如何（绘制想要的设计布局有帮助）。我放了一张图片，你可以看到我的确切意思@tacoshyy你也可以尝试用{code>li{display:inline block；}

而不是block来实现它。然后它们可以与

文本对齐：居中对齐
ul {
    float:left;
    width: 70%;
    padding: 0;
    margin: auto;
    list-style: none;
}

li a {
    display: block;
    float: left;
    text-align: center;
    font-size: 1.2em;
    width: 130px;
    text-decoration: none;
    color: aqua;
    background-color: blue;
    padding: 10px 0px;
    margin: 0px 1px 1px 0px;
    border: 1px solid navy;
    border-radius: 3px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    box-shadow: 0px 2px 3px gray;
    -moz-box-shadow: 0px 2px 3px gray;
    -webkit-box-shadow: 0px 2px 3px gray;
}

li a:hover {
    color: blue;
    background: aqua;
    border: 1px solid blue;
}

.naglowek {
    align-content: center;
    text-align: center;
    border: 5px solid black;
    padding-bottom: 50px;
    height: 130px;
}


<html>

<head>
    <link rel="stylesheet" href="style.css">
<title>Menu poziome</title>
</head>

<body>
<div class="naglowek">
    <h1>HEADER</h1>
<section>
<br>
<nav>
<ul>
<li><a href="1.html">SUBSITE 1</a></li>
<li><a href="2.html">SUBSITE 2</a></li>
<li><a href="3.html">SUBSITE 3</a></li>
<li><a href="4.html">SUBSITE 4</a></li>
</ul>
</nav>
</section>
</div>
</body>

</html>