将文字居中设置为百分比的DIV中的文字

这是我的fiddle。我无法垂直居中文本Name1,Name2和时间文本。我确实尝试了display: table-cell; vertical-align: middle;但它没有帮助。你能指出我在哪里做错了吗？将文字居中设置为百分比的DIV中的文字

HTML：

<div style="height: 15%;"> 
    <div class="timeDiv"> 
     <span class="time">19:00</span> 
    </div> 

    <div class="titleDiv"> 
      <img src="" alt="test1 img">       
     <span class="title">Name 1</span> 
    </div>    

    <div class="titleDiv">           
     <img src="" alt="test2 img"> 
     <span class="title">Name2</span> 
    </div> 
</div>

CSS：

img{ 
    height: 80%; 
    float:left; 
    margin-left: 7%; 
    margin-right: 1%; 
} 

.timeDiv{ 
    float: left; 
    width:10%; 
} 

.titleDiv{ 
    float: left; 
    width: 45%;    
} 

.title{ 
    font-size: 2em; 
    float: left; 
} 

.time{ 
    font-size: 1.5em; 
    float: right; 
}

来源

2012-09-20 Nikola

'显示：表cell'需要一个上升与至少一个'显示：table'，或'表row'。请注意，它会使它表现得像一个表格（这可能会提供意想不到的结果，例如：丢失文字等）。不过，这种感觉就像表格数据一样，为什么不使用表格呢？ – MetalFrog

这里看看:) http://phrogz.net/css/vertical-align/index.html

它解释了为什么不使用vertical-align: middle块级元素和表演你如何做你想做的事（靠近底部的）页）。

的这里的问题是三个方面：

HTML布局传统上并不是用来指定垂直行为。就其性质而言，它在横向上缩放，并且内容根据可用宽度流到适当的高度。

传统上，水平尺寸和布局很容易;垂直大小和布局是从中派生的。究其原因垂直对齐：中间没有做什么需要想是因为作者不明白什么是应该做的，但是......

...这是因为CSS 规范真的搞砸这一个（在我的意见中）-vertical-align用于指定两个完全不同的行为，具体取决于它使用的位置。

我相信方法1会做你想做的。

来源

2012-09-20 11:27:47 Ren

您可以尝试将line-height应用于特定容器。你的IMG将得到2 em，时间将得到1.33 em和您的标题将得到1 em，虽然这是多余的，因为默认行高是1em。下面是一个例子：

example

GL :)

来源

2012-09-20 11:37:24

将文字居中设置为百分比的DIV中的文字

回答

相关问题