Html 垂直对齐正在使用自动边距的div中的div

我有这个问题：

正如您所看到的，两个div并排对齐，我想要的是垂直对齐它们。此外，我想能够添加另一个div浮动到右侧，这也是垂直对齐

如何在不使用绝对定位的情况下对齐它们

<div style="background-color: blue; ">
        <!-- Global Header -->
        <div class="header">

            <div class="floatLeft">
                <a href="" class="header-logo">WritePub</a>
            </div>

            <div id="pcontainer" class="inner-header-search floatLeft">
                <input type="text"/>
            </div>

        </div>
    </div>

---

你的小提琴太吵了。如果要垂直对齐div的内容而不触及其高度，可以向div中添加“display:table cell”，以模拟提供对齐的表行列

你好：
.集装箱{
显示：表格单元格；
宽度：800px；
背景色：红色；
高度：50px；
垂直对齐：中间对齐；
}

---

或者你不能给div一个高度，也不能给顶部和底部填充相等的数字

我的意思是红色div的元素需要垂直对齐

<div class="container">
    Hello: <input type="text-box"/>
</div>

.container {
    display: table-cell;
    width: 800px;
    background-color: red;
    height: 50px;
    vertical-align: middle;
}