Question

我试图获得一个高度通常比相邻段落更短的图像，以便在中间垂直对齐，而不能做到这一点

<div class="element">
    <img  src="http://dummyimage.com/75" />
    <p  class="text" >Blah Blah<br/>Blah Blah<br/>Blah Blah<br/>Blah Blah<br/>Blah Blah<br/>Blah Blah<br/>Blah Blah<br/>Blah Blah<br/>
    </p>

到目前为止我的css

.element{display:table;height:100%}
.text{display:table-cell;background:#CC0;padding:20px;}
.element img{display:table-cell;margin-right:10px;vertical-align:middle;}

和jsfiddle http://jsfiddle.net/0krndsav/

大多数其他问题都希望段落位于图像的垂直中间......

有什么想法吗？

Answer 1

display: inline-block;使用vertical-align。

CSS

img {
  display: inline-block;
  margin-right: 10px;
  vertical-align: middle;
}

.content-holder {
  display: inline-block;
  vertical-align: middle;
}

HTML

<div class="church-admin-calendar-widget-item">
  <img width="75" height="60" src="http://dummyimage.com/75" />
  <div class="content-holder">
    <p  class="ca_event_detail" >
      Blah Blah<br/>
      Blah Blah<br/>
      Blah Blah<br/>
      Blah Blah<br/>
      Blah Blah<br/>
      Blah Blah<br/>
      Blah Blah<br/>
      Blah Blah<br/>
    </p>
  </div>
</div>

DEMO

Answer 2

在.element：

上试试这个

display: flex;
align-items: center;

Here is your jsFiddle, updated.

Answer 3

您可以为div添加img容器，然后应用table-cell和vertical-align: middle：

＆＃13;

.church-admin-calendar-widget-item {
    display:table;
}
.ca_event_detail {
    display:table-cell;
    background:#CC0
}
img {   
    margin-right:10px;
}

#imgCont{
    display: table-cell;
    vertical-align: middle;
}

＆＃13;

<div class="church-admin-calendar-widget-item">
    <div id="imgCont">
        <img width="75" height="60" src="http://dummyimage.com/75" />
    </div>
    <p class="ca_event_detail">Blah Blah
        <br/>Blah Blah
        <br/>Blah Blah
        <br/>Blah Blah
        <br/>Blah Blah
        <br/>Blah Blah
        <br/>Blah Blah
        <br/>Blah Blah
        <br/>
    </p>
</div>

＆＃13;

Answer 4

<强> Working Fiddle

只需使用它;

img, p
{
    display: inline-block;
    vertical-align:middle;
}

Answer 5

试试这个

.ca_event_detail {

  background: #CC0;

  width: 100px;

  display: inline-block;

  vertical-align: middle;

}

img {

  margin-right: 10px;

  vertical-align: middle;

}

<div class="church-admin-calendar-widget-item">
  <img width="75" height="60" src="http://dummyimage.com/75" />
  <p class="ca_event_detail">Blah Blah
    <br/>Blah Blah
    <br/>Blah Blah
    <br/>Blah Blah
    <br/>Blah Blah
    <br/>Blah Blah
    <br/>Blah Blah
    <br/>Blah Blah
    <br/>
  </p>
</div>

垂直对齐段落旁边的图像

5 个答案: