Question

我一直在努力解决如何合理地做到这一点 - 我需要一个导航栏，其中包含两侧的图标和它们之间的扩展搜索框。当我实现这一点时，我不能正确地在div上使用display：table-cell，因此不能比我现在更好地垂直对齐它们（使用带有em的填充和边距 - 不是一个可行的选项）。有人可以帮忙吗？

这是一个小提琴： http://jsfiddle.net/65brxnb2/

HTML：

<nav class="navbar navbar-fixed-top">
<div class="formline">
    <div id="settingsicondiv"><i class="fa fa-gear fa-2x"></i>
    </div>
    <div id="searchicondiv"><i class="fa fa-search fa-2x"></i>
    </div>
    <div id="searchboxdiv">
        <input class="form-control" type="text" placeholder="Search"></input>
    </div>
</div>

CSS：

nav {
    width: 100%;
    background-color: gray;
    padding-top: 0.5em;
    text-align: center;
}
.formline {
    max-width: 40em;
    margin: 0 auto;
}
input {
    width: 100%;
    font-size: 16px;
}
.fa {
    color: white;
    margin-left: 0.3em;
    margin-right: 0.3em;
    margin-top: 0.15em;
}
#settingsicondiv {
    float:left;
}
#searchicondiv {
    float:right;
}
#searchboxdiv {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

Answer 1

最简单的方法是将所有3 display的{{1}}属性设置为<div>，然后使用inline-block将它们垂直对齐。我还在vertical-align: middle之前放置<div id="searchboxdiv">，稍微修改了您的HTML结构。

<div id="searchicondiv">

nav {
  width: 100%;
  background-color: gray;
  padding-top: 0.5em;
  text-align: center;
}
input {
  width: 100%;
  font-size: 16px;
}
.fa {
  color: white;
}
#searchboxdiv {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
div#settingsicondiv,
#searchboxdiv,
#searchicondiv {
  display: inline-block;
  vertical-align: middle;
}
div#searchboxdiv {
width: 50%;
}

在导航栏中垂直居中图标和搜索框

1 个答案: