ฉันมีปัญหาเมื่อฉันพยายามจัดกึ่งกลาง "บล็อก" ผลิตภัณฑ์ div เพราะฉันไม่รู้ความกว้าง div ก่อนล่วงหน้า ใครมีทางออก?

อัปเดต: ปัญหาที่ฉันมีคือฉันไม่รู้ว่าจะแสดงผลิตภัณฑ์จำนวนเท่าใดฉันสามารถมีผลิตภัณฑ์ 1, 2 หรือ 3 ตัวฉันสามารถจัดให้อยู่ตรงกลางได้ถ้ามันเป็นเลขที่ตายตัวเพราะฉันรู้ว่าความกว้างของพ่อแม่ div, ฉันไม่ทราบว่าจะทำอย่างไรเมื่อเนื้อหาเป็นแบบไดนามิก

.product_container {
  text-align: center;
  height: 150px;
}

.products {
  height: 140px;
  text-align: center;
  margin: 0 auto;
  clear: ccc both; 
}
.price {
  margin: 6px 2px;
  width: 137px;
  color: #666;
  font-size: 14pt;
  font-style: normal;
  border: 1px solid #CCC;
  background-color:	#EFEFEF;
}

<div class="product_container">
  <div class="products" id="products">
    <div id="product_15">
      <img src="/images/ecommerce/card_default.png">
      <div class="price">R$ 0,01</div>
    </div>

    <div id="product_15">
      <img src="/images/ecommerce/card_default.png">
      <div class="price">R$ 0,01</div>
    </div>   

    <div id="product_15">
      <img src="/images/ecommerce/card_default.png">
      <div class="price">R$ 0,01</div>
    </div>
  </div>
</div>

อัปเดต 27 ก.พ. 2558:คำตอบเดิมของฉันยังคงได้รับการโหวต แต่ตอนนี้ปกติฉันจะใช้วิธีการของ @ bobince แทน

.child { /* This is the item to center... */
  display: inline-block;
}
.parent { /* ...and this is its parent container. */
  text-align: center;
}

โพสต์ต้นฉบับของฉันเพื่อวัตถุประสงค์ทางประวัติศาสตร์:

คุณอาจต้องการลองวิธีนี้

<div class="product_container">
    <div class="outer-center">
        <div class="product inner-center">
        </div>
    </div>
    <div class="clear"/>
</div>

นี่คือรูปแบบการจับคู่:

.outer-center {
    float: right;
    right: 50%;
    position: relative;
}
.inner-center {
    float: right;
    right: -50%;
    position: relative;
}
.clear {
    clear: both;
}

JSFiddle

แนวคิดในที่นี้คือคุณมีเนื้อหาที่คุณต้องการจัดกึ่งกลางในสอง divs ส่วนนอกและส่วนด้านใน คุณลอยทั้ง divs เพื่อให้ความกว้างลดลงโดยอัตโนมัติเพื่อให้พอดีกับเนื้อหาของคุณ ถัดไปคุณควรวาง div ด้านนอกด้วยขอบด้านขวาตรงกึ่งกลางของคอนเทนเนอร์ สุดท้ายคุณควรวาง div ในทิศทางตรงกันข้ามโดยครึ่งหนึ่งของความกว้างของตัวเอง (ที่จริงแล้วความกว้างของ div ด้านนอก แต่เท่ากัน) ท้ายที่สุดแล้วจะจัดเนื้อหาไว้ในภาชนะใด ๆ ก็ตาม

คุณอาจต้อง div ที่ว่างเปล่าในตอนท้ายถ้าคุณขึ้นอยู่กับเนื้อหา "ผลิตภัณฑ์" ของคุณเพื่อปรับขนาดความสูงสำหรับ "product_container"

องค์ประกอบที่มี 'display: block' (ตามค่าเริ่มต้นคือ div) มีความกว้างที่กำหนดโดยความกว้างของคอนเทนเนอร์ คุณไม่สามารถสร้างความกว้างของบล็อกได้ขึ้นอยู่กับความกว้างของเนื้อหา (ย่อขนาดให้พอดี)

