Html 如何将段落中心的第一行与图像对齐。其他行和第一行是相同的缩进吗?

Html 如何将段落中心的第一行与图像对齐。其他行和第一行是相同的缩进吗?,html,css,Html,Css,我有一个图像和一个段落。我想“css”图片在左边,段落在右边。段落的第一行必须显示图像的中心。其他行必须缩进,缩进与第一行相同 CSS能做到吗?我希望你能教我实现这一目标的方法 提前谢谢你 HTML: <div class="parent"> <img src="http://jsfiddle.net/img/logo.png"> <div class="child"> The bottom of the element is aligned wi

我有一个图像和一个段落。我想“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>
img { 
   display: inline;
}
.child {
  display: inline;
}
这是我的JSFIDLE:

根本不工作(

试试这些:

我对
.parent
类使用
display:table
,然后对子类使用
table cell
垂直对齐:top

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

在段落开头有一个empyt
span
,并设置
width:45%

HTML


您可以使用填充来实现这一点,同时标记img不是一个类,请在css文件中删除img之前的“.”

img{
浮动:左;
}
.孩子{
左侧填充:50px;
填充顶部:8px;
}

元素的底部与父元素字体的底部对齐。元素的底部与父元素字体的底部对齐。元素的底部与父元素字体的底部对齐。

我只希望第一行是将中心与图像对齐。这不起作用。谢谢你的回复,顺便说一句。我看到许多不同的解决方案都有不同的结果,你说没有一个是好的,你能添加一个你试图实现的模型吗
<div class="parent">
  <img src="http://jsfiddle.net/img/logo.png">
  <div class="child"><span class="first-line">&nbsp;</span>
 <span> 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. </span>
  </div>
</div>
.first-line:{
  display:inline-block;
  width:45%;
}