<ul> <li>를 div에 중앙에 배치하려면 어떻게해야합니까?

정렬되지 않은 목록을 <li>고정 너비로 중앙에 배치하려면 어떻게 div해야합니까?

<table width="100%">
  <tbody>
  <tr>
    <td width="41%"><img src="/web/20100104192317im_/http://www.studioteknik.com/html2/html/images/hors-service.jpg" width="400" height="424"></td>
    <td width="59%"><p align="left">&nbsp;</p>
      <h1 align="left">StudioTeknik.com</h1>
      <p><br align="left">
        <strong>Marc-André Ménard</strong></p>
      <ul>
        <li>Photographie digitale</li>
        <li>Infographie </li>
        <li>Débug et IT (MAC et PC)</li>
        <li> Retouche </li>
        <li>Site internet</li>
        <li>Graphisme</li>
      </ul>
      <p align="left"><span class="style1"><strong>Cellulaire en suisse : </strong></span><a href="#">+41 079 573 48 99</a></p>
      <p align="left"><strong class="style1">Skype : </strong> <a href="#">menardmam</a></p>
    <p align="left"><strong class="style1">Courriel :</strong><a href="https://web.archive.org/web/20100104192317/mailto:menardmam@hotmail.com">    info@studioteknik.com</a></p></td>
  </tr>
  </tbody>
</table>

ul및 li요소는 display: block기본적으로 사용 되므로 컨테이너보다 작은 너비와 자동 여백을 제공합니다 .

ul {
    width: 70%;
    margin: auto;
}

표시 속성을 변경했거나 일반 정렬 규칙을 재정의하는 작업 (예 : 부동)을 수행 한 경우에는 작동하지 않습니다.

ul을 중앙에 배치하고 li 요소도 중앙에 배치 하고 ul의 너비를 동적으로 변경하려면 display : inline-block; 중앙 div로 감싸십시오.

<style type="text/css">
    .wrapper {
        text-align: center;
    }
    .wrapper ul {
        display: inline-block;
        margin: 0;
        padding: 0;
        /* For IE, the outcast */
        zoom:1;
        *display: inline;
    }
    .wrapper li {
        float: left;
        padding: 2px 5px;
        border: 1px solid black;
    }
</style>

<div class="wrapper">
    <ul>
        <li>Three</li>
        <li>Blind</li>
        <li>Mice</li>
    </ul>
</div>

최신 정보

다음은 위 코드에 대한 jsFiddle 링크 입니다.

나는 flexbox를 좋아합니다.

ul {
  justify-content: center;
  display: flex;
}

단계 :

1. 쓰기 style="text-align:center;"부모 div의ul
2. 쓰기 style="display:inline-table;"에ul
3. 쓰기 style="display:inline;"에li

또는 사용

<div class="menu">
 <ul>
   <li>item 1 </li>
   <li>item 2 </li>
   <li>item 3 </li>
 </ul>
</div>

<style>
 .menu { text-align: center; }
 .menu ul { display:inline-table; }
 .menu li { display:inline; }
</style>

이것은 모든 DIV 컨테이너 내부에 UL을 중앙에 배치하는 더 좋은 방법입니다.

이 CSS 솔루션은 Width 및 Float 속성을 사용하지 않습니다. Float : Left 및 Width : 70 %는 다른 메뉴 항목이있는 다른 페이지에 메뉴를 복제해야 할 때 골칫거리가됩니다.

너비를 사용하는 대신 패딩과 여백을 사용하여 텍스트 / 메뉴 항목 주위의 공간을 결정합니다. 또한 LI 요소에서 Float : Left를 사용하는 대신 display : inline-block을 사용하십시오.

LI를 왼쪽으로 띄우면 말 그대로 콘텐츠를 왼쪽으로 띄운 다음 위에서 언급 한 해킹 중 하나를 사용하여 UL을 중앙에 배치해야합니다. Display : inline-block은 Float 속성을 생성합니다 (일종). LI 요소를 가져 와서 서로 나란히 놓이는 블록 요소로 변환합니다 (부동 아님).

반응 형 디자인과 Bootstrap 또는 Foundation과 같은 프레임 워크를 사용하면 콘텐츠를 플로팅하고 중앙에 배치하려고 할 때 문제가 발생합니다. 몇 가지 기본 제공 클래스가 있지만 항상 처음부터 수행하는 것이 좋습니다. 이 솔루션은 동적 메뉴 (예 : Adobe Business Catalyst 메뉴 시스템)에 훨씬 적합합니다.

