ฉันจะจัดกึ่งกลาง <ul> <li> เป็น div ได้อย่างไร


89

ฉันจะจัดกึ่งกลางรายการที่ไม่เรียงลำดับ<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>

คำตอบ:


140

ตั้งแต่ulและliองค์ประกอบdisplay: blockโดยเริ่มต้น - ให้พวกเขาอัตโนมัติอัตรากำไรขั้นต้นและความกว้างที่มีขนาดเล็กกว่าภาชนะของพวกเขา

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

หากคุณเปลี่ยนคุณสมบัติการแสดงผลหรือทำบางอย่างที่ลบล้างกฎการจัดตำแหน่งปกติ (เช่นการลอย) สิ่งนี้จะไม่ได้ผล


4
ถ้าสิ่งนี้ไม่ทำให้คุณมีความสุขสิ่งนี้อาจจะ: stackoverflow.com/questions/2865380/…
Bruiser

10
ความกว้างการตั้งค่า: อัตโนมัติ; และแสดง: อินไลน์บล็อก; จะช่วยให้ ul ของคุณทำงานเหมือนข้อความหนึ่งบรรทัด จากนั้นคุณสามารถใช้ text-align: center; บนองค์ประกอบหลัก นอกจากนี้ยังช่วยให้ ul ของคุณเติบโตและหดตัวเมื่อเนื้อหาภายในเปลี่ยนแปลงซึ่งตรงข้ามกับการมีความกว้างคงที่
i_a

@Chetabahana - คุณกำลังดูข้อความไม่ใช่องค์ประกอบ: jsfiddle.net/qwbexxog/3
Quentin

ใช้งานไม่ได้กับความละเอียดทั้งหมดศูนย์เฟล็กซ์ใช้งานได้
Srinivas08

164

ในการจัดตำแหน่ง 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ไปยังโค้ดด้านบน


นั่นเป็นปัญหาที่ฉันมีกับวิธีแก้ปัญหาอื่น ๆ มันจะใช้ไม่ได้กับองค์ประกอบ li ถ้าฉันเปลี่ยนมัน
Aram Kocharyan

ฉันใช้สิ่งนี้สำหรับ Bootstrap 3 nav และจำเป็นต้องเพิ่มลงfloat: none;ในไฟล์ul.
Dylan Valade


24

ขั้นตอน:

  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>

เราต้องเพิ่มระยะขอบมิฉะนั้นจะซ้อนกันตรวจสอบที่นี่jsfiddle.net/qwbexxog/4
Chetabahana

คำตอบนี้ช่วยฉันได้!
เฮือน

10

นี่เป็นวิธีที่ดีกว่าในการจัดตำแหน่งของ UL ภายในคอนเทนเนอร์ DIV ใด ๆ

โซลูชัน CSS นี้ไม่ใช้คุณสมบัติความกว้างและการลอย ลอย: ซ้ายและกว้าง: 70% จะทำให้คุณปวดหัวเมื่อคุณต้องทำซ้ำเมนูของคุณในหน้าต่างๆด้วยรายการเมนูที่แตกต่างกัน

แทนที่จะใช้ความกว้างเราใช้ช่องว่างภายในและระยะขอบเพื่อกำหนดช่องว่างรอบรายการข้อความ / เมนู นอกจากนี้แทนที่จะใช้ Float: Left ในองค์ประกอบ LI ให้ใช้ display: inline-block

เมื่อลอย LI ไปทางซ้ายคุณจะลอยเนื้อหาของคุณไปทางซ้ายอย่างแท้จริงจากนั้นคุณต้องใช้หนึ่งใน Hacks ที่กล่าวถึงข้างต้นเพื่อให้ 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;
}

6

อาจเป็นได้

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

หรือ

div li
{
text-align: center;
}

ขึ้นอยู่กับว่าควรมีลักษณะอย่างไร (หรือรวมสิ่งเหล่านั้น)


2
ตัวเลือกหลังจะไม่อยู่กึ่งกลางรายการเฉพาะเนื้อหาแบบอินไลน์เท่านั้น
Quentin

