7

左フローティング画像の右側に複数行のテキストを垂直方向に揃えたいと思います。

でも

  • 画像サイズ（高さと幅）は異なり、事前に不明です
  • テキストの長さもさまざまで、通常は複数行で構成されます
  • ソリューションは、さまざまな画面サイズに適応できるように応答性が高い必要があります
  • ソリューションには、画像、div、その他の特定の px 幅または高さの寸法を含めないでください。
    • 画像の横にテキスト用の十分なスペースがない場合、特定のシナリオではテキストを画像の下にドロップする必要があるため、テーブルを使用したくありません

以前の質問を振り返りましたが、探しているものとまったく一致するものはありません。どのデバイスでも動作する必要があるため、どのディメンションにも絶対ピクセル値を使用できません。

それを達成するには、次のスタイルをどのように設定すればよいですか?

<img src="image.jpg" >

<p>Here is the text that should go to the right of the image</p>

助けてくれてありがとう。

4

1 に答える 1

12

これで始められます: jsFiddle の例-より良い方法については、以下を参照してください。

基本的に、vertical-align:middleとは 要素と要素のdisplay:inline-block両方でセンタリングに使用されます。pimg

HTML

<div class="element">
    <img src="http://placehold.it/150x150"/>
    <p>Lorem Ipsum is simply dummy text </p>
</div>

CSS

.element {
    background:rgb(134, 226, 255);
    margin:10px;
}
p {
    display:inline-block;
    margin:0px;
    width:70%;
    background:white;
    vertical-align:middle;
}
img {
    display:inline-block;
    vertical-align:middle;
}

display:table/ display:table-cellSame HTMLを使用したより良いアプローチを次に示します。

jsFiddle の例- セミレスポンシブ...その他の jsFiddle の例- レスポンシブimg要素..

CSS

.element {
    width:100%;
    display:table;
    background:rgb(134, 226, 255);
    margin:10px 0px;
    padding:10px;
}
p {
    display:table-cell;
    height:100%;
    vertical-align:middle;
    background:white;
}
img {
    display:table-cell;
    width:100%;
    height:auto;
}

メディアクエリを使用したさらに別の更新

明らかに、必要なブレークポイントを使用できます。これは単なる例であるため、480px を使用します。ウィンドウのサイズを変更してみてください。jsFiddle の例

CSS

@media only screen and (min-width: 480px) {
.element {
    width:100%;
    display:table;
    background:rgb(134, 226, 255);
    margin:10px 0px;
    padding:10px;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
}
p {
    display:table-cell;
    height:100%;
    vertical-align:middle;
    background:white;
}
img {
    display:table-cell;
    width:100%;
    height:auto;
}
}
@media only screen and (max-width: 479px) {
.element {
    width:100%;
    background:rgb(134, 226, 255);
    margin:10px 0px;
    padding:10px;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
}
p {
    background:white;
}
img {
    width:50%;
    margin:0px auto;
    display:block;
    height:auto;
}
}
于 2013-11-12T23:16:20.353 に答える