How can I center align the carousel images and text correctly?

Question

I have a carousel that is working perfectly fine as I want but I'm having trouble center aligning the image and text properly. It looks fine in small screen but is not aligned in bigger screens or smaller screens.

Also the previous and next button arrows are not aligned in the center of the background circle aswell.

HTML

<div>
  <h3 style="text-align:center; padding:30px; padding-bottom:10px;">Trending now</h3>

  <!-- Multi Carousel -->
  <div class="prod-slider-container">
    <div class="inner-container">
      <div class="owl-carousel">
        <div class="item">
          <a href=""><img src="https://www2.hm.com/content/dam/hm-magazine-2020/featured-fashion/20_13_A_trend_bildspel_1.jpg"></a>
          <p class="carosueltitletxt">
            Women<br>
            <span class="carosueltxt">Jackets & Coats</span>
          </p>
        </div>
        <div class="item">
          <a href=""><img src="https://lp2.hm.com/hmgoepprod?set=quality%5B79%5D%2Csource%5B%2F33%2F9e%2F339e3549ec41eef34883a4fbe73e8501c36764fb.jpg%5D%2Corigin%5Bdam%5D%2Ccategory%5Bladies_cardigansjumpers_cardigans%5D%2Ctype%5BLOOKBOOK%5D%2Cres%5Bm%5D%2Chmver%5B1%5D&call=url[file:/product/main]"></a>
          <p class="carosueltitletxt">
            Women<br>
            <span class="carosueltxt">Cardigans &<br> Sweaters</span>
          </p>
        </div>
        <div class="item">
          <a href=""><img src="https://cdna.lystit.com/photos/56a1-2014/11/06/hm-blue-jumper-in-a-mohair-blend-product-1-25065199-0-150443488-normal.jpeg"></a>
          <p class="carosueltitletxt">
            Women<br>
            <span class="carosueltxt">Clothes</span></p>
        </div>
        <div class="item">
          <a href=""><img src="https://i.pinimg.com/736x/32/00/a8/3200a8617dfbc6139b8251a36d5118de.jpg"></a>
          <p class="carosueltitletxt">
            Kids<br>
            <span class="carosueltxt">Boys 11/2-10<br> years</span></p>
        </div>
        <div class="item">
          <a href=""><img src="https://lp2.hm.com/hmprod?hmver=0&set=quality[79],source[/environment/2016/8EZ_0117_008R.jpg],width[4054],height[4740],x[549],y[438],type[FASHION_FRONT]&call=url[file:/product/main]"></a>
          <p class="carosueltitletxt">
            Kids<br>
            <span class="carosueltxt">Girls 11/2-10<br> years</span></p>
        </div>
        <div class="item">
          <a href=""><img src="https://i.pinimg.com/736x/b3/21/bd/b321bd9d618ee5439cd7218f9a543704.jpg"></a>
          <p class="carosueltitletxt">
            Men<br>
            <span class="carosueltxt">Hoodies &<br> Sweatshirts</span></p>
        </div>
        <div class="item">
          <a href=""><img src="https://media1.popsugar-assets.com/files/thumbor/Ol-YWVWUQnVmpEjhoKL6eZK0Kfo/fit-in/2048xorig/filters:format_auto-!!-:strip_icc-!!-/2014/09/11/879/n/24155406/6877ea140db7a0db_thumb_temp_image22153611410465627/i/HM-Newborn-Clothes.jpg"></a>
          <p class="carosueltitletxt">
            Kids<br>
            <span class="carosueltxt">Newborn 0-9<br>months</span></p>
        </div>
        <div class="item">
          <a href=""><img src="https://mk0stylisheve1cal1r6.kinstacdn.com/wp-content/uploads/2011/12/HM-Jumpers-and-Cardigans-for-Men_01.jpg"></a>
          <p class="carosueltitletxt">
            Men<br>
            <span class="carosueltxt">Cardigans &<br> Sweaters</span></p>
        </div>
        <div class="item">
          <a href=""><img src="https://lp2.hm.com/hmgoepprod?set=quality%5B79%5D%2Csource%5B%2F0e%2F50%2F0e50030ec7575845e95ead7a4046c4522544852d.jpg%5D%2Corigin%5Bdam%5D%2Ccategory%5Bmen_trousers_dressed%5D%2Ctype%5BLOOKBOOK%5D%2Cres%5Bm%5D%2Chmver%5B1%5D&call=url[file:/product/main]"></a>
          <p class="carosueltitletxt">
            Men<br>
            <span class="carosueltxt">Pants</span></p>
        </div>
        <div class="item">
          <a href=""><img src="https://i.pinimg.com/originals/b7/2a/50/b72a5020325b27dd6c053223703ee04b.jpg"></a>
          <p class="carosueltitletxt">
            Kids<br>
            <span class="carosueltxt">Baby Exclusive <br> 0m-4 years</span></p>
        </div>
        <div class="item">
          <a href=""><img src="https://lp2.hm.com/hmgoepprod?set=quality%5B79%5D%2Csource%5B%2Fe3%2F6c%2Fe36c9e916fdfa4b3896bfe9992889b7fa4a827ca.jpg%5D%2Corigin%5Bdam%5D%2Ccategory%5Bladies_cardigansjumpers_hoodiessweatshirts%5D%2Ctype%5BLOOKBOOK%5D%2Cres%5Bm%5D%2Chmver%5B1%5D&call=url[file:/product/main]"></a>
          <p class="carosueltitletxt">
            Women<br>
            <span class="carosueltxt">Hoodies & <br> Sweatshirts</span></p>
        </div>
        <div class="item">
          <a href=""><img src="https://media1.popsugar-assets.com/files/thumbor/18fWRKJF__pohskeGtu_P3dCSRE/fit-in/1024x1024/filters:format_auto-!!-:strip_icc-!!-/2020/01/08/883/n/1922564/28a69c26b18fd4bf_netimgaMezvq/i/HM-Paper-bag-Pants.jpg"></a>
          <p class="carosueltitletxt">
            Women<br>
            <span class="carosueltxt">Pants</span></p>
        </div>
        <div class="item">
          <a href=""> <img src="https://i.pinimg.com/originals/14/ff/b0/14ffb09b1bcef167ed28a9624748e032.jpg"></a>
          <p class="carosueltitletxt">
            Women<br>
            <span class="carosueltxt">Accessories</span></p>
        </div>
        <div class="item">
          <a href=""><img src="https://lp2.hm.com/hmgoepprod?set=width[800],quality[80],options[limit]&source=url[https://www2.hm.com/content/dam/men_s02/september_2020/3132b/3132B-1x1-v41-the-casual-edit.jpg]&scale=width[global.width],height[15000],options[global.options]&sink=format[jpg],quality[global.quality]"></a>
          <p class="carosueltitletxt">
            Men<br>
            <span class="carosueltxt">Jackets & <br>Coats</span></p>
        </div>
        <div class="item">
          <a href=""><img src="https://media1.popsugar-assets.com/files/thumbor/ornsuB5wU0zsOvtIq06LKYZaN0o/fit-in/1024x1024/filters:format_auto-!!-:strip_icc-!!-/2019/06/05/932/n/1922564/201a10c4095b52d1_netimgVaH6Nm/i/HM-Linen-Shirt.jpg"></a>
          <p class="carosueltitletxt">
            Women<br>
            <span class="carosueltxt">Shirts &<br> blouses</span></p>
        </div>
        <div class="item">
          <a href=""><img src="https://decoholic.org/wp-content/uploads/2020/09/HM-Home-fall-2020-2.jpg"></a>
          <p class="carosueltitletxt">
            H&M Home<br>
            <span class="carosueltxt">New Home &<br> Interior</span></p>
        </div>
      </div>
    </div>
  </div>

