I'm using react-slick to create an image slider with captions with following prototype. The only problem is I need to display text for corresponding image below the default dots position, hence I'm trying to create custom dots and arrows with onClick functions. How can I align them in center and in one row provided number of dots will be dynamic.

CodePudding user response：

Here's how I would do it:

   #dotsContainer {
    width: 100%;
    height: 3em;
    display: flex;
    justify-content: center;
    align-items: center;
    }

This would align everything put in that div in the center - but does not really prevent it from breaking if there are so many dots.