3

「赤い」四角をテキストで垂直方向に集中させたい。div内にいくつかの内部がありますが、これが何かに影響するかどうかはわかりません... 以下の css は機能しますが、すべてのタグ<a>が多すぎるようです。vertical-align: middle;同じhtmlツリーでこれをより簡単にする方法を知っている人はいますか? ありがとう！

HTML:

<div>
    <a href="#"></a>
</div>
<span>Testing...</span>

CSS:

div{
    display: inline-block;
    margin: 0 3px;
    vertical-align: middle;
}

a{
    width: 5px;
    height: 5px;
    background-color: red;
    display: block;
    vertical-align: middle;

}

span{
    font-size: 26px;
    vertical-align: middle;
}

http://jsfiddle.net/sGgZb/6/

4

3 に答える 3

3

スパンだけが垂直整列ルールを必要とします。

span{
    font-size: 26px;
    vertical-align: middle;
}

jsFiddle の例

于 2013-05-08T20:06:44.053 に答える
0

あなたが達成しようとしているのは、多くの垂直方向の配置を使用しないことだけである場合、コンテナー div を使用せずにinline-blocka 自体を配置することで同じ効果を達成しました。

http://jsfiddle.net/sGgZb/19/

于 2013-05-08T20:20:05.787 に答える
0

これは純粋にスタイルの強化であるため、疑似要素を使用してください。追加のマークアップは必要なく、CSS はよりクリーンです。

HTML:

<span>Testing...</span>

CSS:

span {
    font-size: 26px;
    padding: 0 0 0 10px;
}
span::before {
    content: " ";
    width: 5px;
    height: 5px;
    display: inline-block;
    background: #f00;
    vertical-align: middle;
}

jsFiddle の例

于 2013-05-08T20:12:50.220 に答える