센터 LI in UL [HTML/CSS]

나는 그것을 올바르게 이해하지 못합니다. LI (목록)를 UL의 중심에 배치하려면 어떻게합니까?센터 LI in UL [HTML/CSS]

HTML

<ul> 
      <li><a href="#">Home<a/><li> 
      <li><a href="#">Over mij<a/><li> 
      <li><a href="#">PO's<a/><li> 
      <li><a href="#">Contact<a/><li> 
</ul>

CSS 미리

ul { 
width: 1000px; 
margin: 0 auto; 
padding: 0; 
list-style-type: none; 
margin-top: 30px; 
overflow: hidden; 
background-color: #333; 
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 
} 

ul li { 
    display: inline; 
} 
li a { 
    display: inline-block; 
    padding: 8px 11px; 
    margin-right: 10px; 
    color: #FFFFFF; 
    text-decoration: none; 
    text-align: center; 
    font-size: 18px; 
    line-height: 50px; 
} 
li a:hover { 
    background-color: #111; 
}

https://jsfiddle.net/3vd3hk8d/

감사합니다, MisterJ0J0

이

출처

2017-10-22 MisterJ0J0

에 text-align:center를 추가? 왜 "text-align : center;"를 적용하지 않을까요? ul? – AAGD

대단히 감사합니다! 나는 그것을 시도했다고 생각했지만, 나는 그렇지 않은 것으로 보입니다. – MisterJ0J0

당신은 그것을 할 수 있습니다 Flexbox이 같은 :

ul { 
 
    margin: 0 auto; 
 
    padding: 0; 
 
    list-style-type: none; 
 
    margin-top: 30px; 
 
    overflow: hidden; 
 
    background-color: #333; 
 
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 
 
    display: flex; /* added */ 
 
    justify-content: center; /* added */ 
 
} 
 

 
ul li { 
 
    display: inline; 
 
} 
 

 
li a { 
 
    display: inline-block; 
 
    padding: 8px 11px; 
 
    margin-right: 10px; 
 
    color: #FFFFFF; 
 
    text-decoration: none; 
 
    text-align: center; 
 
    font-size: 18px; 
 
    line-height: 50px; 
 
} 
 

 
li a:hover { 
 
    background-color: #111; 
 
}

<ul> 
 
    <li><a href="#">Home</a><li> 
 
    <li><a href="#">Over mij</a><li> 
 
    <li><a href="#">PO's</a><li> 
 
    <li><a href="#">Contact</a><li> 
 
</ul>

출처

2017-10-22 17:10:48 VXp

대단히 감사합니다! 나는 언젠가 구부릴 수 있어야한다고 생각합니다. : D – MisterJ0J0

당신은 방금 울 스타일링에

text-align:center;

를 추가 할 수 있습니다. 당신은 성취 할 것입니다.

ul { 
    margin: 0 auto; 
    padding: 0; 
    list-style-type: none; 
    margin-top: 30px; 
    overflow: hidden; 
    text-align:center; 
    background-color: #333; 
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 
    display: flex; /* added */ 
    justify-content: center; /* added */ 
}

그런 다음 앵커 오른쪽 가장자리를 원하는대로 연주하십시오.

출처

2017-10-22 17:20:57

대단히 감사합니다! 나는 그것을 시도했다고 생각했지만, 나는 그렇지 않은 것으로 보입니다. – MisterJ0J0

그냥 exacty 당신이 UL의 중심에 무엇을 의미합니까 ul

ul { 
 
    width: 1000px; 
 
    margin: 0 auto; 
 
    padding: 0; 
 
    list-style-type: none; 
 
    margin-top: 30px; 
 
    text-align: center; 
 
    overflow: hidden; 
 
    background-color: #333; 
 
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 
 
} 
 

 
ul li { 
 
    display: inline; 
 
} 
 

 
li a { 
 
    display: inline-block; 
 
    padding: 8px 11px; 
 
    margin-right: 10px; 
 
    color: #FFFFFF; 
 
    text-decoration: none; 
 
    text-align: center; 
 
    font-size: 18px; 
 
    line-height: 50px; 
 
} 
 

 
li a:hover { 
 
    background-color: #111; 
 
}

<ul> 
 
    <li><a href="#">Home</a></li> 
 
    <li><a href="#">Over mij</a></li> 
 
    <li><a href="#">PO's</a></li> 
 
    <li><a href="#">Contact</a></li> 
 
</ul>

출처

2017-10-22 17:22:00

대단히 감사합니다! 나는 그것을 시도했다고 생각했지만, 나는 그렇지 않은 것으로 보입니다. – MisterJ0J0

답변

관련 문제