Das übergeordnete Div kann nicht zentriert werden, da der linke Rand des untergeordneten Div negativ ist.

Question

Ich habe das folgende Div erstellt, aber da ich einen negativen linken Rand verwende, um das Symbol zu versetzen, kann ich nicht das gesamte Div zentrieren. Auf dem Desktop kommen wir damit durch, weil man nicht sofort erkennen kann, dass das gesamte Div ein wenig nach links verschoben ist, aber auf Mobilgeräten ist die linke Seite des kreisförmigen Symbols abgeschnitten. Wie kann ich das gesamte Div zentrieren? .icon-text-box{border:1pxsolidred;}.icon-box{background:#fff;border-radius:33px;margin:6remauto

P粉107991030 · Answer

代替 auto 边距，您可以使用不同的想法来居中，同时在小屏幕上添加一些边距

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

完整代码：

.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.

如果您想要一侧有边距，也如下所示：

.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.