Question

我已经设置了一个小提琴，以便您可以看到发生了什么：https://jsfiddle.net/5p9ve8xr/1/

我要做的是让3个社交媒体图标（.fa-linkedin，.fa-twitter，.fa-facebook）与搜索图标的中心水平对齐（{ {1}}）

社交媒体图标都有一类.fa-search。所以我尝试用填充和边距来定位它们，例如

.social

但是这只会将所有元素压缩20px。

我附上了截图来说明这一点。我希望图标使得绿色和洋红色占据的空间量相等 - 即图标正好位于搜索输入的中心：

这是代码的副本 - 如果它在任何时候都不在jsfiddle上......

标记：

.social {
    margin-top: 20px;
}

CSS：

    <div class="row">
        <div class="col-md-12" style="border:1px solid red">
                <form action="#" class="form-inline">
                    <div class="form-group">
                        <input type="text" size="30" placeholder="Search" class="form-control input-lg">
                        <i id="filtersubmit" class="fa fa-search fa-2x"></i>


                         <a href="#" target="_blank"><i class="fa fa-linkedin fa-2x social" aria-hidden="true"></i></a>
                         <a href="#" target="_blank"><i class="fa fa-twitter fa-2x social" aria-hidden="true"></i></a>
                         <a href="#" target="_blank"><i class="fa fa-facebook fa-2x social" aria-hidden="true"></i></a>
                    </div>
                </form>
        </div>
     </div>

库：

Bootstrap 3.3.7
FontAwesome
jquery 1.12.4

Answer 1

我可能会稍微调整你的结构

.form-search--social {
    float: right;
    padding: 8px 12px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

<div class="row">
	<div class="col-md-12" style="border:1px solid red">
		<form action="#" class="form-inline form-search">
			<div class="form-group">
				<div class="input-group">
					<input type="text" size="30" placeholder="Search" class="form-control input-lg">
					<span class="input-group-addon">
						<i id="filtersubmit" class="fa fa-search fa-2x"></i>
					</span>
				</div>
				
				<div class="form-search--social">
					<a href="#" target="_blank"><i class="fa fa-linkedin fa-2x fa-fw social" aria-hidden="true"></i></a>
					<a href="#" target="_blank"><i class="fa fa-twitter fa-2x fa-fw social" aria-hidden="true"></i></a>
					<a href="#" target="_blank"><i class="fa fa-facebook fa-2x fa-fw social" aria-hidden="true"></i></a>
				</div>
			</div>
		</form>
	</div>
</div>

因为它在SOs代码框中变得怪异;为了避免任何潜在的混淆，最终结果是一个Bootply：https://www.bootply.com/dmC7mKGr1L

CSS - 将FontAwesome图标与文本输入中的图标对齐

1 个答案: