วิธีจัดตำแหน่งตารางที่กึ่งกลางของ div ในแนวนอนและแนวตั้ง


134

เราสามารถตั้งค่าภาพเป็นภาพพื้นหลังได้<div>ดังนี้

<style>
    #test { 

        background-image: url(./images/grad.gif); 
        background-repeat: no-repeat;
        background-position: center center; 

        width:80%; 
        margin-left:10%; 
        height:200px; 
        background-color:blue;

    }

</style>

<div id="test"></div>

ฉันต้องการตั้งตารางที่กึ่งกลางของ<div>แนวนอนและแนวตั้ง มีการใช้โซลูชันข้ามเบราว์เซอร์CSSหรือไม่?

คำตอบ:


276

การจัดกึ่งกลางเป็นปัญหาที่ใหญ่ที่สุดอย่างหนึ่งใน CSS อย่างไรก็ตามมีเทคนิคบางอย่าง:

หากต้องการวางตารางในแนวนอนคุณสามารถตั้งค่าระยะขอบซ้ายและขวาเป็นอัตโนมัติ:

<style>
  #test {
    width:100%;
    height:100%;
  }
  table {
    margin: 0 auto; /* or margin: 0 auto 0 auto */
  }
</style>

หากต้องการจัดกึ่งกลางในแนวตั้งวิธีเดียวคือการใช้จาวาสคริปต์:

var tableMarginTop = Math.round( (testHeight - tableHeight) / 2 );
$('table').css('margin-top', tableMarginTop) # with jQuery
$$('table')[0].setStyle('margin-top', tableMarginTop) # with Mootools

vertical-align:middleเป็นไปไม่ได้เนื่องจากตารางเป็นบล็อกและไม่ใช่องค์ประกอบแบบอินไลน์

แก้ไข

นี่คือเว็บไซต์ที่รวมโซลูชันการจัดศูนย์ CSS: http://howtocenterincss.com/


7
โต๊ะโง่. ขอบคุณสิ่งนี้ (ระยะขอบ: 0 อัตโนมัติ) ช่วยฉันได้เช่นกัน
Cesar

1
ที่testHeightนี่คืออะไร?
Ajay Kulkarni

1
@AjayKulkarni ความสูงของ#testองค์ประกอบ ขอโทษสำหรับความสับสน.
ldiqual

1
ใช่ฉันคิดออก .... โปรดบรรจงjavascript, jQuery, AJAXฯลฯ เพื่อให้ผู้อื่นสามารถเข้าใจ
Ajay Kulkarni

1
สิ่งที่ฉันต้องการ! ฉันเล่นซอกับการพายเรือมาหลายชั่วโมงแล้ว!
chfw

28

นี่คือสิ่งที่ใช้ได้ผลสำหรับฉัน:

#div {
  display: flex;
  justify-content: center;
}

#table {
  align-self: center;
}

และสิ่งนี้จัดวางในแนวตั้งและแนวนอน


3
นี่ต้องเป็นคำตอบที่ดีที่สุด!
riopiedra

14

หากต้องการวางตำแหน่งกึ่งกลางแนวนอนคุณสามารถพูดwidth: 50%; margin: auto;ได้ เท่าที่ฉันรู้นั่นคือข้ามเบราว์เซอร์ สำหรับการจัดแนวแนวตั้งคุณสามารถลองใช้ได้vertical-align:middle;แต่อาจใช้ได้เฉพาะกับข้อความเท่านั้น มันคุ้มค่าที่จะลอง


7

เพียงแค่เพิ่มที่คุณmargin: 0 auto; tableไม่จำเป็นต้องเพิ่มคุณสมบัติใด ๆdiv

<div style="background-color:lightgrey">
 <table width="80%" style="margin: 0 auto; border:1px solid;text-align:center">
    <tr>
      <th>Name </th>
      <th>Country</th>
    </tr>
    <tr>
      <td>John</td>
      <td>US </td>
    </tr>
    <tr>
      <td>Bob</td>
      <td>India </td>
    </tr>
 </table>
