在中心安排了很多塊（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）

回答

相關問題