2017-06-13 13 views
0

ベースラインごとに垂直に並べるテキストと3つの画像があります。私はvertical-alignプロパティを使ってアイテムをテキストボトムで整列させましたが、それでも正しく整列しません。 Vertical align problemテキストとイメージをベースラインで垂直に整列する方法は?

透明ブラックボックスがベースラインの問題を確認するのに役立つスクリーンショットをご覧ください。

この特定sitationでの問題は、テキストが、画像の位置合わせされていないということで、下のボーダー上のいくつかの空白がある:ANSWER/NEW SNIPPET編集

.container { 
 
    font-size: 16px; 
 
} 
 

 
.ayc_cooperation { 
 
    margin: 0 5% 0 5%; 
 
    font-size: 0.75rem; 
 
    font-weight: 300; 
 
    color: #535353; 
 
} 
 

 
.ayc_cooperation:before { 
 
    content: ""; 
 
    display: table; 
 
    clear: both; 
 
} 
 

 
.ayc_cooperation:after { 
 
    content: ""; 
 
    display: block; 
 
    height: 6.5rem; 
 
} 
 

 
.ayc_cooperation_ini_logo { 
 
    float: left; 
 
    width: 9.6875rem; 
 
    height: 4.5rem; 
 
} 
 

 
.ayc_cooperation_ini_logo img { 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 

 
.ayc_co_container { 
 
    float: right; 
 
    line-height: 8; 
 
    height: 4.5rem; 
 
} 
 

 
.ayc_co_container img { 
 
    max-width: 100%; 
 
    max-height: 100%; 
 
} 
 

 
.ayc_co_container img:first-child { 
 
    width: 7.5rem; 
 
} 
 

 
.ayc_co_container img:nth-child(2) { 
 
    width: 8rem; 
 
} 
 

 
.ayc_co_container img { 
 
    margin-right: 2.5rem; 
 
} 
 

 
.ayc_co { 
 
    display: inline-block; 
 
    margin-left: 2.5rem; 
 
    font-size: 0.75rem; 
 
    line-height: 14px; 
 
    vertical-align: text-bottom; 
 
} 
 

 
.ayc_de_lebe_ev_img { 
 
    width: 8rem; 
 
} 
 

 
.ayc_de_lebe_ev_img img { 
 
    max-width: 100%; 
 
    height: auto; 
 
} 
 

 
.ayc_de_lebe_img { 
 
    width: 7.5rem; 
 
} 
 

 
.ayc_de_lebe_img img { 
 
    max-width: 100%; 
 
    height: auto; 
 
} 
 

 
.ayc_gilead_img { 
 
    width: 6rem; 
 
} 
 

 
.ayc_gilead_img img { 
 
    max-width: 100%; 
 
    height: auto; 
 
}
<div class="container"> 
 
    <div class="ayc_co_container"> 
 
    <div class="ayc_co_text ayc_co"> 
 
     Eine Kooperation von: 
 
    </div> 
 
    <div class="ayc_de_lebe_img ayc_co"> 
 
     <img src="http://presse.bist-du-chris.de/wp-content/themes/ayc_press/assets/media/img/[email protected]" alt="Deutsche Leberstiftung"> 
 
    </div> 
 
    <div class="ayc_de_lebe_ev_img ayc_co"> 
 
     <img src="http://presse.bist-du-chris.de/wp-content/themes/ayc_press/assets/media/img/[email protected]" alt="Deutsche Leberhilfe e.V"> 
 
    </div> 
 
    <div class="ayc_gilead_img ayc_co"> 
 
     <img src="http://presse.bist-du-chris.de/wp-content/themes/ayc_press/assets/media/img/[email protected]" alt="Gilead Sciences GmbH"> 
 
    </div> 
 
    </div> 
 
</div>

+0

をあなたのイメージは、ビットマップイメージ-方法ですので、ベースラインがどこにあるか、Webブラウザが知っているだろうことはできませんか? – Terry

+1

要素自体は整列していますが、画像内のテキストは整形されていません。 CSSは画像内のテキストに基づいて要素を魔法のように配置することはできません。画像の下からテキストを並べるように画像を編集する必要があります。 –

答えて

1

画像の一部である画像の一部、特に "Deutsche Leberstiftung"画像の一部の画像実際には、希望の結果を得るために画像を編集/カットするか、position: relativeの設定とbottomの設定を使用して、少し上げたり下げたりしなければなりません。しかし、あなたのアイデアを与えるのに十分 - あなたはbottom値は変更することができます。

.container { 
 
    font-size: 16px; 
 
} 
 

 
.ayc_cooperation { 
 
    margin: 0 5% 0 5%; 
 
    font-size: 0.75rem; 
 
    font-weight: 300; 
 
    color: #535353; 
 
} 
 

 
.ayc_cooperation:before { 
 
    content: ""; 
 
    display: table; 
 
    clear: both; 
 
} 
 

 
.ayc_cooperation:after { 
 
    content: ""; 
 
    display: block; 
 
    height: 6.5rem; 
 
} 
 

 
.ayc_cooperation_ini_logo { 
 
    float: left; 
 
    width: 9.6875rem; 
 
    height: 4.5rem; 
 
} 
 

 
.ayc_cooperation_ini_logo img { 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 

 
.ayc_co_container { 
 
    float: right; 
 
    line-height: 8; 
 
    height: 4.5rem; 
 
} 
 

 
.ayc_co_container img { 
 
    max-width: 100%; 
 
    max-height: 100%; 
 
} 
 

 
.ayc_co_container img:first-child { 
 
    width: 7.5rem; 
 
} 
 

 
.ayc_co_container img:nth-child(2) { 
 
    width: 8rem; 
 
} 
 

 
.ayc_co_container img { 
 
    margin-right: 2.5rem; 
 
} 
 

 
.ayc_co { 
 
    display: inline-block; 
 
    margin-left: 2.5rem; 
 
    font-size: 0.75rem; 
 
    line-height: 14px; 
 
    vertical-align: text-bottom; 
 
} 
 

 
.ayc_de_lebe_ev_img { 
 
    width: 8rem; 
 
\t position: relative; 
 
\t bottom: -2px; 
 
} 
 

 
.ayc_de_lebe_ev_img img { 
 
    max-width: 100%; 
 
    height: auto; 
 
} 
 

 
.ayc_de_lebe_img { 
 
    width: 7.5rem; 
 
\t position: relative; 
 
\t bottom: -4px; 
 
} 
 
} 
 

 
.ayc_de_lebe_img img { 
 
    max-width: 100%; 
 
    height: auto; 
 
} 
 

 
.ayc_gilead_img { 
 
    width: 6rem; 
 
\t position: relative; 
 
\t bottom: 0px; 
 
} 
 

 
.ayc_gilead_img img { 
 
    max-width: 100%; 
 
    height: auto; 
 
}
<div class="container"> 
 
    <div class="ayc_co_container"> 
 
    <div class="ayc_co_text ayc_co"> 
 
     Eine Kooperation von: 
 
    </div> 
 
    <div class="ayc_de_lebe_img ayc_co"> 
 
     <img src="http://presse.bist-du-chris.de/wp-content/themes/ayc_press/assets/media/img/[email protected]" alt="Deutsche Leberstiftung"> 
 
    </div> 
 
    <div class="ayc_de_lebe_ev_img ayc_co"> 
 
     <img src="http://presse.bist-du-chris.de/wp-content/themes/ayc_press/assets/media/img/[email protected]" alt="Deutsche Leberhilfe e.V"> 
 
    </div> 
 
    <div class="ayc_gilead_img ayc_co"> 
 
     <img src="http://presse.bist-du-chris.de/wp-content/themes/ayc_press/assets/media/img/[email protected]" alt="Gilead Sciences GmbH"> 
 
    </div> 
 
    </div> 
 
</div>

+0

私の編集した答えに注意してください。スニペットには、これまで私の答えの文章で可能性としてのみ記述した解決策が含まれています。 – Johannes

+0

お返事ありがとうございます。私は画像を編集してdisplay:tableの実装を使いました。モバイルビューポートの場合は、テーブルの実装をdisplay:blockに置き換えます。 – forethought

関連する問題