Question

我希望将照片放在绿色容器下（和根据绿色容器的宽度水平对齐）。我怎么能实现这一目标？非常感谢，

enter image description here

HTML：

<div id="carte-des-soins">
  <ul>
    <li><span class="menu-items"><a href="#" data-region="soins-1">Visage</a></span>

    </li>
    <li><span class="menu-items"><a href="#" data-region="soins-2">Epilation</a></span>

    </li>
    <li><span class="menu-items"><a href="#" data-region="soins-3">Mains</a></span>

    </li>
    <li><span class="menu-items"><a href="#" data-region="soins-4">Pieds</a></span>

    </li>
    <li><span class="menu-items"><a href="#" data-region="soins-5">Corps</a></span>

    </li>
  </ul>
</div>
<div id="container-des-soins">
  <div id="soins-1" class="textzone">
    <div class="desc-box clearfix">
      <p class="desc-box-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      <img class="type-de-soins" src="http://lorempixel.com/output/city-q-g-267-204-7.jpg"> 
    </div>
    <div class="carte clearfix">
      <div class="desc-soins">
        <p><strong>PHYT'S : soin visage Equilibre&nbsp;</strong>
          <br>60 min.&nbsp;</p>
        <p>Type de peaux : toute peau à équilibrer (grasse, mixte ou sèche). Soin du visage traditionnel, personnalisé selon le type de peau, qui vous fera retrouver une peau saine et un teint éclatant.&nbsp;</p>
        <p><strong>PHYT'S : soin visage Pureté active</strong>

          <br>60 min.&nbsp;</p>
        <p>Type de peaux : peaux grasses ou mixtes comédogènes. Soin spécifique visant à assainir le teint, éliminer les comédons et aider à réguler les excès de sébum. Ce soin s’effectue, de préférence par cure de 4 soins avec l’application au préalable
          d’une crème spécifique pendant quelques jours.&nbsp;</p>
        <p><strong>PHYT'S : soin visage Aqua Phyt's
</strong>
          <br>75 min.&nbsp;</p>
        <p>Soin très hydratant à l'Acide Hyaluronique d'origine végétale&nbsp;</p>
        <p><strong>PHYT'S : soin visage Capyl
</strong>
          <br>60 min.&nbsp;</p>
        <p>Type de peaux : peaux sèches à rougeurs diffuses, sensibles, fines. Soin calmant et décongestionnant, spécialement conçu pour les peaux sensibles ou à rougeurs diffuses.&nbsp;</p>
      </div>
    </div>
  </div>

CSS：

/* CARTE DES SOINS */
#carte-des-soins {

  text-align: center;
  margin-top: 40px;
}
#carte-des-soins ul {
  list-style: none;
        padding:0;

}
#carte-des-soins li {
display: inline-block;
    margin: 0 10px;
    background: red;

}

#carte-des-soins li a {
    color: #fff;
    text-decoration:none;
    text-align:center;
    padding: 20px;
    background: #474032;
    transition: background-color 0.5s ease;
}



#container-des-soins {
  margin-right: auto;
  margin-left: auto;
  width: 90%;
}
#soins-1,
#soins-2,
#soins-3,
#soins-4,
#soins-5 {
  position: relative;
  float: left;
      margin-top: 30px;

  margin-bottom: 30px;
  padding: 5px 20px 20px 20px;
  color: #333;
  font-weight: 400;
  line-height: 1px;
}

#soins-2,
#soins-3,
#soins-4,
#soins-5 {
  display: none;
}
#soins-2 p {
  margin-bottom: 5px;
}
#soins-1 p {
  margin-bottom: 5px;
  padding-right: 10px;
}
#soins-1 a {
  color: #3A7CDB;
  text-decoration: none;
}
#soins-1 a:hover {
  text-decoration: underline;
}
.carte p {
  margin-bottom: 1em;
}
.carte {
  float: right;
  width: 55%;
  background-color: red;
  padding-top: 25px;
}
.desc-box {
  position: relative;
  z-index: 1;
  width: 40%;
  float: left;
  background-color: green;
}
.desc-box-text {
  float: left;
  padding-top: 25px;
  padding-right: 25px;
  padding-bottom: 25px;
  padding-left: 25px;
  font-weight: 400;
  line-height: 1.38;
  color: rgb(0, 0, 0);
}
.desc-soins {
  float: left;
  font-weight: 400;
  line-height: 1.38;
  color: rgb(0, 0, 0);
}
.type-de-soins {
  display: block;
  position: relative;
margin: 0 auto;  
    z-index: 4;
  width: 179px;
  height: auto;
  overflow: hidden;
}
.desc-soins strong {
  font-style: normal;
  font-weight: 700;
}


/* END CARTE DES SOINS */

Answer 1

您可以尝试使用另一个DIV容器作为图像，并将所有这些div（包括图像div）放入表中。并将align-content='center'放入css表行。希望它有所帮助

另一个更好的解决方案是将div（红色div和图像div）包含到另一个div中，然后可以应用要用于居中的CSS

Answer 2

如果您更改绿色框HTML：

<div class="desc-box clearfix">
  <p class="desc-box-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  <img class="type-de-soins" src="http://lorempixel.com/output/city-q-g-267-204-7.jpg"> 
</div>

到此

<div class="desc-box clearfix">
  <div class="green">
  <p class="desc-box-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  <img class="type-de-soins" src="http://lorempixel.com/output/city-q-g-267-204-7.jpg">
  </div>
  <img class="type-de-soins" src="http://lorempixel.com/output/city-q-g-267-204-7.jpg" style="width:204px;display:block;margin:0 auto;"> 
</div>

您要将内容包装在列中，以便绿色位于所需区域周围。我将图像的样式内联为宽度，块，边距作为居中的自动设置。

然后，为.desc-box修改CSS为此，假设我理解正确，您将获得所需的结果。

.desc-box {
  position: relative;
  z-index: 1;
  width: 40%;
  float: left;
}
.desc-box>.green {
  background-color: green;
}

你可以看到它here

将图片放在DIV下并根据DIV宽度水平对齐

2 个答案: