18

私はこのHTMLを持っています:

<a href="href" class="my-a-class>
    <img alt="alt" src="/path/to/image.jpg" class="my-img-class" />&nbsp;My text
</a>

アンカーの画像に影響を与えずに「私のテキスト」を垂直方向に揃える必要があります。HTML タグを追加することはできません。これを行うには、CSS のみを使用する必要があります。なにか提案を？

4

5 に答える 5

26

を使用してこれを行うことができます.my-a-class { line-height: value }。value画像の高さに置き換えます。

編集 - -

最近では、これにフレックスボックスを使用する方がはるかに優れています。

.my-a-class {
   display: flex;
   align-items: center;
   justify-content: space-between;
}
于 2013-02-01T10:43:28.600 に答える
3

画像をテキストに合わせます。

.my-a-class img { vertical-align: middle; }

デモ： http： //jsfiddle.net/Guffa/hz6AV/

于 2013-02-01T10:44:15.540 に答える
1

このコードを試してください：

a {
    position:relative;
    height:11em;
}
a img{
    position: absolute:
    top:0;
    bottom:0;
    margin-top:auto;
    margin-bottom:auto;
}

また

.my-a-class {
    position:relative;
    height:11em;
}
.my-a-class .my-img-class{
    position: absolute:
    top:0;
    bottom:0;
    margin-top:auto;
    margin-bottom:auto;
}
于 2013-02-01T10:45:36.313 に答える
1

に設定するa img{vertical-align:middle;}か、.my-img-class{vertical-align:middle;}動作するはずです。

于 2013-02-01T10:42:00.433 に答える
0

画像とアイコンをアンカー タグに配置する適切な方法は次のとおりです。

あなたのCSSで

a {
   background: transparent url(/images/your_image) scroll no-repeat left center;
   padding: 2px 0px 2px 20px; //fit as you need
}

あなたのHTMLで

<a href="url">Text</a>
于 2014-08-26T14:43:01.990 に答える