จัดเนื้อหาภายใน div

152

ฉันใช้การจัดเรียงข้อความสไตล์ CSS เพื่อจัดเนื้อหาภายในคอนเทนเนอร์ใน HTML สิ่งนี้ใช้ได้ดีในขณะที่เนื้อหาเป็นข้อความหรือเบราว์เซอร์คือ IE แต่อย่างอื่นมันไม่ทำงาน

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

มีวิธีอื่นในการจัดแนวเนื้อหาใน html หรือไม่

html css text-align

— Hemanshu Bhojak
แหล่งที่มา

กรุณาให้ข้อมูลเพิ่มเติมกับเรา? ผ่านรหัสที่ไม่ทำงานในเบราว์เซอร์อื่น

— Shoban

คุณควรยกตัวอย่างมาร์กอัปของคุณเพื่อให้คนอื่นรู้ว่าคุณกำลังพยายามทำอะไร มิฉะนั้นคำถามของคุณไม่ชัดเจน

— levik

216

จัดเรียงข้อความจัดข้อความและเนื้อหาอินไลน์อื่น ๆ มันไม่ได้จัดเรียงองค์ประกอบลูกบล็อก

ในการทำเช่นนั้นคุณต้องการให้องค์ประกอบที่คุณต้องการจัดตำแหน่งความกว้างด้วยระยะขอบซ้ายและขวา 'อัตโนมัติ' นี่เป็นวิธีที่เป็นไปตามมาตรฐานที่ใช้งานได้ทุกที่ยกเว้น IE5.x

<div style="width: 50%; margin: 0 auto;">Hello</div>

เพื่อให้สามารถทำงานใน IE6 ได้คุณต้องตรวจสอบให้แน่ใจว่าโหมดมาตรฐานเปิดอยู่โดยใช้ DOCTYPE ที่เหมาะสม

หากคุณต้องการสนับสนุนโหมด IE5 / Quirks จริงๆซึ่งวันนี้คุณไม่ควรจะเป็นไปได้ที่จะรวมสองแนวทางที่แตกต่างกันเข้าด้วยกัน:

<div style="text-align: center">
    <div style="width: 50%; margin: 0 auto; text-align: left">Hello</div>
</div>

(เห็นได้ชัดว่าสไตล์มีการใส่สไตล์ชีทไว้อย่างดีที่สุด แต่เวอร์ชันอินไลน์เป็นตัวอย่าง)

— bobince
แหล่งที่มา

2

หากคุณไม่ทราบความกว้างของ div ซึ่งมักจะเป็นเช่นนี้โซลูชันนี้ทำงานได้อย่างสมบูรณ์ในเบราว์เซอร์ทั้งหมด: matthewjamestaylor.com/blog/…

— Artem Russakovskii

ฉันใช้ <div style = "width: 100%; margin: 0 auto;"> Hello </div>

— Aamol

9

คุณสามารถทำสิ่งนี้ได้เช่นกัน:

HTML

<body>
    <div id="wrapper_1">
        <div id="container_1"></div>
    </div>
</body>

CSS

body { width: 100%; margin: 0; padding: 0; overflow: hidden; }

#wrapper_1 { clear: left; float: left; position: relative; left: 50%; }

#container_1 { display: block; float: left; position: relative; right: 50%; }

ตามที่Artem Russakovskiiพูดถึงด้วยอ่านบทความต้นฉบับโดยMattew James Taylorสำหรับคำอธิบายแบบเต็ม

— มาห์
แหล่งที่มา

9

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

.content {
    margin-top:auto;
    margin-bottom:auto;
    text-align:center;
}

— krithi k
แหล่งที่มา

1

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

— Andreas

ขออภัยโค้ดด้านบนจะจัดตำแหน่งศูนย์ div ในเนื้อหาหลัก

— krithi k

6

จริงๆแล้วฉันเกลียดการแก้ปัญหาทั้งหมดที่ฉันเคยเห็นมาแล้วและฉันจะบอกคุณว่าทำไม: พวกเขาดูเหมือนจะไม่จัดแนวที่ถูกต้อง ... ดังนั้นนี่คือสิ่งที่ฉันมักจะทำ:

ฉันรู้ว่าพิกเซลแต่ละตัวมีค่า Div และระยะขอบที่เกี่ยวข้องเก็บไว้ ... ดังนั้นฉันจึงทำดังต่อไปนี้