ถึงกระนั้นถ้า<li>ไม่ได้มีสไตล์ก็ดูเหมือนกัน
FP

4

ในการจัดกึ่งกลางวัตถุบล็อก (เช่นul) คุณต้องตั้งค่าความกว้างจากนั้นคุณสามารถตั้งค่าระยะขอบซ้ายและขวาเป็นอัตโนมัติ

ไปยังศูนย์เนื้อหาแบบอินไลน์ของวัตถุบล็อก (เช่นเนื้อหาแบบอินไลน์ของli) text-align: center;คุณสามารถตั้งค่าคุณสมบัติของ




1

น่าสนใจ แต่ลองสิ่งนี้ด้วยองค์ประกอบ li ที่ลอยอยู่ภายใน ul: ตัวอย่างที่นี่

ปัญหาตอนนี้: ul ต้องการความกว้างคงที่เพื่อให้นั่งตรงกลางได้ อย่างไรก็ตามเราต้องการให้มันสัมพันธ์กับความกว้างของคอนเทนเนอร์ (หรือไดนามิก) ระยะขอบ: 0 อัตโนมัติบน ul ไม่ทำงาน

วิธีที่ดีกว่าคือปล่อยรายการ UL / Li และใช้ตัวอย่างแนวทางอื่นที่นี่


0

หากคุณทราบความกว้างulคุณสามารถกำหนดระยะขอบของulto ได้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;
  }

0

นี่คือวิธีแก้ปัญหาที่ฉันพบ:

#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;
}

0

อีกทางเลือกหนึ่งคือ:

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

0

ฉันกำลังมองหากรณีเดียวกันและลองคำตอบทั้งหมดโดยเปลี่ยนความกว้างของ<li>.
น่าเสียดายที่ทุกคนล้มเหลวในการได้ระยะทางซ้ายและขวาของ<ul>กล่องเท่ากัน

คำตอบที่ใกล้เคียงที่สุดคือคำตอบนี้แต่จำเป็นต้องปรับเปลี่ยนความกว้างด้วยช่องว่างภายใน

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

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

เห็นผลดังต่อไปนี้ระยะห่างระหว่าง<li>ยังรวมถึง<ul>กล่องเหมือนกันป้อนคำอธิบายภาพที่นี่

คุณสามารถตรวจสอบได้ที่ jsFiddle นี้:
http://jsfiddle.net/qwbexxog/14/


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

-4

ใช้แท็กศูนย์ oldschool

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

:-)


คุณควรหลีกเลี่ยงการใช้นิพจน์ประเภทสไตล์ในมาร์กอัปโค้ด นั่นคือสิ่งที่ CSS สร้างขึ้นมาเพื่อ!
FP

1
ใช้งานได้ แต่โปรดทราบว่า: " centerองค์ประกอบนี้เลิกใช้แล้วใน HTML 4.01 และไม่รองรับใน XHTML 1.0 Strict DTD" จากw3schools.com/TAGS/tag_center.asp
okw

4
ถอนหายใจ W3Schools ให้ข้อมูลที่ไม่สมบูรณ์และไม่ถูกต้องตามปกติ เลิกใช้แล้วใน 4.0 ไม่ใช่ 4.01 และไม่ปรากฏในตัวแปรเข้มงวดใด ๆ (การแยก XHTML 1.0 เป็นตัวเลือกที่แปลก)
Quentin

ดังที่ได้กล่าวไว้ก่อนหน้านี้ถูกเลิกใช้ใน HTML 4.01 ... นั่นเป็นเพียงการปฏิบัติที่ไม่ดี ...
จอนนี่เฮย์เนส

2
ใช่เขาไม่ควรใช้แท็กแบบนี้ แต่นี่ไม่ใช่เหตุผลที่สมควรได้รับคำตอบเชิงลบ บางครั้งเราต้องการทางออกที่ดีที่สุด และสำหรับฉันคำตอบนี้เป็นบวก
workdreamer
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.