即使在放大/缩小或更新浏览器窗口大小后，如何使轮播箭头保持在中心？

Question

小提琴我有一个图表，我的目标是将旋转木马左、右始终垂直居中（距离顶部 50%），并将两个箭头放置在距离图表约 5% 的位置，但足够接近图表。我很难让它发挥作用。我试过了超文本标记语言<div class="col-xs-12 col-sm-12 col-md-12 col-lg-6">    <div class="panel panel-filled">        <div class="panel-body carousel">            <h1>Network Bandwidth</h1>            <div id="chart1Carousel" class="carousel slide" data-ride="carousel">                <!-- Wrapper for slides -->                <div class="carousel-inner">                    <div class="item active"><div class="chartjs-size-monitor"><div class="chartjs-size-monitor-expand"><div class=""></div></div><div class="chartjs-size-monitor-shrink"><div class=""></div></div></div>                        <small class="lastSelectedMenu">                            <span> Current Interval:                                <span class="lastSelected" style="color: rgb(255, 235, 59);">day (3/25/2020)</span>                            </span>                            <select name="last" class="float-right">                                <option id="default" value="default">Select Interval</option>                                <option value="day">Day</option>                                <option value="week">Week</option>                                <option value="month">Month</option>                                <option value="year">Year</option>                            </select>                        </small>                        <canvas width="558" height="279" id="chart1" style="display: block; width: 558px; height: 279px;" class="chartjs-render-monitor"></canvas>                    </div>                </div>https://codepen.io/sn4k3eye/project/editor/Akyrky如果您可以通过查看我的 HTML 和 CSS 发现我的问题，请说出来。

Answer 1

我注意到一些事情，你的代码笔是只读的，所以我把它移到了一支新笔上：

1. 您的 @media 样式未包含在内{}，因此未应用这些样式。

2. 您试图移动.fa-chevrons，但它们是span元素，而边距不起作用。

这是您拥有的完整代码 - 没有基本 CSS，因为堆栈片段有字符限制。我的 codepen 链接包含所有内容。

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/4.4.1/cerulean/bootstrap.min.css">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<style>

  

    .item img {

      width: 100%;

      height: auto;

    }

    .carousel {

      padding-left: 45px;

      padding-right: 45px;

    }

    .carousel-control .fa-chevron-left,

    .carousel-control .fa-chevron-right {

      position: absolute;

      width: 30px;

      height: 30px;

      font-size: 30px;

      top: 50%;

      display: block;

      transform: translate(0, -50%;

      )

    }

    .carousel-control.right {

      right: 0;

      left: auto;

    }

    .carousel-control .fa-chevron-left {}

    .carousel-control .fa-chevron-right {}

    .carousel {

      position: relative;

    }

    .carousel-inner {

      position: relative;

      width: 100%;

      overflow: hidden;

    }

    .carousel-control.left,

    .carousel-control.right {

      background: none;

    }

    .carousel-control {

      position: absolute;

      top: 0;

      bottom: 0;

      left: 0;

      width: 30px;

      font-size: 20px;

      color: #fff;

      text-align: center;

      text-shadow: 0 1px 2px rgba(0, 0, 0, .6);

      background-color: rgba(0, 0, 0, 0);

      filter: alpha(opacity=50);

      opacity: .5;

    }

  

</style>

<div class="col-xs-4">

  <div class="panel panel-filled">

    <div class="panel-body carousel">

      <h1>Carousel Issue</h1>

      <div id="chart1Carousel" class="carousel slide" data-ride="carousel">

        <div class="carousel-inner">

          <div class="item active">

            <div class="chartjs-size-monitor">

              <div class="chartjs-size-monitor-expand">

                <div class=""></div>

              </div>

              <div class="chartjs-size-monitor-shrink">

                <div class=""></div>

              </div>

            </div>

            <img src="https://i.imgur.com/ltw5Pac.png" width="558" height="279">

          </div>

        </div>

      </div>

      <!-- Left and right controls -->

      <a class="left carousel-control" href="#chart1Carousel" data-slide="prev">

        <span class="fa fa-chevron-left"></span>

        <span class="sr-only">Previous</span>

      </a>

      <a class="right carousel-control" href="#chart1Carousel" data-slide="next" style="display: block;">

        <span class="fa fa-chevron-right"></span>

        <span class="sr-only">Next</span>

      </a>

    </div>

  </div>

</div>

您会看到我在图表周围添加了一些填充，以显示箭头将如何设置在图表旁边。

最重要的是更改 V 形以阻止元素并将它们移动到50%其高度（向上 15 像素）。

https://codepen.io/chrislafrombois/pen/RwPqdxj

希望这可以帮助您朝着正确的方向前进。如果错过了您想要做的事情，请告诉我。