将同一行上的图像与背景对齐答案

【问题标题】：Align images on the same row with a background将同一行上的图像与背景对齐
【发布时间】：2020-10-07 02:50:58
【问题描述】：

我想将我的图像在同一行和我的 div 类中对齐标题，所以基本上我想要白色背景和 80 年代初发布的标题“耐克”和“标志性耐克鞋”后面的圆形边框' 也位于两个鞋图像的背后。我正在使用 HTML 和 CSS，有一个名为 NikeIntro 的 div 类用于白色背景和两个标题 - 谁能帮忙！

body {
  background: radial-gradient( circle, rgb(175, 243, 154) 0%, rgb(142, 215, 248) 100%);
  font-family: Montserrat;
  color: black;
}

h1 {
  text-align: center;
}

h2 {
  text-align: center;
}

.NikeIntro {
  background: #f5f5f5;
  border-radius: 20px;
  margin: 0 auto;
  padding: 100px 60px;
  max-width: 900px;
  display: block;
}

img {
  display: block;
  padding: 50px 100px;
  border-radius: 50px;
  max-width: 400px;
  margin: 0 auto;
}

.Shoes {
  border-radius: 30px;
  width: 50%;
  float: left;
}

#mainDiv {
  width: 100%;
  margin: auto;
}

<div class="NikeIntro">
  <h1>
    Nike
  </h1>
  <h2>
    Iconic Nike shoe released in the early 80's
  </h2>
</div>
<div id="mainDiv">
  <div id="divOne" class="Shoes">
    <img src="https://sneakerbardetroit.com/wp-content/uploads/2019/09/Nike-Air-Force-1-Shadow-Pale-Ivory-CI0919-101-Release-Date-4.jpg" alt="" />
  </div>
  <div id="divTwo" class="Shoes">
    <img src="https://s3.amazonaws.com/shecodesio-production/uploads/files/000/001/250/original/Nike-Air-Force-1-Sage-Pink-Quartz-CW5566-100-Release-Date__1_-removebg-preview.png?1592256128" alt="" />
  </div>
</div>

【问题讨论】：

标签： html css image alignment

【解决方案1】：

请运行代码 sn-p 看看是否是您需要的。我不确定我是否理解您的要求。基本上，我使用 flexbox 来对齐你的项目。

body {
  background: radial-gradient( circle, rgb(175, 243, 154) 0%, rgb(142, 215, 248) 100%);
  font-family: Montserrat;
  color: black;
}

h1 {
  text-align: center;
}

h2 {
  text-align: center;
}

.NikeIntro {
  background: #f5f5f5;
  border-radius: 20px;
  margin: 0 auto;
  padding: 100px 60px;
  max-width: 900px;
  display: block;
  flex: 1 0 0;
}

img {
  display: block;
  /*padding: 50px 100px;*/
  border-radius: 50px;
  max-width: 400px;
  margin: 0 auto;
  width: 100%;
}

.Shoes {
  border-radius: 30px;
  display: flex;
  align-items: center;
  /*width: 50%;
  float: left;*/
}

#mainDiv {
  width: 100%;
  margin: auto;
  display: flex;
}

#divOne {
  flex: 1 0 0;
}

#divTwo {
  flex: 1 0 0;
}

<div id="mainDiv">
  <div id="divOne" class="Shoes">
    <img src="https://sneakerbardetroit.com/wp-content/uploads/2019/09/Nike-Air-Force-1-Shadow-Pale-Ivory-CI0919-101-Release-Date-4.jpg" alt="" />
  </div>

  <div class="NikeIntro">
    <h1>
      Nike
    </h1>
    <h2>
      Iconic Nike shoe released in the early 80's
    </h2>
  </div>


  <div id="divTwo" class="Shoes">
    <img src="https://s3.amazonaws.com/shecodesio-production/uploads/files/000/001/250/original/Nike-Air-Force-1-Sage-Pink-Quartz-CW5566-100-Release-Date__1_-removebg-preview.png?1592256128" alt="" />
  </div>
</div>

【讨论】：