Question

这是我的代码。

<html>

<head><title>HOME||~All About EDM~</title>


</head>

<body >
<center><img src="edm1.jpg" alt="edm" width="950" height="250"></body></center>

<center>
<style type="text/css" >
ul
{
list-style-type:none;

margin:0;
padding:0;
overflow:hidden;
}
li
{
position:relative;
    left:18%;
float:left;
}
a:link,a:visited
{


display:block;
width:200px;
font-weight:bold;
color:#272525;
background-color:#DF01A5;
text-align:center;
padding:10px;
text-decoration:none;
text-transform:uppercase;
}
a:hover,a:active
{
background-color:#272525;
font-weight:bold;
color:#DF01A5;
text-align:center;
}

</style>
</center>

<center>
<ul>
<li><a href="home.html">Home</a></li>
<li><a href="genres.html">Genres</a></li>
<li><a href="photos.html">Photos</a></li>
<li><a href="info.html">Info</a></li>

</center>

</body>
</html>

有5个块（连续）应该排列在它的中心，但我不知道该怎么做。我尝试了一些不同的方法，但它作为一个列而不是一行。

Answer 1

这个fiddle

怎么样？

正常结构是：

<head>
<title>HOME||~All About EDM~</title>

<style type="text/css"></style>
</head>

<body>
<img src="edm1.jpg" alt="edm" width="950" height="250">


<ul>
<li><a href="home.html">Home</a></li>
<li><a href="genres.html">Genres</a></li>
<li><a href="photos.html">Photos</a></li>
<li><a href="info.html">Info</a></li>
</ul>


</body>
</html>

另外不要忘记添加doctype。

Answer 2

HTML5不支持中心标记。你需要用CSS替代它，而不是使用text-align：center;。

<div class = 'imgClass'>
    <img src="edm1.jpg" alt="edm" width="950" height="250">
</div>

...

.imgClass {
    text-align: center;
}

Answer 3

文本对齐不是推荐的图像居中方式（请参阅Center image using text-align center?）

你想要为div定义一个特定的宽度，或者将它的显示类型设置为“block”（你有），并将margin-left和margin-right设置为“auto”，如帖子中的答案所示

在中心安排许多街区（html）

3 个答案: