Question

我一直在遇到我想要在同一“线”两端的内联块元素的情况，但我也希望它们垂直对齐。

我所谈论的一个例子是：http://jsfiddle.net/96DJv/4/（看按钮，我希望它们与标题对齐）

标记：

<div class="people">
    <div class="head">
        <div class="controls">
            <button>Delete</button>
            <select>
                <option>Some Option</option>
            </select>
            <!-- additional inline-block elements -->
        </div>
        <h1 class="title">Title</h1>        
    </div>
    <table class="list">
        <tr>
            <th>Name</th><th>Age</th><th>Score</th>
        </tr>
        <tr>
            <td>John</td><td>14</td><td>200</td>            
        </tr>
        <tr>
            <td>Jack</td><td>23</td><td>2100</td>
        </tr>
    </table>
</div>

风格：

.people {
    width: 400px;
}

.list {
    width: 100%;
}

.list th {
    text-align: left;
}

.title {
    overflow:hidden;
}

.controls {
    float: right;    
}

.head {
    background-color: #F1F1F1;
}

从我听到的浮动元素中删除了更改该元素的垂直对齐的能力。那么我使用position还是唯一的选择：绝对还是表格？还有另一种方法来实现这一目标吗？

我一直在寻找几个小时，但仍未找到有效的解决方案。

Answer 1

沃尔特，

我提出了一个解决方案，对HTML进行最小的更改并修改CSS。

HTML

<div class="people">
<div class="head">
    <h1 class="title">Title</h1> <-- Moved the H1 tag above the controls div
    <div class="controls">
        <button>Delete</button>
        <select>
            <option>Some Option</option>
        </select>
    </div>                  
</div>
<table class="list">
    <tr>
        <th>Name</th><th>Age</th><th>Score</td>
    </tr>
    <tr>
        <td>John</td><td>14</td><td>200</td>            
    </tr>
    <tr>
        <td>Jack</td><td>23</td><td>2100</td>
    </tr>
</table>

CSS

 .title {   
      display: table-cell;
    }

.controls {
  display: table-cell;    
  vertical-align: middle;
  text-align: right;
}

.head {
    display: table;
    width: 100%;
    padding: 10px;
    background-color: #F1F1F1;
}

请参阅此小提琴http://jsfiddle.net/8xLtM/

更新1： 如果你更愿意避免显示，也许是一个更好的答案：表格标记：

要使控件居中，其线高需要等于标题的字体大小+线高。

.title {
    overflow:hidden;
    font-size: 2em;
    line-height: 2em;
}

.controls {
    float: right; 
    line-height: 4em;
    vertical-align: middle;    
}

Answer 2

您可以在display: flex课程中使用head，并使用align-items: center垂直居中。

http://jsfiddle.net/96DJv/5/

使用浮动控件垂直居中CSS标题

2 个答案: