คำถามติดแท็ก centering

การจัดกึ่งกลางคือการวางอะไรบางอย่างที่จุดกึ่งกลางของช่องว่าง

30
วิธีจัดกึ่งกลางแนวนอนให้เป็น <div>
Наэтотвопросестьответына กองมากเกินнарусском : Сделатьблок div поцентруродительскогоблока, асодержимоеблока div выровнятьпоправомукраю ฉันจะจัดกึ่งกลาง&lt;div&gt;ภายในแนวนอน&lt;div&gt;โดยใช้ CSS ได้อย่างไร &lt;div id="outer"&gt; &lt;div id="inner"&gt;Foo foo&lt;/div&gt; &lt;/div&gt;
4286 html  css  alignment  centering 
30
จะวาง div ในแนวตั้งตรงกลางสำหรับเบราว์เซอร์ทั้งหมดได้อย่างไร?
ฉันต้องการจัดกึ่งกลางdivแนวตั้งด้วย CSS ฉันไม่ต้องการตารางหรือ JavaScript แต่ใช้ CSS เท่านั้น ฉันพบวิธีแก้ไขปัญหาบางอย่าง แต่ทั้งหมดขาดการสนับสนุน Internet Explorer 6 &lt;body&gt; &lt;div&gt;Div to be aligned vertically&lt;/div&gt; &lt;/body&gt; ฉันจะจัดกึ่งกลางdivแนวตั้งในเบราว์เซอร์หลักทั้งหมดรวมถึง Internet Explorer 6 ได้อย่างไร
30
จัดคอลัมน์ให้อยู่กึ่งกลางโดยใช้ Twitter Bootstrap 3
ฉันจะกำหนดขนาดของคอลัมน์หนึ่งคอลัมน์ไว้ในคอนเทนเนอร์ (12 คอลัมน์) ในTwitter Bootstrap 3 ได้อย่างไร .centered { background-color: red; } &lt;body class="container"&gt; &lt;div class="col-lg-1 col-offset-6 centered"&gt; &lt;img data-src="holder.js/100x100" alt="" /&gt; &lt;/div&gt; &lt;/body&gt; เรียกใช้ข้อมูลโค้ดซ่อนผลลัพธ์ขยายตัวอย่างข้อมูล ฉันต้องการ a divโดยมีคลาส.centeredให้อยู่กึ่งกลางภายในคอนเทนเนอร์ ฉันอาจใช้แถวถ้ามีหลายdivs แต่ตอนนี้ฉันต้องการ a ที่divมีขนาดหนึ่งคอลัมน์ที่อยู่กึ่งกลางภายในคอนเทนเนอร์ (12 คอลัมน์) ฉันยังไม่แน่ใจว่าวิธีการข้างต้นดีพอเนื่องจากความตั้งใจที่จะไม่ชดเชยdivครึ่ง ฉันไม่ต้องการพื้นที่ว่างด้านนอกdivและเนื้อหาของdivสัดส่วนที่ลดลง ฉันต้องการพื้นที่ว่างด้านนอก div เพื่อกระจายอย่างเท่าเทียมกัน (ลดขนาดจนถึงความกว้างคอนเทนเนอร์เท่ากับหนึ่งคอลัมน์)
25
วิธีจัดองค์ประกอบ "ตำแหน่ง: สัมบูรณ์" ให้อยู่ตรงกลาง
ฉันมีปัญหาตรงกลางองค์ประกอบที่มีแอตทริบิวต์ชุดposition absoluteไม่มีใครรู้ว่าทำไมภาพไม่ได้อยู่ตรงกลาง? body { text-align: center; } #slideshowWrapper { margin-top: 50px; text-align: center; } ul#slideshow { list-style: none; position: relative; margin: auto; } ul#slideshow li { position: absolute; } ul#slideshow li img { border: 1px solid #ccc; padding: 4px; height: 450px; } &lt;body&gt; &lt;div id="slideshowWrapper"&gt; &lt;ul id="slideshow"&gt; &lt;li&gt;&lt;img src="img/dummy1.JPG" alt="Dummy …
16
จัดตำแหน่งให้อยู่กึ่งกลาง: องค์ประกอบคงที่
ฉันต้องการทำposition: fixed;กล่องป๊อปอัพที่อยู่กึ่งกลางหน้าจอด้วยความกว้างและความสูงแบบไดนามิก ฉันใช้margin: 5% auto;สำหรับสิ่งนี้ หากไม่มีposition: fixed;มันก็จะปรับแนวนอนให้อยู่กึ่งกลาง หลังจากเพิ่มposition: fixed;มันยังไม่ได้อยู่ตรงกลางในแนวนอน นี่คือชุดที่สมบูรณ์: .jqbox_innerhtml { position: fixed; width: 500px; height: 200px; margin: 5% auto; padding: 10px; border: 5px solid #ccc; background-color: #fff; } &lt;div class="jqbox_innerhtml"&gt; This should be inside a horizontally and vertically centered box. &lt;/div&gt; เรียกใช้ข้อมูลโค้ดซ่อนผลลัพธ์ขยายตัวอย่างข้อมูล ฉันจะจัดกึ่งกลางกล่องนี้ในหน้าจอด้วย CSS ได้อย่างไร
14
วิธีการจัดปุ่มให้อยู่กึ่งกลางภายใน div?
ฉันมี div ที่มีความกว้าง 100% ฉันต้องการจัดปุ่มให้อยู่ตรงกลางปุ่มฉันจะทำสิ่งนี้ได้อย่างไร &lt;div style="width:100%; height:100%; border: 1px solid"&gt; &lt;button type="button"&gt;hello&lt;/button&gt; &lt;/div&gt; เรียกใช้ข้อมูลโค้ดซ่อนผลลัพธ์ขยายตัวอย่างข้อมูล
220 html  css  centering 
8
CSS อยู่ตรงกลางแนวนอนของ div คงที่?
#menu { position: fixed; width: 800px; background: rgb(255, 255, 255); /* The Fallback */ background: rgba(255, 255, 255, 0.8); margin-top: 30px; } ฉันรู้ว่าคำถามนี้เป็นล้านครั้ง แต่ฉันไม่สามารถหาวิธีแก้ปัญหากรณีของฉันได้ ฉันมี div ซึ่งควรแก้ไขบนหน้าจอแม้ว่าหน้าจะถูกเลื่อนมันควรอยู่กึ่งกลางหน้าจอเสมอ! div ควรมี500pxความกว้างควรอยู่30pxห่างจากด้านบน (margin-top) ควรอยู่กึ่งกลางในแนวนอนตรงกลางของหน้าทุกขนาดเบราว์เซอร์และไม่ควรเลื่อนเมื่อเลื่อนหน้าส่วนที่เหลือ เป็นไปได้ไหม
183 html  css  centering 
7
อยู่ตรงกลางใน CSS Grid
ฉันกำลังพยายามสร้างหน้าง่าย ๆ ด้วย CSS Grid สิ่งที่ฉันไม่สามารถทำได้คือวางข้อความไว้ที่กึ่งกลางจาก HTML ไปยังเซลล์กริดที่เกี่ยวข้อง ฉันได้ลองวางเนื้อหาในแยกdivของทั้งด้านในและด้านนอกของleft_bgและright_bgตัวเลือกและเล่นกับคุณสมบัติ CSS บางอย่างเพื่อประโยชน์ ฉันจะทำสิ่งนี้ได้อย่างไร html, body { margin: 0; padding: 0; } .container { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 100vh; grid-gap: 0px 0px; } .left_bg { display: subgrid; background-color: #3498db; grid-column: 1 / 1; grid-row: 1 / 1; z-index: 0; } …
179 html  css  centering  css-grid 
11
Bootstrap 4 Center การจัดแนวตั้งและแนวนอน
ฉันมีหน้าเว็บที่มีแบบฟอร์มเท่านั้นและฉันต้องการให้แบบฟอร์มอยู่ตรงกลางของหน้าจอ &lt;div class="container"&gt; &lt;div class="row justify-content-center align-items-center"&gt; &lt;form&gt; &lt;div class="form-group"&gt; &lt;label for="formGroupExampleInput"&gt;Example label&lt;/label&gt; &lt;input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input"&gt; &lt;/div&gt; &lt;div class="form-group"&gt; &lt;label for="formGroupExampleInput2"&gt;Another label&lt;/label&gt; &lt;input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input"&gt; &lt;/div&gt; &lt;/form&gt; &lt;/div&gt; &lt;/div&gt; การjustify-content-centerจัดแนวแบบฟอร์มในแนวนอน แต่ฉันไม่สามารถหาวิธีจัดแนวตั้งได้ ฉันได้พยายามที่จะใช้align-items-centerและalign-self-centerแต่มันไม่ทำงาน ฉันพลาดอะไรไป การสาธิต
7
ทำให้รายการกลางอยู่ตรงกลางเมื่อรายการด้านข้างมีความกว้างต่างกัน
ลองนึกภาพเลย์เอาต์ต่อไปนี้โดยที่จุดแสดงถึงช่องว่างระหว่างกล่อง [Left box]......[Center box]......[Right box] เมื่อฉันลบกล่องขวาฉันชอบกล่องตรงกลางที่จะยังคงอยู่ในศูนย์เช่น: [Left box]......[Center box]................. สิ่งเดียวกันจะเกิดขึ้นหากฉันจะลบกล่องด้านซ้าย ................[Center box]................. ตอนนี้เมื่อเนื้อหาภายในกล่องกลางยาวขึ้นมันจะใช้พื้นที่มากเท่าที่จำเป็นในขณะที่เหลืออยู่กึ่งกลาง กล่องด้านซ้ายและขวาจะไม่ย่อขนาดดังนั้นเมื่อไม่มีที่ว่างเหลืออยู่overflow:hiddenและtext-overflow: ellipsisจะมีผลในการทำลายเนื้อหา [Left box][Center boxxxxxxxxxxxxx][Right box] ทั้งหมดข้างต้นเป็นสถานการณ์ในอุดมคติของฉัน แต่ฉันไม่รู้ว่าจะทำสิ่งนี้ได้อย่างไร เพราะเมื่อฉันสร้างโครงสร้างแบบยืดหยุ่นเช่นนั้น: .parent { display : flex; // flex box justify-content : space-between; // horizontal alignment align-content : center; // vertical alignment } ถ้ากล่องซ้ายและขวามีขนาดเท่ากันฉันจะได้เอฟเฟกต์ที่ต้องการ อย่างไรก็ตามเมื่อหนึ่งในสองนั้นมาจากขนาดที่แตกต่างกันกล่องที่อยู่ตรงกลางไม่ได้อยู่กึ่งกลางอีกต่อไปอย่างแท้จริง มีใครบ้างที่สามารถช่วยฉันได้บ้าง ปรับปรุง A justify-selfจะดีนี่จะเหมาะ: .leftBox …
162 html  css  flexbox  centering 
7
ฉันจะทำให้ฉลากอยู่กึ่งกลางใน WinForms ได้อย่างไร
ในWinFormsฉันใช้Labelเพื่อแสดงข้อความที่แตกต่างกันเช่นความสำเร็จความล้มเหลว ฯลฯ ฉันต้องการจัดกึ่งกลางของป้ายกำกับนั้นในรูปแบบกึ่งกลาง ฉันต้องการทางออกที่จะทำให้มันเป็นศูนย์กลางไม่ว่าจะมีเพียงหนึ่งคำหรือทั้งประโยคในฉลาก
137 c#  .net  winforms  centering 
5
วาง 'div' ไว้ตรงกลางหน้าจอแม้ว่าหน้าจะเลื่อนขึ้นหรือลง?
ฉันมีปุ่มในหน้าของฉันซึ่งเมื่อคลิกแล้วจะแสดงdiv(รูปแบบป๊อปอัป) ที่กลางหน้าจอของฉัน ฉันใช้ CSS ต่อไปนี้เพื่อdivจัดกึ่งกลางตรงกลางหน้าจอ: .PopupPanel { border: solid 1px black; position: absolute; left: 50%; top: 50%; background-color: white; z-index: 100; height: 400px; margin-top: -200px; width: 600px; margin-left: -300px; } CSS นี้ทำงานได้ดีตราบเท่าที่ไม่ได้เลื่อนหน้าลง แต่ถ้าฉันวางปุ่มที่ด้านล่างของหน้าเมื่อคลิกปุ่มdivจะแสดงที่ด้านบนและผู้ใช้ต้องเลื่อนขึ้นเพื่อดูเนื้อหาของไฟล์div. ฉันต้องการทราบวิธีแสดงdivตรงกลางหน้าจอแม้ว่าจะเลื่อนหน้าไปแล้วก็ตาม
126 html  css  scroll  position  centering 
12
การใช้ระยะขอบ: อัตโนมัติเพื่อจัดแนว div ในแนวตั้ง
ดังนั้นผมจึงรู้ว่าเราสามารถตั้งศูนย์กลาง div margin:0 auto;แนวนอนถ้าเราใช้ ควรmargin:auto auto;ทำงานวิธีที่ผมคิดว่ามันควรจะทำงาน? จัดกึ่งกลางในแนวตั้งด้วยหรือไม่? ทำไมไม่vertical-align:middle;ทำงานทั้งสองอย่าง? .black { position:absolute; top:0; bottom:0; left:0; right:0; background:rgba(0,0,0,.5); } .message { background:yellow; width:200px; margin:auto auto; padding:10px; } &lt;div class="black"&gt; &lt;div class="message"&gt; This is a popup message. &lt;/div&gt; &lt;/div&gt; เรียกใช้ข้อมูลโค้ดซ่อนผลลัพธ์ขยายข้อมูลโค้ด JSFiddle
114 html  css  centering 
10
การจัดตำแหน่งศูนย์ข้อความที่ระบุ
ฉันลองทุกอย่างแล้ว แต่ดูเหมือนจะไม่สามารถจัดกึ่งกลางข้อความนี้ได้ ใครช่วยบอกหน่อยได้ไหมว่าข้อผิดพลาดอยู่ที่ไหน NSMutableParagraphStyle *paragraphStyle = NSMutableParagraphStyle.new; paragraphStyle.alignment = NSTextAlignmentCenter; label.attributedText = [[NSAttributedString alloc] initWithString:cell.EventTitle.text attributes:@{NSForegroundColorAttributeName : [UIColor whiteColor],NSParagraphStyleAttributeName:paragraphStyle,NSBaselineOffsetAttributeName : @0,NSFontAttributeName : [UIFont fontWithName:@"BrandonGrotesque-Black" size:34]}];
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.