我试图使页面上的链接左对齐但在页面上居中。我该怎么做呢？我尝试了很多方法，并在谷歌上搜索了更多我编码时间不长的方法，这正在成为一场真正的斗争。
My site
这是我的 HTML 代码
<!DOCTYPE html>
<html>
<head>
<Title> Conspiracy Theories </Title>
</head>
<link href="mystyle.css" type="text/css" rel="stylesheet">
<Body>
<img src="http://media.moddb.com/images/groups/1/9/8589/tin_foil_hat.gif" />
<a <link href="WP1.html" type="text/html" style="text-decoration:none" rel="html"> EmDrive is being tested on the X-37B</a></li>
<a <link href="WP2.html" type="text/html" style="text-decoration:none" rel="html"> Diesel Submarines</a></li>
<a <link href="WP3.html" type="text/html" style="text-decoration:none" rel="html">Lethal B-21 vs. B-2 Stealth Bomber</a></li>
<a <link href="WP4.html" type="text/html" style="text-decoration:none" rel="html"> Air Force Wants a New Fighter</a></li>
<a <link href="WP5.html" type="text/html" style="text-decoration:none" rel="html"> King Tiger Tank : Super Weapon or Super Myth?</a></li>
<a <link href="WP6.html" type="text/html" style="text-decoration:none" rel="html"> Ground Combat Vehicle (GCV)</a></li>
<a <link href="WP7.html" type="text/html" style="text-decoration:none" rel="html"> 3 service men killed</a></li>
<a <link href="WP8.html" type="text/html" style="text-decoration:none" rel="html"> US intercepts 2 Russian bombers</a></li>
<a <link href="WP9.html" type="text/html" style="text-decoration:none" rel="html"> World reacts to US strikes</a></li>
</div>
</div>
</Body>
<h1> </h1>
The css
img {
padding-bottom: 30px;
display: block;
margin: auto;
width: 10%;
}
a {
line-height: 1.7em;
display:block;
margin-left: auto;
text-align: center;
color: black;
}
body {
background-image:
url("https://presentations.inxpo.com/SharedContent/VX/images/background-
shell.jpg");
}
这是一个工作fiddle我添加了一个容器，它是导航项目的宽度display: inline-block;财产。该 div 被包裹并居中text-align: center;财产。我改变了a文本从中心 > 左对齐，使 div 内左对齐。我也会validateHTML，因为看起来您的代码中存在一些错误。
查看此问题以获取有关良好 HTML 样板的更多信息。一个好的 HTML 骨架
如果您想稍微清理一下代码，也请查看此页面脏标记
HTML
<!DOCTYPE html>
<html>
<head>
<title>
Conspiracy Theories
</title>
<link href="mystyle.css" rel="stylesheet" type="text/css">
</head>
<body>
<img src="http://media.moddb.com/images/groups/1/9/8589/tin_foil_hat.gif">
<div class="text-center">
<div class="display-inline">
<a><link href="WP1.html" rel="html" style="text-decoration:none" type="text/html">EmDrive is being tested on the X-37B</a>
<a><link href="WP2.html" rel="html" style="text-decoration:none" type="text/html">Diesel Submarines</a>
<a><link href="WP3.html" rel="html" style="text-decoration:none" type="text/html">Lethal B-21 vs. B-2 Stealth Bomber</a>
<a><link href="WP4.html" rel="html" style="text-decoration:none" type="text/html">Air Force Wants a New Fighter</a>
<a><link href="WP5.html" rel="html" style="text-decoration:none" type="text/html">King Tiger Tank : Super Weapon or Super Myth</a> <a><link href="WP6.html" rel="html" style="text-decoration:none" type="text/html">Ground Combat Vehicle (GCV)</a>
<a><link href="WP7.html" rel="html" style="text-decoration:none" type="text/html">3 service men killed</a>
<a><link href="WP8.html" rel="html" style="text-decoration:none" type="text/html">US intercepts 2 Russian bombers</a>
<a><link href="WP9.html" rel="html" style="text-decoration:none" type="text/html">World reacts to US ></a>
</div>
</div>
</body>
</html>
CSS
.text-center {
text-align: center;
}
.display-inline {
display: inline-block;
}
a {
text-align: left;
}
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
