ข้อความการจัดแนวแนวตั้ง CSS ภายใน li

ฉันกำลังแสดงจำนวนกล่องในแถวพร้อมกับความสูงและความกว้างที่กำหนดซึ่งสร้างจากแท็ก <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 Phone</a></li>
 <li><a href="#">Dual SIM Switch Server</a></li>
 <li><a href="#">IP PBX</a></li>
</ul>

กําหนดของพ่อแม่ด้วยdisplay: tableและองค์ประกอบตัวเองด้วยและvertical-align: middledisplay: table-cell

line-heightเป็นวิธีจัดข้อความในแนวตั้ง เป็นมาตรฐานที่ดีและฉันไม่ถือว่าเป็นการ "แฮ็ก" แค่เพิ่มline-height: 100pxของคุณul.catBlock liก็จะดี

ในกรณีนี้คุณอาจต้องเพิ่มเข้าไปul.catBlock li aแทนเนื่องจากข้อความทั้งหมดในไฟล์liนั้นอยู่ในaไฟล์. ฉันเคยเห็นสิ่งแปลก ๆ เกิดขึ้นเมื่อคุณทำสิ่งนี้ดังนั้นลองทั้งสองอย่างและดูว่าอันไหนได้ผล

อย่างไรก็ตามหลายปีที่ผ่านมาคำตอบนี้อาจเป็นไปได้ใครก็ตามที่เจอสิ่งนี้อาจต้องการลอง

li {
    display: flex;
    flex-direction: row;
    align-items: center;
}

การรองรับเบราว์เซอร์สำหรับ flexbox นั้นดีกว่าเมื่อ @scottjoudry โพสต์คำตอบของเขาด้านบน แต่คุณอาจต้องการพิจารณาคำนำหน้าหรือตัวเลือกอื่น ๆ หากคุณพยายามรองรับเบราว์เซอร์รุ่นเก่ามาก caniuse: ดิ้น

น่าแปลก (หรือเปล่า) vertical-alignเครื่องมือนี้ใช้ได้ดีที่สุดสำหรับงานนี้ เหนือสิ่งอื่นใดไม่จำเป็นต้องใช้ Javascript

ในตัวอย่างต่อไปนี้ฉันกำลังวางตำแหน่งของouterคลาสไว้ตรงกลางของร่างกายและinnerชั้นเรียนอยู่ตรงกลางของไฟล์outerชั้นเรียน

ดูตัวอย่าง: http://jsfiddle.net/tLkSV/513/

HTML:

<div id="container">
    <span></span><div class="outer">
        <span></span><div class="inner">

        </div>
    </div>
</div>

CSS:

html, body {
    height: 100%;
    margin: 0;
    padding: 0; }
#container {
    text-align: center;
    height: 100%; }
span { 
    height: 100%;
    vertical-align: middle;
    display: inline-block; }
.outer {
    width: 100px;
    height: 200px;
    padding: 0;
    border: 1px solid #000;
    vertical-align: middle;
    display: inline-block; }
.inner {
    background: red;
    width: 30px;
    height: 20px;    
    vertical-align: middle;
    display: inline-block; }

การจัดแนวแนวตั้งทำงานโดยการจัดตำแหน่งกึ่งกลางขององค์ประกอบที่อยู่ติดกัน การนำแนวตั้งไปใช้กับองค์ประกอบเดียวไม่ได้ทำอะไรเลย หากคุณเพิ่มองค์ประกอบที่สองที่ไม่มีความกว้าง แต่เป็นความสูงของคอนเทนเนอร์องค์ประกอบเดียวของคุณจะย้ายไปที่กึ่งกลางในแนวตั้งโดยมีองค์ประกอบที่ไม่มีความกว้างนี้จึงจัดให้อยู่กึ่งกลางในแนวตั้ง ข้อกำหนดเพียงอย่างเดียวคือคุณตั้งค่าองค์ประกอบทั้งสองเป็นแบบอินไลน์ (หรืออินไลน์บล็อก) และตั้งค่าแอ็ตทริบิวต์แนวตั้งเป็นvertical-align: middleและการตั้งค่าแอตทริบิวต์แนวตั้งชิดของพวกเขาไป

หมายเหตุ: คุณอาจสังเกตเห็นในโค้ดของฉันด้านล่างว่า<span>แท็กและแท็กของฉัน<div>สัมผัสกัน เนื่องจากทั้งคู่เป็นองค์ประกอบแบบอินไลน์จริง ๆ แล้วช่องว่างจะเพิ่มช่องว่างระหว่างองค์ประกอบที่ไม่มีความกว้างและ div ของคุณดังนั้นอย่าลืมปล่อยมันออกไป