(ยกเว้นบล็อกที่เป็น 'float: left / right' ใน CSS 2.1 แต่ไม่ได้ใช้สำหรับการจัดกึ่งกลาง)

คุณสามารถตั้งค่าคุณสมบัติ 'display' เป็น 'inline-block' เพื่อเปลี่ยนบล็อกให้เป็นออบเจ็กต์ที่ย่อขนาดได้ซึ่งสามารถควบคุมได้โดยคุณสมบัติการจัดแนวข้อความของพาเรนต์ แต่การสนับสนุนเบราว์เซอร์นั้นขาด ๆ หาย ๆ คุณสามารถหลีกเลี่ยงได้โดยใช้แฮ็ก (เช่นดู -moz-inline-stack) หากคุณต้องการใช้วิธีนั้น

อีกวิธีที่จะไปคือตาราง สิ่งนี้อาจจำเป็นเมื่อคุณมีคอลัมน์ที่ไม่ทราบความกว้างล่วงหน้า ฉันไม่สามารถบอกได้ว่าคุณกำลังพยายามทำอะไรจากโค้ดตัวอย่าง - ไม่มีสิ่งใดที่ชัดเจนที่จะต้องมีบล็อกที่ย่อขนาด - แต่รายการของผลิตภัณฑ์อาจถูกพิจารณาเป็นตาราง

[PS อย่าใช้ 'pt' สำหรับขนาดแบบอักษรบนเว็บ 'px' มีความน่าเชื่อถือมากกว่าถ้าคุณต้องการข้อความที่มีขนาดคงที่มิฉะนั้นหน่วยที่เกี่ยวข้องเช่น '%' จะดีกว่า และ“ ชัดเจน: ccc ทั้งสอง” - ตัวพิมพ์ผิด?]

.center{
   text-align:center; 
}

.center > div{ /* N.B. child combinators don't work in IE6 or less */
   display:inline-block;
}

JSFiddle

เบราว์เซอร์ส่วนใหญ่รองรับdisplay: table;กฎ CSS นี่เป็นเคล็ดลับที่ดีในการจัดวาง div ไว้ในคอนเทนเนอร์โดยไม่ต้องเพิ่ม HTML พิเศษหรือใช้สไตล์ที่มีข้อ จำกัด กับคอนเทนเนอร์ (เช่นtext-align: center;ซึ่งจะรวมเนื้อหาอินไลน์อื่น ๆ ทั้งหมดไว้ในคอนเทนเนอร์) ในขณะเดียวกันก็รักษาความกว้างแบบไดนามิกสำหรับ div ที่มีอยู่:

HTML:

<div class="container">
  <div class="centered">This content is centered</div>
</div>

CSS:

.centered { display: table; margin: 0 auto; }

.container {
  background-color: green;
}
.centered {
  display: table;
  margin: 0 auto;
  background-color: red;
}

<div class="container">
  <div class="centered">This content is centered</div>
</div>

อัปเดต (2015-03-09):

วิธีที่เหมาะสมในการทำเช่นนี้ในวันนี้คือการใช้กฎ flexbox สนับสนุนเบราว์เซอร์ถูก จำกัด นิด ๆ หน่อย ๆ ( สนับสนุนตาราง CSS VS สนับสนุน flexbox ) แต่วิธีนี้ยังช่วยให้สิ่งอื่น ๆ อีกมากมายและเป็นกฎ CSS เฉพาะสำหรับประเภทของพฤติกรรมนี้:

HTML:

<div class="container">
  <div class="centered">This content is centered</div>
</div>

CSS:

.container {
  display: flex;
  flex-direction: column; /* put this if you want to stack elements vertically */
}
.centered { margin: 0 auto; }

