1

这是我的小提琴。我无法将文本和时间文本垂直Name1居中 Name2。我确实尝试过，display: table-cell; vertical-align: middle;但没有帮助。你能指出我在哪里做错了吗？

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

2 回答 2

3

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

它解释了为什么不使用vertical-align: middle块级元素，并向您展示如何做您想做的事情（靠近页面底部）。

这里的问题是三个方面：

HTML 布局传统上不是为指定垂直行为而设计的。就其本质而言，它会按宽度缩放，并且内容会根据可用宽度流动到适当的高度。

传统上，水平尺寸和布局很容易；垂直尺寸和布局由此衍生。vertical-align:middle 没有做预期的原因是因为作者不明白它应该做什么，但是……</p>

……这是因为 CSS 规范确实搞砸了这一点（在我看来）——vertical-align 用于指定两种完全不同的行为，具体取决于它的使用位置。

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

于 2012-09-20T11:27:47.357 回答
1

您可以尝试将line-heights 应用于特定容器。你的 img 会得到2 em，times 会得到1.33 em，你的 title 会得到1 em，虽然这是多余的，因为默认的 line-height 是 1em。这是一个例子：

例子

GL :)

于 2012-09-20T11:37:24.163 回答