Question

我想将文字与图像对齐，文字正在破碎，其余文字都在图像之下。

这是我试过的：

HTML：

<section>
<div class="left"><img src="https://s-media-cache-ak0.pinimg.com/236x/44/9f/02/449f02a1a0328ed5f311112b83407fdf.jpg" alt="" ></div>
<div class="right"><span>Demo Demo demo Demo Demo demo Demo Demo demo Demo Demo demo Demo Demo demo Demo Demo demo Demo Demo demo Demo Demo demo Demo Demo demo Demo Demo demo Demo Demo demo Demo Demo demo Demo Demo demo Demo Demo demo Demo Demo demo </span></div>
</section>

CSS：

div.left{
  vertical-align: middle;
   display: inline-block;
}
div.right{
  vertical-align: middle;
  display: inline;
}

Answer 1

请尝试使用此代码

div.left{
  vertical-align: middle;
   display: inline-block;
   float:left;
}
div.right{
  vertical-align: middle;
  display: inline;
}

<section>
    <div class="left"><img src="https://s-media-cache-ak0.pinimg.com/236x/44/9f/02/449f02a1a0328ed5f311112b83407fdf.jpg" alt="" ></div>
    <div class="right"><span>Demo Demo demo Demo Demo demo Demo Demo demo Demo Demo demo Demo Demo demo Demo Demo demo Demo Demo demo Demo Demo demo Demo Demo demo Demo Demo demo Demo Demo demo Demo Demo demo Demo Demo demo Demo Demo demo Demo Demo demo </span></div>
</section>

Answer 2

一种好方法是将其安排在table中。我认为它更整洁，更容易组织。

div.left {
  vertical-align: middle;
  display: inline-block;
}
div.right {
  vertical-align: middle;
  display: inline;
}

<section>
  <table>
    <tr>
      <td>
        <div class="left">
          <img src="https://s-media-cache-ak0.pinimg.com/236x/44/9f/02/449f02a1a0328ed5f311112b83407fdf.jpg" alt="">
        </div>
      </td>
      <td>
        <div class="right"><span>Demo Demo demo Demo Demo demo Demo Demo demo Demo Demo demo Demo Demo demo Demo Demo demo Demo Demo demo Demo Demo demo Demo Demo demo Demo Demo demo Demo Demo demo Demo Demo demo Demo Demo demo Demo Demo demo Demo Demo demo </span>
        </div>
      </td>
    </tr>
  </table>
</section>

请参阅Fiddle

Answer 3

如果您需要使用div。

＆＃13;

div.left {
  vertical-align: middle;
  display: table-cell;
  padding-right: 10px;
}
div.right {
  vertical-align: middle;
  display: table-cell;
}

＆＃13;

<section>
  <div class="left">
    <img src="https://s-media-cache-ak0.pinimg.com/236x/44/9f/02/449f02a1a0328ed5f311112b83407fdf.jpg" alt="">
  </div>
  <div class="right"><span>Demo Demo demo Demo Demo demo Demo Demo demo Demo Demo demo Demo Demo demo Demo Demo demo Demo Demo demo Demo Demo demo Demo Demo demo Demo Demo demo Demo Demo demo Demo </span>
  </div>
</section>

＆＃13;

Answer 4

使用display:flex部分。如果您想制作文字中心，请align-items: center;。

＆＃13;

section {
    align-items: center;
    display: flex;
}

＆＃13;

<section>
<div class="left"><img src="https://s-media-cache-ak0.pinimg.com/236x/44/9f/02/449f02a1a0328ed5f311112b83407fdf.jpg" alt="" ></div>
<div class="right"><span>Demo Demo demo Demo Demo demo Demo Demo demo Demo Demo demo Demo Demo demo Demo Demo demo Demo Demo demo Demo Demo demo Demo Demo demo Demo Demo demo Demo Demo demo Demo Demo demo Demo Demo demo Demo Demo demo Demo Demo demo </span></div>
</section>

＆＃13;

Answer 5

＆＃13;

div.left{
   float: left;
}

＆＃13;

<section>
<div class="left"><img src="https://s-media-cache-ak0.pinimg.com/236x/44/9f/02/449f02a1a0328ed5f311112b83407fdf.jpg" alt="" ></div>
Demo Demo demo Demo Demo demo Demo Demo demo Demo Demo demo Demo Demo demo Demo Demo demo Demo Demo demo Demo Demo demo Demo Demo demo Demo Demo demo Demo Demo demo Demo Demo demo Demo Demo demo Demo Demo demo Demo Demo demo 
</section>

＆＃13;

fiddle here

只需使用float left即可解决问题

div.left{
   float: left;
}

如何将文本与图像css对齐

5 个答案: