UL 요소 내에서 목록 항목을 중앙에 배치하려면 어떻게합니까?

UL 요소 내에서 목록 항목을 중앙에 배치하려면 어떻게합니까?

---

추가 div 또는 요소를 사용하지 않고 ul 안에 목록 항목을 중앙에 배치하는 방법은 무엇입니까? 다음이 있습니다. 나는 text-align:center트릭을 할 것이라고 생각 했다. 나는 그것을 알아낼 수없는 것 같다.

<style>
ul {
    width:100%;
    background:red;
    height:20px;
    text-align:center;
}
li {
    display:block;
    float:left;
    background:blue;
    color:white;
    margin-right:10px;
}
</style>

<ul>
  <li>test</li>
  <li>test</li>
  <li>test</li>
  <li>test</li>
  <li>test</li>
</ul>

jsfiddle http://jsfiddle.net/3Ezx2/1/ 확인

---

쓰기 display:inline-block대신 float:left.

li {
        display:inline-block;
        *display:inline; /*IE7*/
        *zoom:1; /*IE7*/
        background:blue;
        color:white;
        margin-right:10px;
}

http://jsfiddle.net/3Ezx2/3/

---

li{
    display:table;
    margin:0px auto 0px auto;
}

작동합니다.

---

보다 현대적인 방법은 flexbox를 사용하는 것입니다.

ul{
  list-style-type:none;
  display:flex;
  justify-content: center;

}
ul li{
  display: list-item;
  background: black;
  padding: 5px 10px;
  color:white;
  margin: 0 3px;
}
div{
  background: wheat;
}

<div>
<ul>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
</ul>  

</div>

---

필요한 모든 것이 text-align: center;있는 것 같습니다.ul

---

나는 이전 에이 문제를 겪었고 때로는 패딩이 문제라는 것을 발견했습니다.

ul에서 패딩을 제거하면 인라인 블록으로 설정된 모든 li가 멋지게 중앙에 배치됩니다.

* {
	box-sizing: border-box;
}

ul {
	width: 120px;
	margin: auto;
	text-align: center;
	border: 1px solid black;
}

li {
	display: inline-block;
}

ul.no_pad {
	padding: 0;
}

p {
	margin: auto;
	text-align: center;
}

.break {
	margin: 50px 10px;
}

<div>  
		<p>With Padding (Default Style)</p>
            <ul class="with_pad">
                <li>x</li>
                <li>x</li>
                <li>x</li>
                <li>x</li>
            </ul>
		<div class="break"></div>
		<p>No Padding (Padding: 0)</p>
			<ul class="no_pad">
                <li>x</li>
                <li>x</li>
                <li>x</li>
                <li>x</li>
            </ul>
	<div>

이 같은 문제에 직면하는 사람에게 도움이되기를 바랍니다. :)

건배,

Jake

---

div 줄을 추가하고 트릭을 수행했습니다.

<div style="text-align:center">
<ul>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
</ul>
</div>

---

나는 당신에게 문제가 더 얇아졌습니다. 나는 이렇게 빠르며 지금까지 찾은 최고의 해결책입니다.

What the output looks like

Shows what the output of the code looks like The borders are just to show the spacing and are not needed.

---

Html:

    <div class="center">
      <ul class="dots">
        <span>
          <li></li>
          <li></li>
          <li></li>
        </span>
      </ul>
    </div>

CSS:

    ul {list-style-type: none;}
    ul li{
        display: inline-block;
        padding: 2px;
        border: 2px solid black;
        border-radius: 5px;}
    .center{
        width: 100%;
        border: 3px solid black;}
    .dots{
        padding: 0px;
        border: 5px solid red;
        text-align: center;}
    span{
        width: 100%;
        border: 5px solid blue;}

---

Not everything here is needed to center the list items.

You can cut the css down to this to get the same effect:

    ul {list-style-type: none;}
    ul li{display: inline-block;}
    .center{width: 100%;}
    .dots{
        text-align: center;
        padding: 0px;}
    span{width: 100%;}

---

---

Another way to do this:

<ul>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
</ul>

ul {
  width: auto;
  display: table;
  margin-left: auto;
  margin-right: auto;
}

ul li {
  float: left;
  list-style: none;
  margin-right: 1rem;
}

http://jsfiddle.net/f6qgf24m/

---

Neither text-align:center nor display:inline-block worked for me on their own, but combining both did:

ul {
  text-align: center;
}
li {
  display: inline-block;
}

---

ul {
    width: 100%;
    background: red;
    height: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}

li {
    background: blue;
    color: white;
    margin-right: 10px;
}

ReferenceURL : https://stackoverflow.com/questions/8641251/how-do-i-center-list-items-inside-a-ul-element