Home / Questions / 238697
Accepted
EduBw
Asked: 2020-02-19 03:32:24 +0800 CST 2020-02-19 03:32:24 +0800 CST

Place element in the center html and css

  • 772

I have a series of points that I want to place in the center of the screen.

The number of points is random, sometimes they will come more or less.

The problem is that I want it to snap to the center, but what I am getting is that it starts from the center.

enter image description here

The code is:

  .carousel--Multi-4 {
    position: relative;
  }
  .carousel--Multi-4 .slick-dots {
    position: absolute;
    bottom: -10px;
    left: calc(50%);
    list-style-type: none;
    list-style-position: outside;
  }
  .carousel--Multi-4 .slick-dots li {
    float: left;
    height: 8px;
    width: 8px;
    margin: 0 6px;
    border-radius: 4px;
    background-color: #dedede;
    text-indent: -9999px;
    cursor: pointer;
  }
  .carousel--Multi-4 .slick-dots .slick-active {
    background-color: #ec0000;
  }

These "points" are automatically generated with the slick library http://kenwheeler.github.io/slick/

Thanks.

From CDN ->

 <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/[email protected]/slick/slick.css"/>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

  <script type="text/javascript" src="//cdn.jsdelivr.net/npm/[email protected]/slick/slick.min.js"></script>

Code to create the slick ->

   $('.carousel--Multi-4').slick({
                        arrows: false,
                        dots:false,
                        slidesToShow: 3,
                        autoplay: configuracion.autoplay,
                        autoplaySpeed: configuracion.duracionTransicion,
                        responsive: [
                            {
                                 breakpoint: 708,
                                 settings: {
                                     dots: true,
                                     infinite: true,
                                     slidesToShow: 1.25,
                                     slidesToScroll: 1,
                                     arrows: false,
                                     infinite: true,
                                     speed: 300
                                 }
                            }
                        ]
                      });
html

2 Answers

  1. If all the points, or the points that are going to be generated randomly, you add them to a <div>in which with css you make the block, and therefore, its content, be placed in the center.

    For example:

    <div class="container">
<!-- Aquí es donde se deben colocar los puntos -->
</div>

    In the css file align the block:

    .container {
    text-align: center;
}
    • 1
  2. Best Answer

    try not to use float: leftuse betterdisplay: inline-block

    This would be my modified code

    .carousel--Multi-4 {
    position: relative;
  }
  .carousel--Multi-4 .slick-dots {
    position: absolute;
    bottom: -10px;
    left: 0;
    rigth: 0;
    width: 100%;
    list-style-type: none;
    list-style-position: outside;
  }
  .carousel--Multi-4 .slick-dots li {
    display: inline-block;
    vertical-align: middle;
    height: 8px;
    width: 8px;
    margin: 0 6px;
    border-radius: 4px;
    background-color: #dedede;
    cursor: pointer;
  }
  .carousel--Multi-4 .slick-dots .slick-active {
    background-color: #ec0000;
  }
    • 1