.container {
  display: flex;
  flex-direction: column; /* put this if you want to stack elements vertically */
  background-color: green;
}
.centered {
  margin: 0 auto;
  background-color: red;
}

<div class="container">
  <div class="centered">This content is centered</div>
</div>

หกวิธีในการดูแลแมว:

ปุ่มที่หนึ่ง:ประเภทใดก็ตามdisplay: blockจะถือว่าความกว้างของพาเรนต์เต็ม (ยกเว้นรวมกับfloatหรือเป็นdisplay: flexผู้ปกครอง) จริง ตัวอย่างที่ไม่ดี

ปุ่ม 2: การดำเนินการdisplay: inline-blockจะนำไปสู่ความกว้างอัตโนมัติ (มากกว่าเต็ม) จากนั้นคุณสามารถ Center โดยใช้ในการป้องกันการตัดtext-align: center น่าจะเป็นวิธีที่ง่ายที่สุดและเข้ากันได้อย่างกว้างขวางที่สุดแม้จะมีเบราว์เซอร์ 'เหล้าองุ่น' ...

.wrapTwo
  text-align: center;
.two
  display: inline-block; // instantly shrinks width

ปุ่ม 3: ไม่จำเป็นต้องใส่อะไรลงบนแผ่นปิด ดังนั้นนี่อาจเป็นทางออกที่หรูหราที่สุด ยังใช้งานได้ในแนวตั้ง (การรองรับเบราว์เซอร์สำหรับ transtlate นั้นดีพอ (≥IE9)ทุกวันนี้ ... )

position: relative;
display: inline-block; // instantly shrinks width
left: 50%;
transform: translateX(-50%);

Btw: นอกจากนี้ยังเป็นวิธีที่ดีในการจัดบล็อกความสูงที่ไม่ทราบแนวตั้งไว้ตรงกลาง

ปุ่ม 4: การ วางตำแหน่งที่แน่นอน เพียงให้แน่ใจว่าได้จองความสูงเพียงพอในเสื้อคลุมเนื่องจากไม่มีใครอื่น (ทั้ง clearfix หรือ implicit ... )

.four
  position absolute
  top 0
  left 50%
  transform translateX(-50%)
.wrapFour
  position relative // otherwise, absolute positioning will be relative to page!
  height 50px // ensure height
  background lightgreen // just a marker

ปุ่ม 5: โฟลต (ซึ่งนำองค์ประกอบระดับบล็อกไปสู่ความกว้างแบบไดนามิก) และการเลื่อนแบบสัมพัทธ์ แม้ว่าฉันไม่เคยเห็นสิ่งนี้ในป่า บางทีอาจมีข้อเสีย ...

.wrapFive
  &:after // aka 'clearfix'
    content ''
    display table
    clear both

.five  
  float left
  position relative
  left 50%
  transform translateX(-50%)

อัปเดต: ปุ่ม 6: และทุกวันนี้คุณสามารถใช้ flex-box ได้เช่นกัน หมายเหตุสไตล์นั้นใช้กับ wrapper ของวัตถุกึ่งกลาง

.wrapSix
  display: flex
  justify-content: center

→รหัสที่มาแบบเต็ม (ไวยากรณ์สไตลัส)

ฉันพบโซลูชันที่สง่างามยิ่งขึ้นโดยรวม "inline-block" เพื่อหลีกเลี่ยงการใช้ float และ hacky clear: ทั้งคู่ มันยังคงต้องใช้ div ที่อยู่ติดกันซึ่งไม่ได้มีความหมายมาก แต่ใช้งานได้ ...

div.outer{
    display:inline-block;
    position:relative;
    left:50%;
}

div.inner{
    position:relative;
    left:-50%;
}

หวังว่ามันจะช่วย!

<div class="outer">
   <div class="target">
      <div class="filler">
      </div>
   </div>
</div>

.outer{
   width:100%;
   height: 100px;
}

.target{
   position: absolute;
   width: auto;
   height: 100px;
   left: 50%;
   transform: translateX(-50%);
}

