居中滑块控制字形图标答案

【问题标题】：Centering slider controls glyphicon居中滑块控制字形图标
【发布时间】：2019-08-30 09:10:34
【问题描述】：

我有一个带有 2 个箭头控件的滑块来浏览图像。

我想为这些箭头添加背景，以及使它们成为圆形。

但是当我向箭头添加填充时，箭头不再居中在圆圈内。

这是 CSS：

.item{
    text-align: center;
}

.carousel-inner > .item > img{
    display: inline !important;
}

.carousel-control .glyphicon{
    padding: 30px;
    background: red;
    border-radius: 50%;
}

HTML：

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
    <!-- Wrapper for slides -->
    <div class="carousel-inner" role="listbox">
        <div class="item active">
            <img src="http://placehold.it/100">
        </div>
    </div>

    <!-- Controls -->
    <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>
</div>

jQuery 触发滑块：

$('.carousel').carousel();

这是一个可供查看和测试的小提琴：https://jsfiddle.net/dov7k19b。增加结果窗口宽度以查看问题。

【问题讨论】：

标签： html css twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

您可以通过添加此代码来删除/覆盖 .glyphicon-chevron-left 类的默认宽度和高度属性，以便您可以在圆圈内设置图标的样式和居中

.carousel-control .glyphicon-chevron-left{  width: 0px; height: 0px; }

希望对你有帮助！

【讨论】：

【解决方案2】：

您可以使用display: flex 将图标居中。

.item {
  text-align: center;
}

.carousel-inner>.item>img {
  display: inline !important;
}

.carousel-control .glyphicon {
  padding: 30px;
  background: red;
  border-radius: 50%;
}

.glyphicon.glyphicon-chevron-left,
.glyphicon.glyphicon-chevron-right {
  display: flex !important;
  align-items: center;
  justify-content: center;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="http://placehold.it/100">
    </div>
  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

【讨论】：