gpt4 book ai didi

css - 在网页上水平居中

转载 作者:行者123 更新时间:2023-11-28 06:52:54 25 4
gpt4 key购买 nike

我一直试图让一个标签在我的网页上水平居中,但我没有取得太大的成功。我还有其他几个使用标签居中的元素,它们完全按照应有的方式呈现。这可能是一个简单的修复,但如果是这样,它在过去几个小时里一直盯着我看。这是我正在使用的 CSS:

body {
background-color: #B0C4DE;
}
h1 {margin: auto;
text-align: center;
font-size: 200%;
}


h2 {margin: auto;
text-align: center;
font-size: 150%;
}

nav {
width: 550px;
margin: 0 auto;
}

nav ul ul {
display: none;
}

nav ul li:hover > ul {
display: block;
}

nav ul {
background: #efefef;
background: linear-gradient(top, #efefef 0%, #bbbbbb 100%);
background: -moz-linear-gradient(top, #efefef 0%, #bbbbbb 100%);
background: -webkit-linear-gradient(top, #efefef 0%,#bbbbbb 100%);
box-shadow: 0px 0px 2px rgba(0,0,0,0.15);
padding: 0 25px;
border-radius: 35px;
list-style: none;
position: relative;
display: inline-table;
}
nav ul:after {
content: ""; clear: both; display: block;
}

nav ul li {
float: left;
}
nav ul li:hover {
background: #4b545f;
background: linear-gradient(top, #4f5964 0%, #5f6975 40%);
background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%);
background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%);
}
nav ul li:hover a {
color: #fff;
}

nav ul li a {
display: block; padding: 15px 15px;
color: #757575; text-decoration: none;
}

nav ul ul {
background: #5f6975; border-radius: 0px; padding: 0;
position: absolute; top: 100%;
}
nav ul ul li {
float: none;
border-top: 5px solid #6b727c;
border-bottom: 1px solid #575f6a;
position: relative;
}
nav ul ul li a {
padding: 5px 3px;
color: #fff;
}
nav ul ul li a:hover {
background: #4b545f;
}

nav ul ul ul {
position: absolute; left: 100%; top:0;
}

table, td, th {
border: 1px solid green;
text-align: center;
padding: 1px;
}

th {
background-color: green;
color: white;
}
table
{
margin-left: auto;
margin-right: auto;
}


iframe {display: block; /*new*/
margin: auto;
border: none; /*revised*/
width: 800px;
height: 200px;}

div.center p {text-align: center;
} /*new*/

<!DOCTYPE HTML>
<html lang = "en">
<head>
<link rel="stylesheet" type="text/css" href="mystylesheet.css">
<title>Tech Order Department.html</title>
<meta charset = "UTF-8" />


<style>

div {
text-align: justify;
}


.section {
margin-left: auto;
margin-right: auto;
width: 60%;
}
</style>

</head>

<body>

<h1>Logistics</h1>
<br>
<h2>Tech Order Department</h2>

<div class="center">

<nav id=wrap>

<nav>
<ul>
<li><a href="http://www.oldgamer60.com/Project/Home.php">Home</a></li>
<li><a href="http://www.oldgamer60.com/Project/Staff.php">Our Staff</li></a></li>
<li><a href="http://www.oldgamer60.com/Project/Projects.php">Projects</a></li>

</ul>
</nav>
</nav>

</div>
<br>

<div>

<div class="section">
<p>YAI has been extensively involved in the writing of technical manuals, provisioning and Modification Work Orders (MWOs) for all type of military aviation and ground systems. YAI logistic services have included development and assessment of logistical requirements, preparation of integrated logistic products and field service support for military aviation, missile and ground combat systems.</>

<p>YAI's Logistic Capabilities include:</p>

<ul>

<li>Technical Manual Writing</li>

<li>Technical Manual Change Pages</li>

<li>Manual Illustrating</li>

<li>MWO Writing</li>

<li>Tagging of Data for Use in Electronic Manuals</li>

<li>Provisioning</li>

<li>Logistical Analyses and Assessments</li>

</ul>

</div>

</div>

</body>

</html>

最佳答案

<nav> 水平居中,它是 <ul><nav>里面这不是。

这似乎是由于:

nav ul {
...
display: inline-table;
}

相反,给出 nav ul元素a width并将其声明为 block 级(而不是内联),除了指定 auto作为 margin-left 的值和 margin-right :

nav ul {
display: block;
margin: 18px auto;
width: 235px;
}

关于css - 在网页上水平居中 <nav> 标签,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33676883/

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