.filler{
   position:relative;
   width:150px;
   height:20px;
}

หากองค์ประกอบเป้าหมายอยู่ในตำแหน่งที่แน่นอนคุณสามารถจัดตำแหน่งให้อยู่กึ่งกลางได้โดยเลื่อนไปที่ 50% ในทิศทางเดียว ( left: 50%) แล้วเปลี่ยนเป็น 50% ในทิศทางตรงกันข้าม ( transform:translateX(-50%)) สิ่งนี้ใช้ได้โดยไม่กำหนดความกว้างขององค์ประกอบเป้าหมาย (หรือด้วยwidth:auto) ตำแหน่งขององค์ประกอบหลักสามารถเป็นแบบคงที่สัมบูรณ์สัมพัทธ์หรือคงที่ได้

ตามค่าเริ่มต้นdivองค์ประกอบจะแสดงเป็นองค์ประกอบบล็อกดังนั้นจึงมีความกว้าง 100% ทำให้อยู่ตรงกลางโดยไม่มีความหมาย ที่แนะนำโดย Arief คุณต้องระบุwidthและจากนั้นคุณสามารถใช้autoเมื่อระบุในการสั่งซื้อศูนย์margindiv

นอกจากนี้คุณยังสามารถบังคับdisplay: inlineได้ แต่จากนั้นคุณจะมีบางอย่างที่ค่อนข้างคล้ายกับspanแทนที่จะเป็น a divดังนั้นมันจึงไม่สมเหตุสมผลนัก

สิ่งนี้จะอยู่ตรงกลางองค์ประกอบเช่นรายการที่ได้รับคำสั่งหรือรายการที่ไม่เรียงลำดับหรือองค์ประกอบใด ๆ เพียงแค่ห่อมันด้วย Div ด้วยคลาสของ outerElement และให้องค์ประกอบภายในของ classElement

คลาสของ outerelement บัญชีสำหรับ IE, Mozilla เก่าและเบราว์เซอร์ที่ใหม่กว่า

 .outerElement {
        display: -moz-inline-stack;
        display: inline-block;
        vertical-align: middle;
        zoom: 1;
        position: relative;
        left: 50%;
    }

.innerElement {
    position: relative;
    left: -50%;
} 

ใช้ flexbox css3 กับ justify-content: center;

    <div class="row">
         <div class="col" style="background:red;">content1</div>
          <div class="col" style="">content2</div>
    </div>


.row {
    display: flex; /* equal height of the children */
    height:100px;
    border:1px solid red;
    width: 400px;
    justify-content:center;
}

ความผันแปรเล็กน้อยในคำตอบของ Mike M. Lin

หากคุณเพิ่มoverflow: auto;(หรือhidden) ลงไปdiv.product_containerคุณไม่จำเป็นต้องdiv.clearใช้

สิ่งนี้ได้มาจากบทความนี้ -> http://www.quirksmode.org/css/clearing.html

นี่คือ HTML ที่ถูกแก้ไข:

<div class="product_container">
    <div class="outer-center">
        <div class="product inner-center">
        </div>
    </div>
</div>

และนี่คือ CSS แก้ไข:

.product_container {
  overflow: auto;
  /* width property only required if you want to support IE6 */
  width: 100%;
}

.outer-center {
  float: right;
  right: 50%;
  position: relative;
}

.inner-center {
  float: right;
  right: -50%;
  position: relative;
}

เหตุผลทำไมมันดีกว่าไม่มีdiv.clear(นอกเหนือจากที่รู้สึกผิดกับองค์ประกอบที่ว่างเปล่า) คือการกำหนดระยะขอบที่สูงเกินไปของ Firefox

ตัวอย่างเช่นถ้าคุณมี html นี้:

<div class="product_container">
    <div class="outer-center">
        <div class="product inner-center">
        </div>
    </div>
    <div style="clear: both;"></div>
