Tips for aligning the first element in an inline-block list item horizontally

Question

Tips for aligning the first element in an inline-block list item horizontally

I'm working on a list with horizontal scroll functionality to allow users to view content by scrolling. I have successfully implemented this, but I'm facing a couple of challenges that I need help with:

I want the first item in the list to always start centered horizontally, similar to how a text block would appear. I've tried different CSS techniques like flex-box, but they end up centering the entire scrollable content instead of just the first item. Even using Bootstrap's offset doesn't work well across different screen sizes.

Current Appearance: https://i.sstatic.net/7dj8F.jpg

Desired Appearance: https://i.sstatic.net/3pTTS.jpg

Another issue I'm facing is that my horizontal scrollbar looks like Image 1. Is there a way to make the scrollbar appear in the center without taking up the entire width while still allowing users to scroll through the content?

https://i.sstatic.net/SpEU2.jpg

Any suggestions or guidance would be greatly appreciated! It seems like solving these issues might require JavaScript, which I'm not very skilled at. I'm even willing to pay for a solution at this point due to my urgency.

Thank you in advance!

You can view the codepen demo here: 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);
}

javascript jquery html css bootstrap-4

Answer 1

Answer №1

Do you currently utilize jQuery on your website? If so, consider implementing this solution.

jQuery

let mainElement = $(".scroll-horizontal"); // the id of the scrollable div
let firstImageElement = $("#image-1");
mainElement.scrollLeft(firstImageElement[0].offsetLeft);

Javascript

let mainElement = document.getElementsByClassName("scroll-horizontal")[0]; // the id of the scrollable div
let firstImageElement = document.getElementById("image-1"); // the id of the first image div
mainElement.scrollLeft(firstImageElement.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>

Please take a look at your code pen. I have made the necessary adjustments for you.

Answer 2

Do you currently utilize jQuery on your website? If so, consider implementing this solution.

jQuery

let mainElement = $(".scroll-horizontal"); // the id of the scrollable div
let firstImageElement = $("#image-1");
mainElement.scrollLeft(firstImageElement[0].offsetLeft);

Javascript

let mainElement = document.getElementsByClassName("scroll-horizontal")[0]; // the id of the scrollable div
let firstImageElement = document.getElementById("image-1"); // the id of the first image div
mainElement.scrollLeft(firstImageElement.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>

Please take a look at your code pen. I have made the necessary adjustments for you.

Answer 3

Answer №2

Check out this modified version of your design. I made use of a container-grid with 3 columns for centering purposes, which seemed like the simplest solution:

Update after receiving feedback: I decided to utilize percentages instead of pixels for sizing.

.grid-container {
  display: grid;
  overflow: hidden;
  width: 100%;
  grid-template-rows: 1fr 2fr;
  grid-template-columns: repeat(3, 33%);
}

To adjust the image sizes, I followed the same approach:

.scroll-horizontal li {
  display: inline-block;
  overflow: hidden;
  max-width: 33%;
}

.scroll-horizontal .img-fluid {
  max-width: 100%;
  height: auto;
  margin-right: 15px;
}

In order to center the first image precisely in the middle, I applied a margin equivalent to the size of the first column:

.scroll-horizontal li:first-of-type {
  margin-left: 33%;
}

Regarding the scrollbar issue, I attempted incorporating specific styles, but they didn't yield the desired outcome at the moment:

.space-default::-webkit-scrollbar-track-piece:end {
  margin-right: 33%;
}

.space-default::-webkit-scrollbar-track-piece:start {
  margin-left: 33%;
}

Thus, I decided to hide the scrollbar entirely (please note that this technique may not function in Firefox):

.space-default::-webkit-scrollbar {
  display: none;
}

If you're interested in customizing the scrollbar appearance, you can refer to this discussion thread or this article, although these methods are primarily tailored for webkit browsers.

I trust that these adjustments prove beneficial to you.

Answer 4

Check out this modified version of your design. I made use of a container-grid with 3 columns for centering purposes, which seemed like the simplest solution:

Update after receiving feedback: I decided to utilize percentages instead of pixels for sizing.

.grid-container {
  display: grid;
  overflow: hidden;
  width: 100%;
  grid-template-rows: 1fr 2fr;
  grid-template-columns: repeat(3, 33%);
}

To adjust the image sizes, I followed the same approach:

.scroll-horizontal li {
  display: inline-block;
  overflow: hidden;
  max-width: 33%;
}

.scroll-horizontal .img-fluid {
  max-width: 100%;
  height: auto;
  margin-right: 15px;
}

In order to center the first image precisely in the middle, I applied a margin equivalent to the size of the first column:

.scroll-horizontal li:first-of-type {
  margin-left: 33%;
}

Regarding the scrollbar issue, I attempted incorporating specific styles, but they didn't yield the desired outcome at the moment:

.space-default::-webkit-scrollbar-track-piece:end {
  margin-right: 33%;
}

.space-default::-webkit-scrollbar-track-piece:start {
  margin-left: 33%;
}

Thus, I decided to hide the scrollbar entirely (please note that this technique may not function in Firefox):

.space-default::-webkit-scrollbar {
  display: none;
}

If you're interested in customizing the scrollbar appearance, you can refer to this discussion thread or this article, although these methods are primarily tailored for webkit browsers.

I trust that these adjustments prove beneficial to you.

Answer 5

Answer №3

Is the float:right; property being used to right align the divs?

Answer 6

Is the float:right; property being used to right align the divs?

Answer 7

Answer №4

Combine all the individual image divs into a new container and experiment with centering them or utilizing a grid layout for organization.

Answer 8

Combine all the individual image divs into a new container and experiment with centering them or utilizing a grid layout for organization.

Tips for aligning the first element in an inline-block list item horizontally

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

The navigation bar is obscuring the header on my website

AngularJS form submission with Ajax requiring a double click to successfully submit the form

Optimizing CSS for printing by eliminating unnecessary white space with media queries

I attempted to implement a CSS and Typescript animation for a sliding effect, but unfortunately, it isn't functioning

Tips for integrating Jquery into your Laravel project

Error 504 occurs on Express.js due to a timeout issue while a timer is active

Ways to dynamically update a div with data from a JSON response

I am having trouble toggling radio buttons in React

Comparison: NumberFormatter versus NumberFormat in PHP and JavaScript

Creating an Angular table row that can expand and collapse using ng-bootstrap components is a convenient and

AngularJS filter that retrieves only values that have an exact match

Adaptive text sizing within Microsoft Outlook

NPM encountered an issue that prevented it from scanning directories due to a permission denial with the error code E

Creating links in JSTree that cannot be used in JSP pages with Struts2

Flipping and rotating images using the power of HTML5 Canvas

Is it possible to call a ref from a different component in React?

Angular Satellizer causing issues with Facebook login on mobile devices

Issues with the Bootstrap date time picker functionality

Angular date selection with a range of plus two days, factoring in the exclusion of weekends

Efficiently refresh several DIV elements with a single JSON request