Horizo​​tally对齐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

您可以在这3个元素的父元素上使用display: flex; align-items: center; justify-content: space-between。

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以使用Bootstrap提供的内置工具来实现这一目标。

在<th>元素中，您可以将类container-fluid添加到<div>标记。然后，您可以应用Bootstrap的流体网格类，例如col-xs-3等。正确对齐日历标题的各个部分。

请参阅我制作的Bootsnipp示例：http://bootsnipp.com/user/snippets/o1KRG