垂直对齐旁边一段

我试图得到一个形象，在高度上比相邻段落中间垂直对齐通常更短的图像，只是不能做到这一点垂直对齐旁边一段

<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/

大多数其他问题想要在图像的垂直中间的段落...

任何想法？

来源

2014-09-25 andymoyle

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

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

来源

2014-09-25 09:41:38 Anon

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

.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; 
 
}

<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>

来源

2014-09-25 09:40:34

试试这个在您.element：

display: flex; 
align-items: center;

Here is your jsFiddle, updated.

来源

2014-09-25 09:40:56 meriadec

行之有效感谢 – andymoyle 2014-09-25 13:00:29

IE9，下不支持此属性 – Anon 2014-09-25 17:14:03

IE9？：请D .. Netscape也不支持它。这是简单的css3规范，让我们忽略虚假的浏览器 – meriadec 2014-09-25 17:21:50

Working Fiddle

只需使用这一点;

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

来源

2014-09-25 09:47:02

试试这个

.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>

来源

2014-09-25 09:47:57

垂直对齐旁边一段

回答

相关问题