如何垂直對齊跨度標簽內的某些內容？

Question

如何讓“x”在跨度中間垂直對齊？

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

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

Answer 1

使用line-height:50px; 而不是高度。 這應該夠了吧 ;）

Answer 2

請注意，如果在span有一個較長的句子，因為沒有足夠的空間， line-height處理方法會失敗。 在這種情況下，您將有兩條線，其間隙與屬性中指定的N像素的高度相同。

當我想在右側顯示帶有垂直居中文本的圖像時，我堅持使用它在響應式Web應用程序中工作。 作為基礎，我使用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> 

Answer 3

如果您需要多行，這是最簡單的方法。 包裹你span另一個span文本並用line-height指定它line-height 。 多行的技巧是重置內span的line-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*/
}

DEMO

當然外span可能是div或whathaveyou

Answer 4

flexbox方式：

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

Answer 5

我需要這個鏈接，所以我用一個標簽和一個div包裝了span，然后將span標簽本身居中

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%;
}

Answer 6

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;
    }

輸出 在此處輸入圖像描述

Answer 7

這對我有用（Keltex說同樣的）

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

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

Answer 8

不幸的是，vertical-align css屬性沒有達到預期的效果。 本文介紹了使用css垂直對齊元素的兩種方法。

Answer 9

將padding-top設置為適當的值以向下推x，然后從高度中減去padding-top的值。

Answer 10

只是提供一個替代方案，以防您將元素封裝在一個靈活的容器中（例如：display: flex）：

align-self: center;

更多信息