スパンタグ内で何かを垂直方向に配置するにはどうすればよいですか？

「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ピクセルの高さのギャップを持つ2つのラインがあります。

レスポンシブウェブアプリケーションで機能する、右側に垂直方向に中央揃えされたテキストを含む画像を表示したいと思ったとき、私はそれに夢中になりました。基本として、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。複数行のトリックは、内部リセットされる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*/
}

デモ

もちろん、外側はspan可能性divやwhathaveyou

フレックスボックスの方法：

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

リンクにこれが必要だったので、スパンをaタグと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垂直中央の画像とテキスト

垂直方向の画像センターとテキストのデモを1つ作成しました。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;
    }

出力は、 ここに画像の説明を入力します。

これは私のために働きます（ケルテックスは同じことを言った）

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

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

vertical-alignのcss属性は、残念ながら期待どおりの動作をしません。この記事では、CSSを使用して要素を垂直方向に配置する2つの方法について説明します。

padding-topを適切な値に設定してxを押し下げ、高さからpadding-topの値を差し引きます。