ฉันจะจัดแนวสิ่งภายในแท็ก span ได้อย่างไร

ฉันจะได้รับ "x" เพื่อจัดแนวตั้งในช่วงกลางของช่วงได้อย่างไร

.foo {
    height: 50px;
    border: solid black 1px;
    display: inline-block;
    vertical-align: middle;
}

<span class="foo">
   x
</span>

ใช้line-height:50px;แทนความสูง ที่ควรทำเคล็ดลับ;)

โปรดทราบว่าline-heightวิธีการล้มเหลวหากคุณมีประโยคยาวspanๆ ที่ทำให้เส้นแบ่งเนื่องจากมีเนื้อที่ไม่เพียงพอ ในกรณีนี้คุณจะมีสองบรรทัดที่มีช่องว่างพร้อมความสูงของพิกเซล N ที่ระบุในคุณสมบัติ

ฉันติดมันเมื่อฉันต้องการที่จะแสดงภาพที่มีข้อความเป็นศูนย์กลางในแนวตั้งทางด้านขวาของมันซึ่งทำงานในโปรแกรมประยุกต์บนเว็บที่ตอบสนอง ในฐานะฐานฉันใช้แนวทางที่แนะนำโดย Eric Nickus และ Felipe Tadeo

หากคุณต้องการบรรลุ:

และนี่:

.container {
    background: url( "https://i.imgur.com/tAlPtC4.jpg" ) no-repeat;
    display: inline-block;
    background-size: 40px 40px; /* image's size */
    height: 40px; /* image's height */
    padding-left: 50px; /* image's width plus 10 px (margin between text and image) */
}

.container span {
    height: 40px; /* image's height */
    display: table-cell;
    vertical-align: middle;
}

<span class="container">
    <span>This is a centered sentence next to an image</span>
</span>

นี่เป็นวิธีที่ง่ายที่สุดในการทำหากคุณต้องการหลายบรรทัด ห่อคุณspan'd ข้อความในอีกและระบุความสูงด้วยspan line-heightเคล็ดลับที่จะหลายบรรทัดจะถูกรีเซ็ตภายใน'sspanline-height

<span class="textvalignmiddle"><span>YOUR TEXT HERE</span></span>

.textvalignmiddle {
    line-height: /*set height*/;
}

.textvalignmiddle > span {
    display: inline-block;
    vertical-align: middle;
    line-height: 1em; /*set line height back to normal*/
}

การสาธิต

แน่นอนด้านนอกspanอาจเป็นdivหรือ whathaveyou

วิธี flexbox:

.foo {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50px;
}

ฉันต้องการสิ่งนี้สำหรับการเชื่อมโยงดังนั้นฉันจึงใส่เครื่องหมายจุดด้วย a-tag และ div จากนั้นจัดกึ่งกลางแท็กให้อยู่ตรงกลาง

HTML

<div>
    <a class="tester" href="#">
        <span>Home</span>
    </a>
</div>

CSS

.tester{
    display: inline-block;
    width: 9em;
    height: 3em;
    text-align: center;
}
.tester>span{
    position: relative;
    top: 25%;
}

CSS ภาพกึ่งกลางแนวตั้งและข้อความ

ฉันได้สร้างตัวอย่างหนึ่งสำหรับศูนย์ภาพแนวตั้งและข้อความฉันยังมีการทดสอบเกี่ยวกับ firefox, chrome, Safari, Internet explorer 9 และ 8 ด้วย

มันสั้นมากและง่าย css และ html, กรุณาตรวจสอบรหัสด้านล่างและคุณสามารถค้นหาผลลัพธ์บน screenshort

HTML

<div class="frame">
    <img src="capabilities_icon1.png" alt="" />
</div>

CSS

  .frame {
        height: 160px;      
        width: 160px;
        border: 1px solid red;
        white-space: nowrap;
        text-align: center; margin: 1em 0;
    }

    .frame::before {
        display: inline-block;
        height: 100%;
        vertical-align: middle;
        content:"";
    }

    img {
        background: #3A6F9A;
        vertical-align: middle;
    }

เอาท์พุท ใส่คำอธิบายภาพที่นี่

สิ่งนี้ใช้ได้สำหรับฉัน (Keltex พูดเช่นเดียวกัน)

.foo {
height: 50px;
...
}
.foo span{
vertical-align: middle; 
}

<span class="foo"> <span>middle!</span></span>

แอตทริบิวต์ css แนวตั้งไม่ได้ทำตามที่คุณคาดหวัง บทความนี้จะอธิบาย 2 วิธีในการจัดแนวองค์ประกอบโดยใช้ css

ตั้ง padding-top ให้เป็นค่าที่เหมาะสมในการกด x ลงจากนั้นลบค่าที่คุณมีสำหรับ padding-top จากความสูง