在中心安排了很多块（html）

这是我的代码。在中心安排了很多块（html）

<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个块（连续）应该被安排在它的中心，但我不知道该怎么做。我尝试了一些不同的方式，但它作为一个柱子放在中心，而不是一排。

来源

2014-01-10 user3025598

添加您的HTML以及。 – Morpheus

首页||〜所有关于EDM〜 – user3025598

您是否知道您的HTML是无效的？ – Morpheus

这个怎么样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。

来源

2014-01-10 16:03:27

中心标记在HTML5中不受支持。你需要用CSS代替text-align：center ;.

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

...

.imgClass { 
    text-align: center; 
}

来源

2014-01-10 16:22:23

要居中对齐你需要在父元素上应用文本对齐属性的图像。浮动IMG虽然工作。 –

当然是啊。固定。 –

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

你想要么定义一个特定的宽度为股利或设置它的显示类型为“块”（您有），并将后边距和边距右边设置为“自动”，如帖子中的答案所示。

来源

2014-01-10 17:14:40 digijim

不需要分别放置保证金和保证金。你可以做margin：auto; –

在中心安排了很多块（html）

回答

相关问题