The parent div cannot be centered because the left margin of the child div is negative.
P粉677573079
P粉677573079 2024-01-29 15:04:54
0
1
510

I created the following div, but because I'm using a negative left margin to offset the icon, I can't center the entire div. We can get away with it on desktop because you can't easily tell that the whole div is moved a little to the left, but on mobile the left side of the circular icon is cut off. How can I center the entire div?

.icon-text-box {
  border: 1px solid red;
}

.icon-box {
  background: #fff;
  border-radius: 33px;
  margin: 6rem auto;
  padding: 4rem 4rem 4rem 7rem;
  box-shadow: 0 3px 6px -2px rgb(0 0 0 / 20%), 0 6px 12px rgb(0 0 0 / 10%);
  position: relative;
  display: flex;
  align-self: center;
  max-width: 900px;
}

.icon-box p {
  font-size: 22px;
  margin-bottom: 0;
}

.icon-box-icon {
  position: absolute;
  left: -90px;
  overflow: hidden;
  display: flex;
  align-self: center;
  height: 177px;
}

.icon-box-icon img {
  border-radius: 40px;
}
<div class="container-fluid mw-972 icon-text-box">
  <div class="icon-box">
    <div class="icon-box-icon">
      <img src="https://www.freepnglogos.com/uploads/spotify-logo-png/spotify-simple-green-logo-icon-24.png" />
    </div>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  </div>
</div>

P粉677573079
P粉677573079

reply all(1)
P粉107991030

Instead of auto margins, you can use a different idea to center while adding some margins on small screens

margin: 6rem max(90px,(100% - 900px)/2);

Full code:

.icon-text-box {
  border: 1px solid red;
}

.icon-box {
  background: #fff;
  border-radius: 33px;
  margin: 6rem max(90px,(100% - 900px)/2);
  padding: 4rem 4rem 4rem 7rem;
  box-shadow: 0 3px 6px -2px rgb(0 0 0 / 20%), 0 6px 12px rgb(0 0 0 / 10%);
  position: relative;
  display: flex;
}

.icon-box p {
  font-size: 22px;
  margin-bottom: 0;
}

.icon-box-icon {
  position: absolute;
  left: -90px;
  top: 50%;
  transform: translateY(-50%);
  overflow: hidden;
  display: flex;
  height: 177px;
}

.icon-box-icon img {
  border-radius: 40px;
}

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

If you want a margin on one side, also look like this:

.icon-text-box {
  border: 1px solid red;
}

.icon-box {
  background: #fff;
  border-radius: 33px;
  margin: 6rem max(0px,(100% - 900px)/2) 6rem max(90px,(100% - 900px)/2);
  padding: 4rem 4rem 4rem 7rem;
  box-shadow: 0 3px 6px -2px rgb(0 0 0 / 20%), 0 6px 12px rgb(0 0 0 / 10%);
  position: relative;
  display: flex;
}

.icon-box p {
  font-size: 22px;
  margin-bottom: 0;
}

.icon-box-icon {
  position: absolute;
  left: -90px;
  top: 50%;
  transform: translateY(-50%);
  overflow: hidden;
  display: flex;
  height: 177px;
}

.icon-box-icon img {
  border-radius: 40px;
}

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template