중앙에 많은 블록을 배열하십시오 (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 개 블록이 있습니다하지만 난 어떻게 그렇게 아무 생각이 없습니다. 나는 여러 가지 방법을 시도했지만 행렬이 아닌 중심부에 괄호로 들어갑니다. 이 fiddle

일반 구조에 대한

출처

2014-01-10 user3025598

HTML도 추가하십시오. 모든 EDM ~ 약 – Morpheus

홈페이지 || ~ – user3025598

당신이 당신의 HTML이 무효 인 것을 알고 있습니까? – Morpheus

무엇이다 :

<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>

는 또한 문서 타입을 추가하는 것을 잊지 마세요.

출처

2014-01-10 16:03:27

HTML5에서는 center 태그가 지원되지 않습니다. 대신 text-align : center;를 사용하여 CSS로 센터를 배치하고 싶을 것입니다.

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

...

.imgClass { 
    text-align: center; 
}

출처

2014-01-10 16:22:23

이미지를 가운데 정렬하려면 부모 요소에 text-align 속성을 적용해야한다. 그러나 img를 떠 다니는 것은 작동합니다. –

아 물론 맞습니다. 결정된. –

텍스트 정렬 이미지를 중앙에 권장되는 방법은 아니다 당신은 사업부에 대한 특정 폭을 정의하거나 그것의 설정 중 원하는

을 (Center image using text-align center? 참조) 표시 유형을 "차단"(보유하고 있음)하고, 여백 - 왼쪽 및 여백 - 오른쪽을 "자동"으로 설정하십시오.

출처

2014-01-10 17:14:40 digijim

margin-left와 margin-right를 별도로 둘 필요가 없습니다. 너는 다만 한계를 할 수 있는다 : 자동; –

중앙에 많은 블록을 배열하십시오 (html)

답변

관련 문제