html - 水平对齐 HTML 表头中的元素

Question

我使用 bootstrap 和 HTML 创建了一个简单的日历，我想在头部的月份名称旁边添加箭头。我无法对齐箭头和月份:

这是我目前的代码:

<table border="0" cellpadding="0" cellspacing="0" class="table table-bordered table-striped month">
<tr><th colspan="7" class="month-head month">
 <div>
   <div><span class="pull-left"><i class="fa fa-arrow-left" aria-hidden="true"></i></span>
   </div>
   <div style="margin:0 auto;"> April 2017 </div>
   <div><span class="pull-right"><i class="fa fa-arrow-right" aria-hidden="true"></i></span>
   </div>
</div></th></tr>
<tr><th class="mon text-center">Mon</th><th class="tue text-center">Tue</th><th class="wed text-center">Wed</th><th class="thu text-center">Thu</th><th class="fri text-center">Fri</th><th class="sat text-center">Sat</th><th class="sun text-center">Sun</th></tr>
...
</table>

你能帮我对齐右箭头吗？

Answer 1

你可以使用display: flex;对齐元素:居中； justify-content: space-between 在这 3 个元素的父元素上。

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

<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="top-row">
   <div><span><i class="fa fa-arrow-left" aria-hidden="true"></i></span></div>
   <div> April 2017 </div>
   <div><span><i class="fa fa-arrow-right" aria-hidden="true"></i></span></div>
</div>