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

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

我注意到一些事情，你的代码笔是只读的，所以我把它移到了一支新笔上：您的 @media 样式未包含在内{}，因此未应用这些样式。您试图移动.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>&nbsp;&nbsp;&nbsp; &nbsp; .item img {&nbsp; &nbsp; &nbsp; width: 100%;&nbsp; &nbsp; &nbsp; height: auto;&nbsp; &nbsp; }&nbsp; &nbsp; .carousel {&nbsp; &nbsp; &nbsp; padding-left: 45px;&nbsp; &nbsp; &nbsp; padding-right: 45px;&nbsp; &nbsp; }&nbsp; &nbsp; .carousel-control .fa-chevron-left,&nbsp; &nbsp; .carousel-control .fa-chevron-right {&nbsp; &nbsp; &nbsp; position: absolute;&nbsp; &nbsp; &nbsp; width: 30px;&nbsp; &nbsp; &nbsp; height: 30px;&nbsp; &nbsp; &nbsp; font-size: 30px;&nbsp; &nbsp; &nbsp; top: 50%;&nbsp; &nbsp; &nbsp; display: block;&nbsp; &nbsp; &nbsp; transform: translate(0, -50%;&nbsp; &nbsp; &nbsp; )&nbsp; &nbsp; }&nbsp; &nbsp; .carousel-control.right {&nbsp; &nbsp; &nbsp; right: 0;&nbsp; &nbsp; &nbsp; left: auto;&nbsp; &nbsp; }&nbsp; &nbsp; .carousel-control .fa-chevron-left {}&nbsp; &nbsp; .carousel-control .fa-chevron-right {}&nbsp; &nbsp; .carousel {&nbsp; &nbsp; &nbsp; position: relative;&nbsp; &nbsp; }&nbsp; &nbsp; .carousel-inner {&nbsp; &nbsp; &nbsp; position: relative;&nbsp; &nbsp; &nbsp; width: 100%;&nbsp; &nbsp; &nbsp; overflow: hidden;&nbsp; &nbsp; }&nbsp; &nbsp; .carousel-control.left,&nbsp; &nbsp; .carousel-control.right {&nbsp; &nbsp; &nbsp; background: none;&nbsp; &nbsp; }&nbsp; &nbsp; .carousel-control {&nbsp; &nbsp; &nbsp; position: absolute;&nbsp; &nbsp; &nbsp; top: 0;&nbsp; &nbsp; &nbsp; bottom: 0;&nbsp; &nbsp; &nbsp; left: 0;&nbsp; &nbsp; &nbsp; width: 30px;&nbsp; &nbsp; &nbsp; font-size: 20px;&nbsp; &nbsp; &nbsp; color: #fff;&nbsp; &nbsp; &nbsp; text-align: center;&nbsp; &nbsp; &nbsp; text-shadow: 0 1px 2px rgba(0, 0, 0, .6);&nbsp; &nbsp; &nbsp; background-color: rgba(0, 0, 0, 0);&nbsp; &nbsp; &nbsp; filter: alpha(opacity=50);&nbsp; &nbsp; &nbsp; opacity: .5;&nbsp; &nbsp; }&nbsp;&nbsp;</style><div class="col-xs-4">&nbsp; <div class="panel panel-filled">&nbsp; &nbsp; <div class="panel-body carousel">&nbsp; &nbsp; &nbsp; <h1>Carousel Issue</h1>&nbsp; &nbsp; &nbsp; <div id="chart1Carousel" class="carousel slide" data-ride="carousel">&nbsp; &nbsp; &nbsp; &nbsp; <div class="carousel-inner">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="item active">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="chartjs-size-monitor">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="chartjs-size-monitor-expand">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class=""></div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="chartjs-size-monitor-shrink">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class=""></div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <img src="https://i.imgur.com/ltw5Pac.png" width="558" height="279">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; <!-- Left and right controls -->&nbsp; &nbsp; &nbsp; <a class="left carousel-control" href="#chart1Carousel" data-slide="prev">&nbsp; &nbsp; &nbsp; &nbsp; <span class="fa fa-chevron-left"></span>&nbsp; &nbsp; &nbsp; &nbsp; <span class="sr-only">Previous</span>&nbsp; &nbsp; &nbsp; </a>&nbsp; &nbsp; &nbsp; <a class="right carousel-control" href="#chart1Carousel" data-slide="next" style="display: block;">&nbsp; &nbsp; &nbsp; &nbsp; <span class="fa fa-chevron-right"></span>&nbsp; &nbsp; &nbsp; &nbsp; <span class="sr-only">Next</span>&nbsp; &nbsp; &nbsp; </a>&nbsp; &nbsp; </div>&nbsp; </div></div>您会看到我在图表周围添加了一些填充，以显示箭头将如何设置在图表旁边。最重要的是更改 V 形以阻止元素并将它们移动到50%其高度（向上 15 像素）。https://codepen.io/chrislafrombois/pen/RwPqdxj希望这可以帮助您朝着正确的方向前进。如果错过了您想要做的事情，请告诉我。