<div>

หมายเหตุ: เพิ่มสีพื้นหลังให้กับ div เพื่อให้เห็นภาพการจัดแนวตารางให้อยู่ตรงกลาง


6

นอกจากนี้หากคุณต้องการจัดกึ่งกลางทั้งแนวนอนและแนวตั้ง - แทนที่จะมีการออกแบบโฟลว์ (ในกรณีเช่นนี้จะใช้วิธีแก้ปัญหาก่อนหน้านี้)คุณสามารถทำได้:

  1. ประกาศ div หลักเป็นabsoluteหรือrelativeตำแหน่ง (ฉันเรียกว่าcontent)
  2. ประกาศ div ภายในซึ่งจะยึดตาราง (ฉันเรียกว่าwrapper)
  3. ประกาศตารางตัวเองภายในwrapperdiv
  4. ใช้การแปลง CSS เพื่อเปลี่ยน "จุดลงทะเบียน" ของออบเจ็กต์ Wrapper เป็นศูนย์กลาง
  5. ย้ายวัตถุห่อหุ้มไปที่กึ่งกลางของวัตถุหลัก

#content {
  width: 5em;
  height: 5em;
  border: 1px solid;
  border-color: red;
  position: relative;
  }

#wrapper {
  width: 4em;
  height: 4em;
  border: 3px solid;
  border-color: black;
  position: absolute;
  left: 50%; top: 50%; /*move the object to the center of the parent object*/
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  /*these 5 settings change the base (or registration) point of the wrapper object to it's own center - so we align child center with parent center*/
  }

table {
  width: 100%;
  height: 100%;
  border: 1px solid;
  border-color: yellow;
  display: inline-block;
  }
<div id="content">
    <div id="wrapper">
        <table>
        </table>
    </div>
</div>

หมายเหตุ: คุณไม่สามารถกำจัด Wrapper div ได้เนื่องจากสไตล์นี้ใช้ไม่ได้กับตารางโดยตรงดังนั้นฉันจึงใช้ div เพื่อตัดมันและวางตำแหน่งในขณะที่ตารางไหลอยู่ภายใน div


5

คุณสามารถจัดกึ่งกลางกล่องได้ทั้งแนวตั้งและแนวนอนโดยใช้เทคนิคต่อไปนี้:

ภาชนะภายนอก:

  • ควรมี display: table;

ภาชนะด้านใน:

  • ควรมี display: table-cell;
  • ควรมี vertical-align: middle;
  • ควรมี text-align: center;

กล่องเนื้อหา:

  • ควรมี display: inline-block;

หากคุณใช้เทคนิคนี้เพียงแค่เพิ่มตารางของคุณ (พร้อมกับเนื้อหาอื่น ๆ ที่คุณต้องการจะไปด้วย) ลงในช่องเนื้อหา

การสาธิต :

body {
    margin : 0;
}

.outer-container {
    position : absolute;
    display: table;
    width: 100%;
    height: 100%;
    background: #ccc;
}

.inner-container {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

.centered-content {
    display: inline-block;
    background: #fff;
    padding : 20px;
    border : 1px solid #000;
}
<div class="outer-container">
   <div class="inner-container">
     <div class="centered-content">
        <em>Data :</em>
        <table>
            <tr>
                <th>Name</th>
                <th>Age</th>
            </tr>
            <tr>
                <td>Tom</td>
                <td>15</td>
            </tr>
            <tr>
                <td>Anne</td>
                <td>15</td>
            </tr>
            <tr>
                <td>Gina</td>
                <td>34</td>
            </tr>
        </table>
     </div>
   </div>
</div>

ดูซอนี้ด้วย !


1

ฉันค้นพบว่าฉันต้องรวม

body { width:100%; }

สำหรับ "margin: 0 auto" เพื่อทำงานกับตาราง

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