การเขียนโปรแกรม vertical-alignment

21

ทำไมถึงไม่vertical-align: middleทำงาน และยังvertical-align: top ใช้งานได้ span{ vertical-align: middle; } <div> <img src="http://lorempixel.com/30/30/" alt="small img" /> <span>Doesn't work.</span> </div> เรียกใช้ข้อมูลโค้ดซ่อนผลลัพธ์ขยายตัวอย่างข้อมูล

1967 html css alignment vertical-alignment

30

วิธีจัดแนวภาพใน div ในแนวตั้ง

คุณจะจัดแนวรูปภาพภายในของที่บรรจุได้divอย่างไร? ตัวอย่าง ในตัวอย่างของฉันฉันจำเป็นต้องตั้งศูนย์ให้<img>ตรง<div>กับclass ="frame": <div class="frame" style="height: 25px;"> <img src="http://jsfiddle.net/img/logo.png" /> </div> .frameความสูงของภาพได้รับการแก้ไขและไม่ทราบความสูงของภาพ ฉันสามารถเพิ่มองค์ประกอบใหม่ได้.frameถ้านั่นเป็นทางออกเดียว ฉันพยายามทำสิ่งนี้บน Internet Explorer 7 และใหม่กว่า WebKit, Gecko ดู jsfiddle ที่นี่ .frame { height: 25px; /* Equals maximum image height */ line-height: 25px; width: 160px; border: 1px solid red; text-align: center; margin: 1em 0; } img { …

1456 css image vertical-alignment

30

จะวาง div ในแนวตั้งตรงกลางสำหรับเบราว์เซอร์ทั้งหมดได้อย่างไร?

ฉันต้องการจัดกึ่งกลางdivแนวตั้งด้วย CSS ฉันไม่ต้องการตารางหรือ JavaScript แต่ใช้ CSS เท่านั้น ฉันพบวิธีแก้ไขปัญหาบางอย่าง แต่ทั้งหมดขาดการสนับสนุน Internet Explorer 6 <body> <div>Div to be aligned vertically</div> </body> ฉันจะจัดกึ่งกลางdivแนวตั้งในเบราว์เซอร์หลักทั้งหมดรวมถึง Internet Explorer 6 ได้อย่างไร

1367 css cross-browser alignment vertical-alignment centering

30

ฉันจะจัดแนวข้อความใน div ในแนวตั้งได้อย่างไร

ฉันพยายามหาวิธีที่มีประสิทธิภาพที่สุดในการจัดแนวข้อความกับ div ฉันลองทำบางสิ่งแล้วก็ดูเหมือนจะไม่มีอะไรทำงาน .testimonialText { position: absolute; left: 15px; top: 15px; width: 150px; height: 309px; vertical-align: middle; text-align: center; font-family: Georgia, "Times New Roman", Times, serif; font-style: italic; padding: 1em 0 1em 0; } <div class="testimonialText"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut …

1184 html css vertical-alignment

25

วิธีจัดแนวเนื้อหาของ div ให้อยู่ด้านล่าง

สมมติว่าฉันมีรหัส CSS และ HTML ดังต่อไปนี้: #header { height: 150px; } <div id="header"> <h1>Header title</h1> Header content (one or multiple lines) </div> เรียกใช้ข้อมูลโค้ดซ่อนผลลัพธ์ขยายตัวอย่างข้อมูล ส่วนหัวมีความสูงคงที่ แต่เนื้อหาส่วนหัวอาจเปลี่ยนไป ฉันต้องการเนื้อหาของส่วนหัวที่จะจัดตำแหน่งในแนวตั้งที่ด้านล่างของส่วนหัวดังนั้นบรรทัดสุดท้ายของข้อความ "sticks" ที่ด้านล่างของส่วนหัว ดังนั้นหากมีข้อความเพียงบรรทัดเดียวมันจะเป็นเช่น: ----------------------------- | ชื่อส่วนหัว | | | | เนื้อหาส่วนหัว (ส่งผลให้หนึ่งบรรทัด) ----------------------------- และถ้ามีสามบรรทัด: ----------------------------- | ชื่อส่วนหัว | | เนื้อหาส่วนหัว (ซึ่งเป็นเช่นนั้น | สิ่งที่สมบูรณ์แบบมาก | ครอบคลุมมากกว่าสามบรรทัด) …

1163 html css vertical-alignment

28

วิธีการจัดแนวองค์ประกอบใน div?

ฉันมี div ที่มีสองภาพและ h1กับสองภาพและการอื่น ทั้งหมดของพวกเขาจะต้องอยู่ในแนวตั้งภายใน div ถัดจากกันและกัน หนึ่งในภาพต้องมี absoluteอยู่ในตำแหน่งภายใน div CSS จำเป็นสำหรับการทำงานกับเบราว์เซอร์ทั่วไปทั้งหมดอย่างไร <div id="header"> <img src=".." ></img> <h1>testing...</h1> <img src="..."></img> </div>

792 html css vertical-alignment

10

วิธีการจัดกึ่งกลางคอนเทนเนอร์ในแนวตั้งใน Bootstrap

ฉันกำลังมองหาวิธีที่จะจัดศูนย์กลางcontainerdiv ไว้ในแนวตั้งภายในjumbotronและตั้งให้อยู่ตรงกลางของหน้า .jumbotronจะต้องมีการปรับตัวให้เต็มความสูงและความกว้างของหน้าจอ .containerdiv มีความกว้างของ1025pxและควรจะอยู่ตรงกลางของหน้า (กลางแนวตั้ง) ฉันต้องการให้หน้านี้มี jumbotron ที่ปรับให้เหมาะกับความสูงและความกว้างของหน้าจอพร้อมกับที่เก็บกึ่งกลางแนวตั้งไปที่ jumbotron ฉันจะประสบความสำเร็จได้อย่างไร .jumbotron { height:100%; width:100%; } .container { width:1025px; } .jumbotron .container { max-width: 100%; } <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/> <div class="jumbotron"> <div class="container text-center"> <h1>The easiest and powerful way</h1> <div class="row"> <div class="col-md-7"> <div class="top-bg"></div> </div> <div class="col-md-5 iPhone-features" style="margin-left:-25px;"> …

333 html css twitter-bootstrap twitter-bootstrap-3 vertical-alignment

8

วิธีการตั้งค่าระยะขอบหรือช่องว่างภายในเป็นเปอร์เซ็นต์ของความสูงของคอนเทนเนอร์หลัก?

ฉันได้รับสมองของฉันมากกว่าการสร้างการจัดตำแหน่งแนวตั้งใน CSS โดยใช้ต่อไปนี้ .base{ background-color:green; width:200px; height:200px; overflow:auto; position:relative; } .vert-align{ padding-top:50%; height:50%; }  <div class="base"> <div class="vert-align"> Content Here </div> </div> เรียกใช้ข้อมูลโค้ดซ่อนผลลัพธ์ขยายตัวอย่างข้อมูล ในขณะที่สิ่งนี้ดูเหมือนจะใช้ได้กับกรณีนี้ฉันรู้สึกประหลาดใจที่เมื่อฉันเพิ่มหรือลดความกว้างของ div พื้นฐานของฉันการจัดตำแหน่งแนวตั้งจะ snap ฉันคาดหวังว่าเมื่อฉันตั้งค่าคุณสมบัติการเติมด้านบนจะใช้การเติมเป็นเปอร์เซ็นต์ของความสูงของคอนเทนเนอร์หลักซึ่งเป็นฐานในกรณีของเรา แต่ค่าที่สูงกว่า 50 เปอร์เซ็นต์จะถูกคำนวณเป็นเปอร์เซ็นต์ของ ความกว้าง :( มีวิธีตั้ง padding และ / หรือ margin เป็นเปอร์เซ็นต์ของส่วนสูงโดยไม่ต้องใช้ JavaScript หรือไม่?

236 html css vertical-alignment

7

Android: การจัดตำแหน่งแนวตั้งสำหรับ EditText หลายบรรทัด (พื้นที่ข้อความ)

ฉันต้องการมี 5 บรรทัดสำหรับความสูงของพื้นที่ข้อความ ฉันใช้รหัสต่อไปนี้ <EditText android:layout_width="fill_parent" android:layout_height="wrap_content" android:gravity="center" android:singleLine="false" android:lines="5" android:layout_marginLeft="10dip" android:layout_marginRight="10dip" /> พื้นที่ข้อความดูดี แต่ปัญหาคือเคอร์เซอร์กะพริบอยู่กลางช่องข้อความ ฉันต้องการให้มันกระพริบที่บรรทัดแรกที่ตัวอักษรตัวแรกของฟิลด์ข้อความ

232 android android-edittext vertical-alignment multiline

17

การจัดแนวข้อความใน WPF TextBlock

ฉันจะกำหนดการจัดแนวกึ่งกลางแนวตั้งให้กับข้อความภายใน TextBlock ได้อย่างไร ฉันพบคุณสมบัติ TextAlignment แต่สำหรับการจัดแนวข้อความแนวนอน ฉันจะจัดแนวข้อความในแนวตั้งได้อย่างไร

228 wpf vertical-alignment textblock

30

เพิ่มข้อความกึ่งกลางที่กึ่งกลางของบรรทัด <hr /> - like

ฉันสงสัยว่ามีตัวเลือกใดใน xhtml 1.0 ที่เข้มงวดเพื่อสร้างบรรทัดทั้งสองด้านของข้อความที่ต้องการ: หมวดที่หนึ่ง ----------------------- หัวข้อถัดไป ----------------------- มาตราสอง ฉันคิดว่าจะทำสิ่งแฟนซีบางอย่างเช่นนี้: <div style="float:left; width: 44%;"><hr/></div> <div style="float:right; width: 44%;"><hr/></div> Next section หรืออีกทางเลือกหนึ่งเพราะข้างต้นมีปัญหาเกี่ยวกับการจัดตำแหน่ง (ทั้งแนวตั้งและแนวนอน): <table><tr> <td style="width:47%"><hr/></td> <td style="vertical-align:middle; text-align: center">Next section</td> <td style="width:47%"><hr/></td> </tr></table> นอกจากนี้ยังมีปัญหาการจัดตำแหน่งซึ่งฉันแก้ไขด้วยความยุ่งเหยิงนี้: <table><tr> <td style="border-bottom: 1px solid gray; width: 47%">&nbsp;</td> <td style="vertical-align:middle;text-align:center" rowspan="2">Next section</td> <td style="border-bottom: 1px solid …

217 html css xhtml line vertical-alignment

13

เพิ่มช่องว่างแนวตั้งโดยใช้ Twitter Bootstrap?

วิธีที่ดีที่สุดในการเพิ่มช่องว่างในแนวตั้งโดยใช้ Bootstrap ของ Twitter คืออะไร ตัวอย่างเช่นสมมติว่าฉันกำลังสร้างหน้า Landing Page และต้องการพื้นที่ว่างเปล่าด้านบนและด้านล่างปุ่มเล็กน้อย (100px) เห็นได้ชัดว่าฉันสามารถสร้างคลาสที่แน่นอนสำหรับปุ่มนั้น แต่ผมจะคิดว่าเงินทุนควรจะมีความแห้งวิธีของการเพิ่มช่องว่างในแนวตั้ง

162 twitter-bootstrap whitespace vertical-alignment twitter-bootstrap-2

9

วิธีการจัดกึ่งกลางเนื้อหาด้วยความสูงของตัวแปรภายใน div

เป็นวิธีที่ดีที่สุดในการจัดกึ่งกลางเนื้อหาของ div ในแนวตั้งเมื่อความสูงของเนื้อหาเป็นตัวแปรอะไร ในกรณีเฉพาะของฉันความสูงของ div container จะถูกแก้ไข แต่มันจะดีถ้ามีวิธีแก้ปัญหาที่จะทำงานในกรณีที่ container มีความสูงของตัวแปรเช่นกัน นอกจากนี้ฉันจะรักการแก้ปัญหาโดยไม่ใช้ CSS hacks และ / หรือมาร์กอัปที่ไม่ใช่ความหมายหรือน้อยมาก

158 css vertical-alignment

9

วิธีการตั้งศูนย์ div ในแนวตั้งภายใน div div หลัก

ฉันกำลังพยายามหาที่เก็บสีน้ำเงินตรงกลางของสีชมพู แต่ดูเหมือนว่าvertical-align: middle;จะไม่ทำงานในกรณีนั้น <div style="display: block; position: absolute; left: 50px; top: 50px;"> <div style="text-align: left; position: absolute;height: 56px;vertical-align: middle;background-color: pink;"> <div style="background-color: lightblue;">test</div> </div> </div> ผลลัพธ์: ความคาดหวัง: กรุณาแนะนำว่าฉันจะบรรลุสิ่งนั้นได้อย่างไร Jsfiddle

146 html css vertical-alignment absolute

5

การจัดตำแหน่งแนวตั้งขององค์ประกอบข้อความใน SVG

สมมติว่าฉันมีไฟล์ SVG: <svg width="1024" height="768" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <text x='20' y='60' style="font-size: 60px">b</text> <text x='100' y='60' style="font-size: 60px">a</text> </svg> ฉันต้องการจัดตำแหน่งด้านบนของaและbอย่างใด ที่จริงแล้วฉันต้องการให้ตำแหน่งของฉันเป็นไปตามrooflineแทนที่จะเป็นbaseline!

142 svg vertical-alignment w3c

คำถามติดแท็ก vertical-alignment