javascript - 如何将行内 block 列表项中的第一项水平居中

Question

我有一个列表项设置为 overflow-x scroll 以便用户可以水平滚动以查看内容。创建所有这些我没有问题，但我需要执行以下操作:

1. 使列表中的第一项始终水平居中，即它将像文本 block 一样居中。我已经尝试了所有使用 css 的方法，使用 flex-box 等，但它会导致整个滚动内容居中，而不仅仅是第一项。甚至尝试过引导偏移，但运气不佳，因为在不同的屏幕尺寸上查看时它不会居中。

目前的样子

我想要实现的目标。

1. 另一个问题是，因为我的水平滚动条目前与图 1 类似。有没有什么方法可以使滚动条显示在中心而不是占用整个可滚动宽度，但用户可以像下图那样滚动内容？

大家有什么建议吗？好像我不能只使用 CSS 而需要 JS，但我的 JS 是......太可怕了。如果需要，我也很乐意为可行的解决方案付费。现在有点绝望。

提前致谢。

我在这里创建了代码笔:https://codepen.io/anon/pen/EqwZLJ

.scroll-horizontal ul {
    position: relative;
    margin: 0;
    padding: 0;
    list-style: none;
    white-space: nowrap;
}

.scroll-horizontal ul li {
    display: inline-block;
    max-width: 735px;
    margin-right: 15px;
    overflow: hidden;
}

.scroll-horizontal {
    padding-bottom: 50px;
  margin-bottom: 150px;
}

.overflow-x {
    position: relative;
    overflow-x: scroll;
}

.overflow-x::-webkit-scrollbar {
    -webkit-appearance: none;
}

.overflow-x::-webkit-scrollbar:vertical {
    width: 11px;
}

.overflow-x::-webkit-scrollbar:horizontal {
    height: 11px;
}

.overflow-x::-webkit-scrollbar-thumb {
    border-radius: 8px;
    border: 2px solid white; /* should match background, can't be transparent */
    background-color: rgba(0, 0, 0, .5);
}


 <div class="text-center" style="width: 750px; margin: 50px auto;"><p>I need the first image in the list to be position center with the text content. I need the first image in the list to be position center with the text content. I need the first image in the list to be position center with the text content. I need the first image in the list to be position center with the text content. I need the first image in the list to be position center with the text content. I need the first image in the list to be position center with the text content. </p></div>


<div class="overflow-x space-default scroll-horizontal">
        <div class="row flex-row flex-nowrap">
            <div class="col-12">
                <ul class="">
                    <li><img src="https://ultraimg.com/images/2016/08/11/1V6u.jpg" class="img-fluid" alt=""></li>
                    <li><img src="https://ultraimg.com/images/2016/08/11/1V6u.jpg" class="img-fluid" alt=""></li>
                    <li><img src="https://ultraimg.com/images/2016/08/11/1V6u.jpg" class="img-fluid" alt=""></li>
                    <li><img src="https://ultraimg.com/images/2016/08/11/1V6u.jpg" class="img-fluid" alt=""></li>
                </ul>
            </div>
        </div>
    </div>

Answer 1

您是否在您的网站中使用 jquery？如果是，那么您可以尝试使用它。

Jquery

let mainEle = $(".scroll-horizontal"); // this is scrollable div id
let firstImageEle = $("#image-1");
mainEle.scrollLeft(firstImageEle[0].offsetLeft);

Javascript

let mainEle = document.getElementsByClassName("scroll-horizontal")[0]; // this is scrollable div id
let firstImageEle = document.getElementById("image-1"); // first image div id
mainEle.scrollLeft(firstImageEle.offsetLeft);

Add blank space

<ul class="">
    <li id="image-blank" style="width: 735px;height: 459px;"></li>
    <li id="image-1"><img src="https://ultraimg.com/images/2016/08/11/1V6u.jpg" class="img-fluid" alt=""></li>
    <li><img src="https://ultraimg.com/images/2016/08/11/1V6u.jpg" class="img-fluid" alt=""></li>
    <li><img src="https://ultraimg.com/images/2016/08/11/1V6u.jpg" class="img-fluid" alt=""></li>
    <li><img src="https://ultraimg.com/images/2016/08/11/1V6u.jpg" class="img-fluid" alt=""></li>
 </ul>

请检查您的密码笔。我给你换了。