CSS

/*carousel*/
.prod-slider-container {
  position: relative;
  font-family: font-awesome;
  margin-left: 10%;
  margin-right: 10%;
}
.owl-buttons {
  background-color: transparent;
  border: 0px none transparent;
  width: 9%;
}
.owl-prev,
.owl-next {
  position: absolute;
  top: 37px;
}
i.fa {
  cursor: pointer;
  font-size: 10px;
  padding-top: 0;
  height: 0;
  width: 0px;
  color: rgba(0, 0, 4, 0.5);
  
}

.owl-perv {
  left: -2%;
}
.owl-next {
  right: 5.1%;
}
.item img {
  margin-left: 10px;
  margin-right: 10px;
  width: 100px;
  height: 100px;
  border-radius: 50px;
  background: #222222;
  object-fit: cover;
}

.carosueltitletxt{
  font-family:helvetica;
  text-align:center;
  color:#555555;
  font-size:11px;
  font-weight:bold;
}

.carosueltxt{
  font-family:helvetica;
  text-align:center;
  color:#222222;
}

.d4-container img {
  position: relative;
  margin-left: 10%;
  margin-right: 10%;
  margin-top: 20px;
  display: block;
  width: 80%;
  height: 400px;
  object-fit: cover;
  background: gray;
  
}

JQuery

$(document).ready(function() {
  $('.owl-carousel').owlCarousel({
    items: 8,
    pagination:false,
    itemsDesktop: [1199, 5],
    itemsDesktopSmall: [979, 5],
    navigation: true,
    navigationText: [
      "<i class='fa fa-chevron-left'></i>",
      "<i class='fa fa-chevron-right'></i>"
    ]
  });
});

please add jquery and carousel tags. – iAmOren Oct 20 '20 at 06:15 — iAmOren, Oct 20 '20 at 06:15

score 1 · Answer 1 · answered Oct 20 '20 at 04:52

To center the texts and the images, add text-align: center; to the wrapper element which is .item in this case.

You can add this text-align: center; to the second parent .owl-carousel or the third .inner-container also, that would make all the texts and images inside centered.

And for .owl-next & .owl-prev honestly, if you can't provide the live example of this carousel, I can't be specific about the solution, this is a simple try based on your provided code, hope this would help you find the solution-

.inner-container {
  position: relative;
}

.inner-container .owl-prev,
.inner-container .owl-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.owl-prev {left: 15px}
.owl-next {right: 15px}

Thanks Tanim. I was able to get it to work. I'll be sure to include a live example next time. — ikol, Oct 20 '20 at 16:19

score 1 · Accepted Answer · answered Oct 20 '20 at 04:56

1

Hi can you please try with this and let me know thank you.

.prod-slider-container .item a {
     display: block;
     margin: 0 auto;
     float: none;
     text-align: center;
}

answered Oct 20 '20 at 04:56

KM Likhon

51
2

Thanks @KM Likhon. Your solution worked best! Appreciate the help – ikol Oct 20 '20 at 16:20

score -1 · Answer 3 · answered Oct 20 '20 at 07:58

-1

just use display: flex on .item class and change the value of justify-content and align items to fit your need.

like this:

.item{
  display: flex;
  justify-content: center;
  align-items: space-around;
}

answered Oct 20 '20 at 07:58

Kada Guetouache

41
8

How can I center align the carousel images and text correctly?

3 Answers3