</div>
<p style="margin-top: 11px;">Some text</p>

จากนั้นใน Firefox (8.0 ที่จุดของการเขียน) คุณจะเห็น11pxอัตรากำไรขั้นต้นก่อน product_containerสิ่งที่แย่กว่านั้นคือคุณจะได้รับแถบเลื่อนแนวตั้งสำหรับทั้งหน้าแม้ว่าเนื้อหาจะเข้ากับขนาดของหน้าจอ

ลอง css และมาร์กอัปใหม่นี้

นี่คือ HTML ที่ถูกแก้ไข:

<div class="product_container">
<div class="products" id="products">
   <div id="product_15" class="products_box">
       <img src="/images/ecommerce/card_default.png">
       <div class="price">R$ 0,01</div>
   </div>
   <div id="product_15" class="products_box">
       <img src="/images/ecommerce/card_default.png">
       <div class="price">R$ 0,01</div>
   </div>   
   <div id="product_15" class="products_box">
       <img src="/images/ecommerce/card_default.png">
       <div class="price">R$ 0,01</div>
   </div>
</div>

และนี่คือ CSS แก้ไข:

<pre>
.product_container 
 {
 text-align:    center;
 height:        150px;
 }

.products {
    left: 50%;
height:35px;
float:left;
position: relative;
margin: 0 auto;
width:auto;
}
.products .products_box
{
width:auto;
height:auto;
float:left;
  right: 50%;
  position: relative;
}
.price {
    margin:        6px 2px;
    width:         137px;
    color:         #666;
    font-size:     14pt;
    font-style:    normal;
    border:        1px solid #CCC;
    background-color:   #EFEFEF;
}

<div class="product_container">
<div class="outer-center">
<div class="product inner-center">
    </div>
</div>
<div class="clear"></div>
</div>

.outer-center
{
float: right;
right: 50%;
position: relative;
}
.inner-center 
{
float: right;
right: -50%;
position: relative;
}
.clear 
{
clear: both;
}

.product_container
{
overflow:hidden;
}

หากคุณไม่ระบุ "ล้น: ซ่อน" สำหรับ ".product_container" div "กลางด้านนอก" จะทับซ้อนเนื้อหาที่อยู่ใกล้เคียงอื่น ๆ ทางด้านขวาของมัน ลิงก์หรือปุ่มใด ๆ ทางด้านขวาของ "Outer-Center" จะไม่ทำงาน ลองสีพื้นหลังสำหรับ "outer-center" เพื่อทำความเข้าใจถึงความต้องการ "overflow: hidden"

ฉันพบวิธีแก้ปัญหาที่น่าสนใจฉันกำลังสร้างตัวเลื่อนและต้องควบคุมตัวควบคุมสไลด์ให้อยู่ตรงกลาง นอกจากนี้คุณยังสามารถเพิ่มตำแหน่งที่สัมพันธ์กับผู้ปกครองและย้ายตำแหน่งของเด็กในแนวตั้ง ดูhttp://jsfiddle.net/bergb/6DvJz/

CSS:

#parent{
        width:600px;
        height:400px;
        background:#ffcc00;
        text-align:center;
    }

#child{
        display:inline-block;
        margin:0 auto;
        background:#fff;
    }  

HTML:

<div id="parent">
    <div id="child">voila</div>
</div>

ทำdisplay:table;และตั้งค่าmarginเป็นauto

รหัสที่สำคัญ:

.relatedProducts {
    display: table;
    margin-left: auto;
    margin-right: auto;
}

ไม่ว่าคุณจะได้รับองค์ประกอบกี่ชิ้นก็ตามมันจะจัดตำแหน่งกึ่งกลางให้โดยอัตโนมัติ

ตัวอย่างในข้อมูลโค้ด:

.relatedProducts {
    display: table;
    margin-left: auto;
    margin-right: auto;
}
a {
  text-decoration:none;
}

