'How do I center of this whole div class? Same with hovering

I was trying to center these div class using margin but when Im looking at the mobile view, its overlapping. I wanted to do to make it responsive by itself

.hover-buttons {
    transition: 0.25s;
    opacity: 0;
    position: absolute;
    left: 28%;
    bottom: calc(-10%);
    padding: 10px 20px 15px 20px;
}

.item:hover .hover-buttons {
    opacity: 1;
    transition: 0.25s;
    cursor: pointer;
    padding: 10px 20px 15px 20px;
    text-align: center;
    background-color: #fff;
    color: #242424;
    left: 26%;
    bottom: calc(15%);
}

.hover-buttons a {
    text-decoration: none;
    color: #242424;
    transition: 0.25s;
}

.hover-buttons a:hover {
    color: #808080;
    transition: 0.25s;
}
 <div class="hover-buttons">
    <a class="" href="#"><i class="fa-solid fa-cart-shopping fa-fw"></i></a>
    <a class="" href="#"><i class="fa-solid fa-magnifying-glass fa-fw"></i></a>
    <a class="" href="#"><i class="fa-solid fa-shuffle fa-fw"></i></a>
    <a class="" href="#"><i class="fa-regular fa-heart"></i></a>
 </div>

This is the image

htmlcss


Solution 1:[1]

First of all, not so sure why are you using: .item:hover .hover-buttons, probably in other parts of your code

besides that, you can center that div by itself with the following:

add a width: 100%
display the container as flex
justify the inner content as center

Also, I reset the default margin and padding from the browser to 0. Check out the snippet. Hopefully it will help:

html,
body {
  padding: 0;
  margin: 0;
}

.hover-buttons {
  transition: 0.25s;
  position: absolute;
  bottom: calc(10%);
  width: 100%;
  display: flex;
  justify-content: center;
}

.hover-buttons a {
  text-decoration: none;
  color: #242424;
  transition: 0.25s;
}

.hover-buttons a:hover {
  color: #808080;
  transition: 0.25s;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" rel="stylesheet" />

<div class="hover-buttons">
  <a class="" href="#">
    <i class="fa-solid fa-cart-shopping"></i>
  </a>
  <a class="" href="#">
    <i class="fa-solid fa-magnifying-glass"></i>
  </a>
  <a class="" href="#">
    <i class="fa-solid fa-shuffle"></i>
  </a>
  <a class="" href="#">
    <i class="fa-solid fa-heart"></i>
  </a>
</div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 nestor

Related Questions