我正在尝试创建一个可重复使用的框,其中包含删除和编辑按钮作为框的一部分。然而,无论我尝试什么,我都无法让它将图标置于水平中心。
.inputBox .content {
flex: 2;
}
.inputBox .icon {
flex: 1;
max-width: 50px;
}
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div>
<div class="inputBox d-flex">
<div class="bg-dark text-white rounded-left p-2 content align-middle">
<input name="text" placeholder="This is a test" />
<span>Link text</span>
<br /> test<br />
</div>
<a href="#" class="bg-info text-white p-2 icon">
<i class="fa fa-edit fa-lg"></i>
</a>
<a href="#" class="bg-danger text-white p-2 icon rounded-right">
<span>
<i class="fa fa-trash fa-lg"></i>
</span>
</a>
</div>
</div>
答案 0 :(得分:0)
将display:flex
,align-items:center
,justify-content:center
应用于.icon
班级......
...或在d-flex align-items-center justify-content-center
.icon
引导预定义类
Stack Snippet
.inputBox .content {
flex: 2;
}
.inputBox .icon {
flex: 1;
max-width: 50px;
display: flex;
align-items: center;
justify-content: center;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div>
<div class="inputBox d-flex">
<div class="bg-dark text-white rounded-left p-2 content align-middle">
<input name="text" placeholder="This is a test" />
<span>Link text</span>
<br /> test<br />
</div>
<a href="#" class="bg-info text-white p-2 icon">
<i class="fa fa-edit fa-lg"></i>
</a>
<a href="#" class="bg-danger text-white p-2 icon rounded-right">
<span>
<i class="fa fa-trash fa-lg"></i>
</span>
</a>
</div>
</div>