CSS基本模板问题

Question

在我的网站上有3个重要部分

1. 顶栏（必须保持在顶部，不固定，40px高度，100％宽度）

2. 时间轴总是浮动到主区域，时间轴不可调整，大小中等

3. 主要区域重新调整大小，窗口水平滚动，只要你仍然可以保持向右/向左滚动，它可以是小宽度

这是我目前的进展......

JSFiddle

我的问题：

1. 顶栏子元素未对齐。就像那些简单的输入/文本位于顶部栏的底部而部分是隐藏的，这不会发生在图像被删除的情况下？我需要顶部栏始终保持元素内联垂直居中，永远不要调整高度

2. 我无法获得剩余高度的时间线和主要区域，我将它们放在800px，因为没有任何工作。

width: 100%; height: 100% !important; margin: 0px;

Answer 1

我添加了填充物并检查了你的小提琴它看起来好多了。这就是你所追求的吗？

.top_bar
{
    z-index:100;
    width:100%;
    height:40px;
    max-height:40px !important;
    background-color:#ffff00;
    color:black;
    padding:40px;
    overflow: auto;
}

Answer 2

对于您的顶栏，只需浮动您的图片：

.wtblogo {
    float:left; /* Add this to your current CSS */
}

并添加一个等于顶部条形高度的线条高度，以垂直对齐其中的对象：

.top_bar {
    line-height: 40px; /* Add this to your current CSS */
}

我不确定你的第二个问题是什么意思。

Answer 3

对于＃1，你可以通过添加：

轻松修复它

vertical-align: middle;

到您的图片类。

所以你会：

.wtblogo {
    height: 40px;
    vertical-align: middle;
}

对于＃2，我不确定你要做什么。你能澄清一下吗？