[英]Vertical center font awesome icon
我正在尝试创建一个可重复使用的框,其中包含删除和编辑按钮。 但是,无论我尝试什么,我都无法使其水平居中放置图标。
.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>
将display:flex
, align-items:center
, justify-content:center
应用于.icon
类...
...或在.icon
使用d-flex align-items-center justify-content-center
引导程序预定义的类
堆栈片段
.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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.