<div class="row relatedProducts">
<div class="homeContentTitle" style="margin: 100px auto 35px; width: 250px">Similar Products</div>
					
<a href="#">test1 </a>
<a href="#">test2 </a>
<a href="#">test3 </a>
</div>

ฉันกลัวว่าวิธีเดียวที่จะทำได้โดยไม่ระบุความกว้างอย่างชัดเจนคือการใช้ตาราง (หอบ)

แก้ไขเส็งเคร็ง แต่มันทำงาน ...

CSS:

#mainContent {
    position:absolute;
    width:600px;
    background:#FFFF99;
}

#sidebar {
    float:left;
    margin-left:610px;
    max-width:300;
    background:#FFCCCC;
}
#sidebar{


    text-align:center;
}

HTML:

<center>
<table border="0" cellspacing="0">
  <tr>
    <td>
<div id="mainContent">
1<br/>
<br/>
123<br/>
123<br/>
123<br/>
</div><div id="sidebar"><br/>
</div></td>
</tr>
</table>
</center>

แก้ไขง่าย ๆ ที่ใช้งานได้กับเบราว์เซอร์รุ่นเก่า (แต่ใช้ตารางและต้องการตั้งค่าความสูง):

<div style="width:100%;height:40px;position:absolute;top:50%;margin-top:-20px;">
  <table style="width:100%"><tr><td align="center">
    In the middle
  </td></tr></table>
</div>

<style type="text/css">
.container_box{
    text-align:center
}
.content{
    padding:10px;
    background:#ff0000;
    color:#ffffff;

}

ใช้ span istead ของ divs ด้านใน

<div class="container_box">
   <span class="content">Hello</span>
</div>

ฉันรู้ว่าคำถามนี้เก่า แต่ฉันก็หยุดพูด คล้ายกับคำตอบของ bobince แต่มีตัวอย่างโค้ดที่ใช้งานได้

ทำให้แต่ละผลิตภัณฑ์เป็นแบบอินไลน์บล็อก จัดกึ่งกลางเนื้อหาของคอนเทนเนอร์ เสร็จสิ้น

http://jsfiddle.net/rgbk/6Z2Re/

<style>
.products{
    text-align:center;
}

.product{
    display:inline-block;
    text-align:left;

    background-image: url('http://www.color.co.uk/wp-content/uploads/2013/11/New_Product.jpg');
    background-size:25px;
    padding-left:25px;
    background-position:0 50%;
    background-repeat:no-repeat;
}

.price {
    margin:        6px 2px;
    width:         137px;
    color:         #666;
    font-size:     14pt;
    font-style:    normal;
    border:        1px solid #CCC;
    background-color:   #EFEFEF;
}
</style>


<div class="products">
    <div class="product">
        <div class="price">R$ 0,01</div>
    </div>
    <div class="product">
        <div class="price">R$ 0,01</div>
    </div>
    <div class="product">
        <div class="price">R$ 0,01</div>
    </div>
    <div class="product">
        <div class="price">R$ 0,01</div>
    </div>
    <div class="product">
        <div class="price">R$ 0,01</div>
    </div>
    <div class="product">
        <div class="price">R$ 0,01</div>
    </div>
</div>

ดูเพิ่มเติม: จัดกึ่งบล็อกอินไลน์ด้วยความกว้างแบบไดนามิกใน CSS

นี่เป็นวิธีหนึ่งที่จะจัดวางสิ่งใด ๆ ไว้ใน div โดยไม่ทราบความกว้างด้านในขององค์ประกอบ

#product_15{
    position: relative;
    margin: 0 auto;
    display: table;
}
.price, img{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

ทางออกของฉันคือ:

.parent {
    display: flex;
    flex-wrap: wrap;
}

.product {
    width: 240px;
    margin-left: auto;
    height: 127px;
    margin-right: auto;
}

เพิ่ม css นี้ไปยังคลาส product_container ของคุณ

    margin: 0px auto;
    padding: 0px;
    border:0;
    width: 700px;