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

ฉันพยายามที่จะได้รับหลายinlineและส่วนประกอบในแนวตั้งในinline-block divทำไมspanในตัวอย่างนี้ถึงยืนยันว่าถูกผลักลงมา? ฉันได้พยายามทั้งสองvertical-align:middle;และvertical-align:top;แต่ไม่มีอะไรเปลี่ยนแปลง HTML: <div> <a></a><a></a> <span>Some text</span> </div>​ CSS: a { background-color:#FFF; width:20px; height:20px; display:inline-block; border:solid black 1px; } div { background:yellow; vertical-align:middle; } span { background:red; } ผลลัพธ์: ซอ

142 html  css  vertical-alignment 

เมื่อผนวกdivs divกับ a ที่มีความสูงคงที่ div ลูกจะปรากฏขึ้นจากบนลงล่างติดที่ขอบบน ┌─────────────────────────┐ │ Child Div 1 │ │ Child Div 2 │ │ │ │ │ │ │ └─────────────────────────┘ ตอนนี้ฉันพยายามแสดงมันจากล่างขึ้นบนเช่นนี้ (ติดกับขอบล่าง): ┌─────────────────────────┐ │ │ │ │ │ │ │ Child Div 1 │ │ Child Div 2 │ └─────────────────────────┘ ┌─────────────────────────┐ │ │ │ │ │ …

139 html  css  scrollbar  vertical-alignment  alignment 

ฉันต้องการสร้างบล็อกแบบอินไลน์ซึ่งจะทำให้เกิดความกว้างและความสูงที่ไม่รู้จัก (มันจะมีตารางอยู่ข้างในพร้อมเนื้อหาที่สร้างขึ้นแบบไดนามิก) นอกจากนี้บล็อกอินไลน์ควรอยู่ในบรรทัดข้อความเช่น "ข้อความของฉัน (บล็อกที่นี่)" ที่จะทำให้มันดูสวยฉันพยายามที่จะทำให้บล็อกเป็นศูนย์กลางในแนวเส้น ดังนั้นถ้าบล็อกมีลักษณะเช่นนี้: TOP MIDDLE BOTTOM จากนั้นบรรทัดข้อความจะอ่าน: "ข้อความของฉัน ([MIDDLE])" (พร้อมด้านบนและล่างด้านบนและด้านล่างบรรทัด) นี่คือสิ่งที่ฉันมี CSS .example { background-color: #0A0; display: inline-block; margin: 2px; padding: 2px; position: relative; text-align: center; } HTML <div class="example">TOP<br />MIDDLE<br />BOTTOM</div>

136 html  vertical-alignment  css 

ฉันมีรหัสต่อไปนี้ซึ่งตั้งค่าคอนเทนเนอร์ที่มีความสูงที่เปลี่ยนแปลงตามความกว้างเมื่อเบราว์เซอร์มีขนาดใหม่ (เพื่อรักษาอัตราส่วนภาพสี่เหลี่ยมจัตุรัส) HTML <div class="responsive-container"> <div class="dummy"></div> <div class="img-container"> <IMG HERE> </div> </div> CSS .responsive-container { position: relative; width: 100%; border: 1px solid black; } .dummy { padding-top: 100%; /* forces 1:1 aspect ratio */ } .img-container { position: absolute; top: 0; bottom: 0; left: 0; right: 0; } ฉันจะจัดแนว …

135 html  css  responsive-design  vertical-alignment 

ฉันต้องการให้ความสูงของ#abc divที่50pxและข้อความจัดแนวตั้งตรงกลางไฟล์div. body{ padding: 0; margin: 0; margin: 0px auto; } #main{ position: relative; background-color:blue; width:500px; height:500px; } #abc{ font:Verdana, Geneva, sans-serif; font-size:18px; text-align:left; background-color:#0F0; height:50px; vertical-align:middle; } <div id="main"> <div id="abc"> asdfasdfafasdfasdf </div> </div> เรียกใช้ข้อมูลโค้ดซ่อนผลลัพธ์ขยายข้อมูลโค้ด

126 css  vertical-alignment 

ฉันมีUIButtonที่ใช้แบบอักษรที่กำหนดเองซึ่งตั้งค่าเมื่อมุมมองของฉันโหลด: - (void)viewDidLoad { [super viewDidLoad]; self.searchButton.titleLabel.font = [UIFont fontWithName: @"FONTNAME" size: 15.0 ]; } ปัญหาที่ฉันพบคือฟอนต์ดูเหมือนจะลอยขึ้นจากเส้นกึ่งกลาง หากฉันแสดงความคิดเห็นในบรรทัดนี้แบบอักษรเริ่มต้นจะปรากฏอยู่ตรงกลางในแนวตั้ง แต่การเปลี่ยนเป็นแบบอักษรที่กำหนดเองจะทำให้การจัดแนวในแนวตั้งแตก ฉันได้รับปัญหาเดียวกันในเซลล์ตารางที่มีแบบอักษรที่กำหนดเองด้วย ฉันจำเป็นต้องบอกมุมมองบางส่วนหรือไม่ว่าแบบอักษรที่กำหนดเองนั้นไม่สูงเท่าฟอนต์อื่น ๆ แก้ไข: ฉันเพิ่งรู้ว่าแบบอักษรที่ฉันใช้เป็น Windows TrueType Font ฉันสามารถใช้ได้ดีใน TextEdit บน Mac มีเพียงปัญหาเกี่ยวกับการจัดตำแหน่งในแอพของฉัน

118 ios  objective-c  fonts  vertical-alignment 

ฉันต้องการ 2 วิธีในการแสดงป้ายแนวตั้งใน Android: ฉลากแนวนอนหัน 90 องศาทวนเข็มนาฬิกา (ตัวอักษรด้านข้าง) ป้ายชื่อแนวนอนที่มีตัวอักษรอยู่ด้านล่าง (เหมือนป้ายร้านค้า) ฉันจำเป็นต้องพัฒนาวิดเจ็ตแบบกำหนดเองสำหรับทั้งสองกรณี (กรณีเดียว) ฉันสามารถสร้าง TextView เพื่อแสดงผลแบบนั้นได้หรือไม่และจะมีวิธีใดที่ดีในการทำสิ่งนั้นหากฉันต้องการกำหนดเองทั้งหมด

110 android  label  textview  vertical-alignment 

ฉันพยายามให้ข้อความไปในแนวตั้งเหมือนที่เราทำได้ในตาราง ms-word แต่จนถึงตอนนี้ฉันทำได้แค่นี้ ... ซึ่งฉันไม่พอใจเพราะมันหมุนกล่อง ... Isn ' ไม่มีวิธีที่จะมีข้อความทิศทางแนวตั้งจริง? ฉันตั้งค่าการหมุนเป็น 305 องศาเท่านั้นในการสาธิตซึ่งไม่ทำให้ข้อความเป็นแนวตั้ง 270degจะ แต่ฉันทำการสาธิตเพื่อแสดงการหมุนเวียนเท่านั้น

106 html  css  text  vertical-alignment 

ฉันกำลังแสดงจำนวนกล่องในแถวพร้อมกับความสูงและความกว้างที่กำหนดซึ่งสร้างจากแท็ก <li> ตอนนี้ฉันต้องจัดข้อความให้อยู่ตรงกลางแนวตั้ง CSS แนวตั้งไม่มีผลกระทบบางทีฉันอาจขาดอะไรไป ??? ฉันไม่ได้มองหาเทคนิคโดยใช้ (ระยะขอบช่องว่างความสูงของบรรทัด) สิ่งเหล่านี้จะใช้ไม่ได้เนื่องจากข้อความบางส่วนมีความยาวและจะแบ่งออกเป็นสองบรรทัด โปรดค้นหารหัสจริง: โค้ด CSS ul.catBlock{ width:960px; height: 270px; border:1px solid #ccc; } ul.catBlock li{ list-style: none; float:left; display:block; text-align: center; width:160px; height: 100px; } ul.catBlock li a{ display: block; padding: 30px 10px 5px 10px; height:60px; } รหัส HTML <ul class="catBlock"> <li><a href="#">IP …

101 html  css  vertical-alignment 

สิ่งที่จะเป็นวิธีการที่ถูกต้องในแนวตั้งศูนย์เนื้อหาใด ๆ divในที่กำหนดไว้กว้าง ในตัวอย่างที่.contentมีสองเนื้อหามีความสูงที่แตกต่างกันว่าเป็นวิธีที่ดีที่สุดในการศูนย์แนวตั้งทั้งใช้ในชั้นเรียน (และใช้ได้กับทุกเบราว์เซอร์และไม่มีวิธีแก้ปัญหาtable-cell) มีการแก้ปัญหาบางอย่างในใจ แต่อยากจะรู้ว่าความคิดอื่น ๆ มีการใช้และposition:absolute; top:0; bottom: 0;margin auto

95 html  css  vertical-alignment 

ฉันรู้ว่าการจัดข้อความในแนวตั้งตรงกลางบล็อกคุณตั้งค่าความสูงของบรรทัดให้เท่ากับความสูงของบล็อก 2emแต่ถ้าผมมีประโยคด้วยคำที่อยู่ตรงกลางที่เป็น ถ้าทั้งประโยคมีความสูงบรรทัดเดียวกับบล็อกที่มีข้อความขนาดใหญ่จะถูกจัดแนวในแนวตั้ง แต่ข้อความที่เล็กกว่าจะอยู่บนเส้นฐานเดียวกันกับข้อความขนาดใหญ่ ฉันจะตั้งค่าให้ข้อความทั้งสองขนาดอยู่ในแนวตั้งได้อย่างไรดังนั้นข้อความที่ใหญ่กว่าจะอยู่บนเส้นฐานต่ำกว่าข้อความขนาดเล็ก

94 css  text  vertical-alignment  baseline 

พิจารณารหัสต่อไปนี้ : HTML: <div> <label for='name'>Name:</label> <input type='text' id='name' /> </div> CSS: div { height: 50px; border: 1px solid blue; } อะไรคือวิธีที่ง่ายที่สุดในการวางlabelและinputตรงกลางdiv(แนวตั้ง)?

92 css  html  vertical-alignment 

ฉันจะใช้vertical-alignเช่นเดียวกับfloatในdivคุณสมบัติ? ใช้vertical-alignงานได้ดีถ้าฉันไม่ใช้ไฟล์float. แต่ถ้าใช้ลูกลอยแล้วไม่ได้ผล เป็นสิ่งสำคัญสำหรับฉันที่จะใช้float:rightสำหรับ div สุดท้าย ฉันกำลังพยายามติดตามหากคุณลบ float ออกจาก div ทั้งหมดก็จะใช้ได้ดี: <div class="wrap"> <div class="left">First div, float left, has more text.</div> <div class="left2">Second div, float left </div> <div class="right">Third div, float right</div> </div> CSS: .wrap{ width: 500px; overflow:hidden; background: pink; } .left { width: 150px; margin-right: 10px; background: yellow; float:left; …

86 html  css  vertical-alignment 

ปัญหาน่าจะเป็นที่ตัวอักษรบางอย่างเช่นg, y, qและอื่น ๆ ที่มีหางที่เนินเขาลงไม่อนุญาตให้แนวตั้งตรงกลาง นี่คือภาพที่จะแสดงปัญหา ตัวละครในกล่องสีเขียวนั้นสมบูรณ์แบบเพราะไม่มีหางเลย ผู้ที่อยู่ในกล่องสีแดงแสดงให้เห็นถึงปัญหา ฉันต้องการให้ตัวละครทุกตัวอยู่กึ่งกลางแนวตั้งอย่างสมบูรณ์ ในภาพตัวละครที่มีหางลงไม่อยู่กึ่งกลางแนวตั้ง เป็นไปได้ที่จะแก้ไข? นี่คือไวโอลินที่แสดงให้เห็นถึงปัญหาที่เกิดขึ้นในเต็มรูปแบบ .avatar { border-radius: 50%; display: inline-block; text-align: center; width: 125px; height: 125px; font-size: 60px; background-color: rgb(81, 75, 93); font-family: "Segoe UI"; margin-bottom: 10px; } .character { position: relative; top: 50%; transform: translateY(-50%); line-height: 100%; color: #fff; } <div …

12 javascript  html  css  vertical-alignment