ฉันจะสร้าง div wrapper ที่มีตำแหน่งสัมบูรณ์และค่าที่เหลืออยู่ 50% ... ตอนนี้ div เริ่มตรงกลางหน้าจอแล้วฉันลบครึ่งหนึ่งของเนื้อหาทั้งหมดของความกว้างของ div ... และฉันได้รับการปรับขนาดเนื้อหา ... และฉันคิดว่าวิธีนี้ใช้ได้กับทุกเบราว์เซอร์เช่นกัน ลองด้วยตัวคุณเอง (ตัวอย่างนี้สมมติว่าเนื้อหาทั้งหมดในไซต์ของคุณถูกห่อด้วยแท็ก div ที่ใช้คลาส wrapper นี้และเนื้อหาทั้งหมดในนั้นมีความกว้าง 200px):

.wrapper {
    position: absolute;
    left: 50%;
    margin-left: -100px;
}

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

วิธีนี้ยังใช้งานได้อย่างน่าอัศจรรย์สำหรับการจัดแนวเนื้อหาของคุณในแนวตั้งและใช้บน: 50% และขอบบน ไชโย!

— อเล็กซาน
แหล่งที่มา

2

นี่เป็นเทคนิคที่ฉันใช้ที่ทำงานได้ดี:

<div>
    <div style="display: table-cell; width: 100%">&nbsp;</div>
    <div style="display: table-cell; white-space: nowrap;">Something Here</div>
</div>

ขยายตัวอย่างข้อมูล

— หมาล่าเนื้อ
แหล่งที่มา

2

ด้านล่างนี้เป็นวิธีการที่ใช้ได้ผลสำหรับฉันเสมอ

โดยใช้รูปแบบเค้าโครงแบบยืดหยุ่น :

ตั้งค่าการแสดงผลของ div parent display: flex;และคุณสามารถจัดตำแหน่งองค์ประกอบย่อยภายใน div โดยใช้justify-content: center;(เพื่อจัดเรียงรายการบนแกนหลัก) และalign-items: center;(เพื่อจัดเรียงรายการบนแกนไขว้)

หากคุณมีองค์ประกอบย่อยมากกว่าหนึ่งองค์ประกอบและต้องการควบคุมวิธีการจัดเรียง (คอลัมน์ / แถว) คุณสามารถเพิ่มflex-directionคุณสมบัติได้

ตัวอย่างการทำงาน:

.parent {
  align-items: center;
  border: 1px solid black;
  display: flex;
  justify-content: center;
  height: 250px;
  width: 250px;
}

.child {
  border: 1px solid black;
  height: 50px;
  width: 50px;
}

<div class="parent">
  <div class="child"></div>
</div>

ขยายตัวอย่างข้อมูล

2. (วิธีที่เก่ากว่า) การใช้ตำแหน่งคุณสมบัติมาร์จิ้นและขนาดคงที่

ตัวอย่างการทำงาน:

.parent {
  border: 1px solid black;
  height: 250px;
  position: relative;
  width: 250px;
}

.child {
  border: 1px solid black;
  margin: auto;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 50px;
  position: absolute;
  width: 50px;
}

<div class="parent">
  <div class="child"></div>
</div>

ขยายตัวอย่างข้อมูล

— nmak18
แหล่งที่มา

1

คำตอบทั้งหมดพูดถึงแนวนอน

สำหรับการจัดแนวองค์ประกอบเนื้อหาหลายแนวตั้งลองดูที่วิธีนี้:

<div style="display: flex; align-items: center; width: 200px; height: 140px; padding: 10px 40px; border: solid 1px black;">
    <div>
        <p>Paragraph #1</p>
        <p>Paragraph #2</p>
    </div>
</div>

ขยายตัวอย่างข้อมูล

— นิโคลัส
แหล่งที่มา

-2

อีกตัวอย่างหนึ่งที่ใช้ HTML และ CSS:

<div style="width: Auto; margin: 0 auto;">Hello</div>

— Diogo
แหล่งที่มา

27

ไม่มีสิ่งที่คุณเขียนเฉพาะกับ ASP.NET มันเป็นเพียง HTML และ CSS แบบอินไลน์ คุณหมายถึงเขียนการควบคุมเซิร์ฟเวอร์ด้วยคุณสมบัติหรือไม่

— webworm

1

แก้ไขแล้ว. คำตอบตอนนี้พูดถึงเทคโนโลยีที่ถูกต้อง

— jony