ในอนาคตปัญหานี้จะได้รับการแก้ไขโดย flexbox ตอนนี้การสนับสนุนเบราว์เซอร์เป็นเรื่องที่น่าอึดอัด แต่ได้รับการสนับสนุนในรูปแบบใดรูปแบบหนึ่งในเบราว์เซอร์ปัจจุบันทั้งหมด

การสนับสนุนเบราว์เซอร์: http://caniuse.com/flexbox

.vertically_aligned {

    /* older webkit */
    display: -webkit-box;
    -webkit-box-align: center;
    -webkit-justify-content: center;

    /* older firefox */
    display: -moz-box;
    -moz-box-align: center;
    -moz-box-pack: center;

    /* IE10*/
    display: -ms-flexbox;
    -ms-flex-align: center;
    -ms-flex-pack: center;

    /* newer webkit */
    display: -webkit-flex;
    -webkit-align-items: center;
    -webkit-box-pack: center;

    /* Standard Form - IE 11+, FF 22+, Chrome 29+, Opera 17+ */
    display: flex;
    align-items: center;
    justify-content: center;
}

ความเป็นมาของ Flexbox: http://css-tricks.com/snippets/css/a-guide-to-flexbox/

ไม่มีคำตอบที่สมบูรณ์แบบให้ที่นี่ยกเว้นคำตอบของ Asaf ซึ่งไม่ได้ระบุรหัสหรือตัวอย่างใด ๆ ดังนั้นฉันต้องการมีส่วนร่วมของฉัน ...

ตามลำดับในการvertical-align: middle;ทำงานคุณต้องใช้display: table;สำหรับulองค์ประกอบของคุณและdisplay: table-cell;สำหรับliองค์ประกอบและมากกว่าที่คุณจะใช้vertical-align: middle;สำหรับliองค์ประกอบได้

คุณไม่จำเป็นต้องให้การใด ๆ อย่างชัดเจนmargins, paddingsที่จะทำให้ข้อความของคุณอยู่ตรงกลางในแนวตั้ง

การสาธิต

ul.catBlock{
    display: table;
    width:960px; 
    height: 270px; 
    border:1px solid #ccc; 
}

ul.catBlock li {
    list-style: none;
    display: table-cell; 
    text-align: center; 
    width:160px; 
    vertical-align: middle;
}

ul.catBlock li a { 
    display: block;
}

ตามที่อธิบายไว้ในที่นี่: https://css-tricks.com/centering-in-the-unknown/

จากการทดสอบในทางปฏิบัติจริงวิธีแก้ปัญหาที่น่าเชื่อถือที่สุด แต่สวยงามที่สุดคือการแทรกองค์ประกอบแบบอินไลน์ของผู้ช่วยเข้าไปใน<li />องค์ประกอบในฐานะลูกคนที่ 1 ซึ่งความสูงควรตั้งไว้ที่ 100% (ของความสูงของผู้ปกครอง<li />) และvertical-alignตั้งค่าไว้ตรงกลาง . เพื่อให้บรรลุเป้าหมายนี้คุณสามารถใส่ a <span />แต่วิธีที่สะดวกที่สุดคือการใช้li:afterคลาสหลอก

ภาพหน้าจอ:

ul.menu-horizontal {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: inline-block;
    vertical-align: middle;
}

ul.menu-horizontal:after {
    content: '';
    clear: both;
    float: none;
    display: block;
}

ul.menu-horizontal li {
    padding: 5px 10px;
    box-sizing: border-box;
    height: 100%;
    cursor: pointer;
    display: inline-block;
    vertical-align: middle;
    float: left;
}

/* The magic happens here! */
ul.menu-horizontal li:before {
    content: '';
    display: inline;
    height: 100%;
    vertical-align: middle;
}

ลองใช้วิธีแก้ปัญหานี้

ทำงานได้ดีที่สุดในกรณีส่วนใหญ่

คุณอาจต้องใช้divแทนliสำหรับสิ่งนั้น

.DivParent {
    height: 100px;
    border: 1px solid lime;
    white-space: nowrap;
}
.verticallyAlignedDiv {
    display: inline-block;
    vertical-align: middle;
    white-space: normal;
}
.DivHelper {
    display: inline-block;
    vertical-align: middle;
    height:100%;
}

<div class="DivParent">
    <div class="verticallyAlignedDiv">
        <p>Isnt it good!</p>
     
    </div><div class="DivHelper"></div>
</div>

วิธีแก้ง่ายๆสำหรับการจัดแนวตั้งตรงกลาง ... สำหรับฉันมันใช้งานได้เหมือนมีเสน่ห์

ul{display:table; text-align:center; margin:0 auto;}
li{display:inline-block; text-align:center;}
li.items_inside_li{display:inline-block; vertical-align:middle;}