0

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

我在这里谈论的一个例子是：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: absolute 还是 tables？有没有其他方法可以实现这个目标？

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

4

2 回答 2

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;    
}
于 2013-11-06T22:07:50.967 回答
1

您可以display: flex在您的head班级上使用并使用align-items: center它来垂直居中其内容。

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

于 2016-12-28T15:17:49.930 回答