1

垂直方向の配置の問題について質問があります

昨日質問した者です

画像とテキストを縦方向に揃える方法

しかし、コードとテキストを変更しました。スパン内のテキストには 2 行のテキストがあり、画像とテキストの中央を垂直方向に揃える方法がわかりません。

ほとんどの要素をオンに設定vertical-alignしmiddleましたが、まだ機能していません

私のjsfiddle

http://jsfiddle.net/wjPxS/4/

誰でもそれについて私を助けることができますか? ありがとう！

4

2 に答える 2

0

ここにそれを行う1つの方法があります。

このHTMLの場合:

<div class='div1'>
    <span class='title'> this is the text<br>this is the second text</span>
    <a class='link' href='#'>
        <img class='img' src='http://placehold.it/100x50'/>
    </a>
</div>

次のCSSを試してください。

.div1 {
    border-color: black;
    border-style: solid;
    border-width: 0 1px 1px 1px;
    padding: 10px;
    font-size: .8em;
    height: auto;
}
.title {
    width: 200px;
    height: auto;
    vertical-align: middle;
    display: inline-block;
    border: 1px solid blue;
}
.img {
    vertical-align: middle;
}

display: inline-blockforを使用すると、より良い結果が得られます。それ以外の場合は、ブロック.titleの 2 行目に対して位置合わせが行われます。.title

デモを参照してください: http://jsfiddle.net/audetwebdesign/mqwzU/

于 2013-09-26T23:57:38.237 に答える
0

私はFiddleを書いて、すべてのものを何かと垂直方向に整列させる方法を示しました。2行のテキストでも機能し、必要なものはほとんどすべて機能します。

HTML:

<div class="Container">
    <div class="Content">
        I'm the Content
    </div>
</div>

CSS:

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

.Content
{
    display: inline-block;
    vertical-align: middle;
}

あなたのフィドル

これは、あなたのケースのためだけに更新されたFiddleです。(@Marc Audet: あなたの画像を使用しました)

于 2013-09-26T23:45:14.060 に答える