이 자습서에 대한 참조는 http://html-tuts.com/center-div-image-table-ul-inside-div/ 에서 찾을 수 있습니다 .

HTML

<div class="container">
        <ul>
            <li><a href="#">Button</a></li>
            <li><a href="#">Button</a></li>
            <li><a href="#">Button</a></li>
            <li><a href="#">Button</a></li>
            <li><a href="#">Button</a></li>
        </ul>
    </div>

CSS

.container {
    text-align: center;
    border: 1px solid green;
}
.container ul {
    border: 2px solid red;
    display: inline-block;
    margin: 10px 0;
    padding: 2px;
}
.container li {
    display: inline-block;
}
.container li a {
    display: inline-block;
    background: #444;
    color: #FFF;
    padding: 5px;
    text-decoration: none;
}

둘 중 하나 일 수 있습니다

div ul
{
 width: [INSERT FIXED WIDTH]
 margin: 0 auto;
}

또는

div li
{
text-align: center;
}

어떻게 생겼는지 (또는 결합)

블록 개체 (예 :)를 가운데 ul에 맞추려면 너비를 설정 한 다음 해당 개체의 왼쪽 및 오른쪽 여백을 자동으로 설정할 수 있습니다.

블록 객체의 인라인 내용 (예 :의 인라인 내용 li) 을 중앙에 배치하려면 css 속성을 설정할 수 있습니다 text-align: center;.

시험

div#divID ul {margin:0 auto;}

그냥 추가 text-align: center;당신에게 <ul>. 문제 해결됨.

흥미롭지 만 ul 내부에 떠 다니는 li 요소로 이것을 시도 하십시오 : 여기 예제

이제 문제는 ul이 실제로 중앙에 앉기 위해 고정 된 너비가 필요합니다. 그러나 우리는 컨테이너 너비 (또는 동적)와 관련하여 그것을 원합니다. margin : 0 auto on the ul 작동하지 않습니다.

더 나은 방법은 UL / Li 목록을 버리고 여기 에서 다른 접근 방식 예제를 사용하는 것입니다.

너비를 알고 있다면 ul간단히 여백을 설정할 수 있습니다.ul 로를0 auto;

이것은 ul포함하는 div의 중간에 정렬됩니다.

예:

HTML :

<div id="container">
 <ul>
  <li>Item1</li>
  <li>Item2</li>
 </ul>
<div>

CSS :

  #container ul{
    width:300px;
    margin:0 auto;
  }

내가 찾을 수있는 해결책은 다음과 같습니다.

#wrapper {
  float:right;
  position:relative;
  left:-50%;
  text-align:left;
}
#wrapper ul {
  list-style:none;
  position:relative;
  left:50%;
}

#wrapper li{
  float:left;
  position:relative;
}

또 다른 옵션은 다음과 같습니다.

HTML

<nav>
  <ul class = "main-nav"> 
   <li> Productos </li>
   <li> Catalogo </li>
   <li> Contact </li>  
   <li> Us </li>
  </ul>
</nav>    

CSS :

nav {
  text-align: center;
}

nav .main-nav li {
  float: left;
  width: 20%;
  margin-right: 5%;
  font-size: 36px;
  text-align: center;
}

나는 같은 경우를 찾고 있었고 너비를 변경하여 모든 답변을 시도했습니다 <li>.
불행히도 모두 <ul>상자 의 왼쪽과 오른쪽에서 동일한 거리를 얻지 못했습니다 .

가장 가까운 일치는 이 답변 이지만 패딩으로 너비 변경 을 조정 해야합니다.

.container ul {
    ...
    padding: 10px 25px;
}

.container li {
  ...
  width: 100px;
}

아래 결과를 참조하십시오 . 상자 <li>까지의 모든 거리는 <ul>동일합니다.

이 jsFiddle에서 확인할 수 있습니다 :
http://jsfiddle.net/qwbexxog/14/

<div id="container">
  <table width="100%" height="100%">
    <tr>
      <td align="center" valign="middle">
        <ul>
          <li>item 1</li>
          <li>item 2</li>
          <li>item 3</li>
        </ul>
      </td>
    </tr>
  </table>
</div>

oldschool 센터 태그 사용

<div> <center> <ul> <li>...</li> </ul></center> </div>

:-)