html - 左右两张图片的导航栏，中间有一个搜索框

Question

我正在使用 Bootstrap 创建一个导航栏。我想要左右两张图片，中间有一个搜索字段。导航栏应具有两个图像的高度。搜索字段应水平和垂直位于导航栏的中心。这是我当前的代码:

HTML:

<nav class="navbar navbar-default navbar-fixed-top">
    <div class="container">
        <div class="row">
            <div class="col-sm-4">
                <div class="navbar-header">
                    <img src="../images/Image1.png" width="280" height="80" alt="">
                </div>
            </div>
            <div class="col-sm-4" style="text-align: center">
                <form class="navbar-form navbar" role="search">
                    <div class="input-group">
                        <input type="text" class="form-control" placeholder="Suche" name="suche">
                        <div class="input-group-btn">
                            <button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
                        </div>
                    </div>
                </form>
            </div>
            <div class="col-sm-4">
                <ul class="nav navbar-nav navbar-right">
                    <img src="../images/Image2.jpg" width="330" height="80" alt="">
                </ul>
            </div>
        </div>
    </div>
</nav>

CSS:

.navbar-form{
    padding-top: 13px;
}

我可以更熟练地做到这一点吗？尤其是将搜索字段水平和垂直放置在中心的事情？

Answer 1

这很容易通过 flex-box 实现

.navbar {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

<div class="navbar">
    <div class="img">
    	<img src="http://placehold.it/150x150" alt="">
    </div>
    <div class="search">
    	<input type="text">
    	<input type="submit" value="Ok">
    </div>
    <div class="img">
    	<img src="http://placehold.it/150x150" alt="">
    </div>
    </div>