html - 如何将段落中心的第一行与图像对齐。而其他行和第一行的缩进是一样的吗？

Question

我有一张图片和一段话。我想“CSS”图像在左边，段落在右边。并且段落的第一行必须以图像为中心显示。其他行必须缩进，与第一行相同。

CSS 能做到吗？我希望你能教我实现这一目标的方法。

先谢谢你!

HTML:

 <div class="parent">
  <img src="http://jsfiddle.net/img/logo.png">
  <div class="child">
 The bottom of the element is aligned with the bottom of the parent element's font. The bottom of the element is aligned with the bottom of the parent element's font. The bottom of the element is aligned with the bottom of the parent element's font. 
  </div>
</div>

CSS:

img { 
   display: inline;
}
.child {
  display: inline;
}

这是我的 jsfiddle:https://jsfiddle.net/qn4bh8ht/

根本不工作。 :(

Answer 1

试试这些:JsFidle .

我为 .parent 类使用 display: table 然后为子类使用 table-cell + vertical-align: top 在 .child 类上。

.parent {
  display: table;
}
.parent > * {
  display: table-cell;
}
.child {
  vertical-align: top;
}