垂直对齐块元素

Posted 2023-05-07

【中文标题】垂直对齐块元素

【英文标题】：Vertical-Align a Block Element

【发布时间】：2014-04-02 07:10:03

【问题描述】：

我在 div 中有一个相邻的图像和文本。我正在尝试将文本垂直对齐在中间，但它保持在顶部。请帮忙！

http://jsfiddle.net/9KDva/

html：

<div class="title-block">
  <div class="img-holder"><img   src="http://www.girlsguidetomanners.com/wp-content/uploads/2014/02/url-16-101x104.jpeg" class="attachment-homepoststhumbnail wp-post-image"  /></div>
  <div class="title">Get Your Nose Out of Your IPhone</div>
</div>

CSS：

.title-block 
width:272px;
height: 110px;
vertical-align:middle;


.img-holder 
float: left;
margin: 0 6px 0 0;
position: relative;


.img-holder img 
display: block;


.title 
display:block;
text-transform: uppercase;
margin: 8px 0 9px;

【问题讨论】：

CSS vertical-align: middle not working的可能重复

此链接将有助于理解垂直对齐impressivewebs.com/difference-block-inline-css

【参考方案1】：

您可以使用table 和table-cell：并将您的class='title' 移动到img-holder 中

Fiddle

从image 离开填充 - fiddle

.title-block 
    width:272px;
    height: 110px;    


.img-holder     
    margin: 0 6px 0 0;
    position: relative;
    display: table;


img, .title
    display:table-cell;
    vertical-align: middle;

.title 
    text-transform: uppercase;
    margin: 8px 0 9px;  

【参考方案2】：

我将您的 div 更改为 span 以便 vertical-align: middle 工作。

见小提琴：http://jsfiddle.net/9KDva/4/

CSS：

.vam 
    vertical-align: middle;

span.vam 
    display: inline-block;

HTML：

<div class="title-block">
   <span class="img-holder vam">
<img   src="http://www.girlsguidetomanners.com/wp-content/uploads/2014/02/url-16-101x104.jpeg" class="attachment-homepoststhumbnail wp-post-image"  /></span>
    <span class="title vam">Get Your Nose Out of Your IPhone</span>

 </div>

【参考方案3】：

使用 vertical-align: middle 对 div 不起作用。

这样的事情可能会奏效：

<table class="title-block" style="background-image:url('http://www.girlsguidetomanners.com/wp-content/uploads/2014/02/url-16-101x104.jpeg); background-size: cover; background-position: center center;">
  <tr>
     <td class="title" style="vertical-align: middle;">
         Get Your Nose Out of Your IPhone
     </td>
  </tr>
</table>

【讨论】：

表格应该只用于表格内容，而不是布局！