21

浮いた画像の後にスパンを縦に揃えたい。私はスタックオーバーフローでそれを検索し、この投稿を見つけました。しかし、私のイメージは浮かんでいます。

<div>
    <img style="width:30px;height:30px; float:left">
    <span style="vertical-align:middle">Doesn't work.</span>
</div>

私はvertical-align:middleイメージに与えます、そして何も変わりません！

ありがとう

4

7 に答える 7

13

これは非常に古い投稿ですが、次を使用してこれを実現できますFlexbox。

div {
 display: flex;
 align-items: center;
}
<div>
<img style="width:30px;height:30px;" src="http://lorempixel.com/output/abstract-q-c-640-480-8.jpg" />
<span>Doesn't work.</span>
</div>

JsFiddleの例

于 2016-07-03T10:19:18.220 に答える
12

まずそれから削除floatします。このように書いてください：

<img style="width:30px;height:30px;vertical-align:middle" src="http://lorempixel.com/output/abstract-q-c-640-480-8.jpg">
    <span>Doesn't work.</span>

これをチェックしてくださいhttp://jsfiddle.net/ws3Uf/

于 2012-05-09T12:40:56.987 に答える
6

追加line-height（画像の高さに等しい）：

<div>
    <img style="width:30px;height:30px; float:left">
    <span style="vertical-align:middle; line-height: 30px;">Works!</span>
</div>

例を参照してください。

于 2012-05-09T12:46:04.033 に答える
1

A<span>はインライン要素です。display:blockスパンに追加してみて、画像と同じ高さと一致する線の高さを指定してください。それも残して浮かせます。それはうまくいくはずです

于 2012-05-09T12:40:16.330 に答える
1

手動で変更することもできます

<div>
    <img style="width:30px;height:30px float:left">
    <span style="float:left;padding-top:15px;">Will work.</span>
</div>

デモ

または、テーブルを使用できます

于 2012-05-09T12:41:33.633 に答える
0

次のことができます。

  div:after {
        content:"";
        clear:both;
        display:block;
    }
于 2013-11-07T18:57:01.520 に答える
0
  • 写真を浮かせる
  • 画像に高さを設定します。
  • 画像の後にdiv1>div2>textを置きます。
  • div1を画像と同じ高さに設定します。
  • div2の位置を相対、トップ0に設定し、translateY-50を変換します。

https://codepen.io/aungthihaaung/pen/ExXGvGy

.picture {
  height: 300px;
  float: left;
}

.div1 {
  height: 300px;
}

.div2 {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}


 <img src="https://via.placeholder.com/300" class="picture" />
  <div class="div1">
    <div class="div2">
      <h1>Hi There!</h1>
      Lorem ipsum dolor, sit amet consectetur adipisicing elit. Et, deleniti
      perferendis! Ut, eaque iste incidunt atque perferendis odio laborum
      nobis obcaecati exercitationem molestiae nihil est recusandae
      mollitia. Fuga beatae inventore, adipisci ipsa aliquid corporis harum
      ex tenetur iure assumenda optio quod eaque omnis porro ab consequuntur
      unde a totam minima.
    </div>
  </div>
于 2021-09-28T06:32:44.707 に答える