如何解决在选择下拉菜单旁边垂直对齐文本带 Bootstrap
我无法让一些文本垂直居中对齐。我有一个左对齐的 H4,我在 Select 下拉菜单旁边有一个右对齐的 H4,它们都在同一行上。右侧部分工作正常(H4 在“选择”下拉菜单旁边居中对齐),但左侧部分没有。
这是我的代码,后面是我目前拥有的图像。
<div class="clearfix">
<span class="d-flex align-items-center" style="float: left;">
<h4 class="custom-header" style="float: left;">Standings</h4>
</span>
<span class="d-flex align-items-center" style="float: right;">
<span style="float: left; height: 100%;">
<h4 class="custom-header">Year: </h4>
</span>
<span style="float: right;">
<!-- Allow user to change season -->
<select class="form-control" id="seasonSelect" onchange="location = this.options[this.selectedindex].value;">
@foreach($seasons as $seasonRow)
@if($seasonRow->id == $season->id)
<option value="/sports/{{ $sport->url_name }}/{{ $seasonRow->name }}/" selected>{{ $seasonRow->name }}</option>
@else
<option value="/sports/{{ $sport->url_name }}/{{ $seasonRow->name }}/">{{ $seasonRow->name }}</option>
@endif
@endforeach
</select>
</span>
</span>
</div>
我能够成功地将“年份:”与“选择”下拉列表对齐,但同样的方法似乎无法使“排名”也垂直对齐。它的浮动左侧 DIV 不想表现。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。