Question

我正在创建一个并排2 <div>的网页。每个<div>将包含2个部分。我想将它们居中（将它们带到<div>的中间）。我想让这个<div>做出回应。在网站中，2 <div> s将在一行中，而在移动设备中，<div>将出现在一行中，而另一行<div>将出现在第二行。我试图将每个部分的图像和文本居中。

我该如何实现？

.wrapper {
  width: 100%;
  overflow: hidden;
}
.wrapper div {
  min-height: 45px;
  padding: 1px;
}
#one {
  background-color: gray;
  float: left;
  width: 50%;
}
#two {
  background-color: red;
  overflow: hidden;
  min-height: 45px;
}
@media screen and (max-width: 400px) {
  #one {
    float: none;
    margin-right: 0;
    width: auto;
    border: 0;
  }
}

<div class="wrapper">
  <div id="one">
    <img src="http://livebodybuilding.com/images/fast-delivery.png" height="26" width="55" style="float:left; margin-top: 6px;" />
    <p style=" font-size:13px; color:#fff; line-height:1.5; font-family: 'Montserrat',sans-serif;"><strong>&nbsp;&nbsp;&nbsp;FREE DELIVERY         </strong>ORDERS OVER $100</p>
  </div>
  <div id="two">
    <img src="http://livebodybuilding.com/images/free-gift.png" height="26" width="31" style="float:left; margin-top: 6px;" />
    <p style="font-size:13px;  color:#fff; line-height:1.5; font-family: 'Montserrat',sans-serif;"><strong>&nbsp;&nbsp;&nbsp;FREE GIFT</strong> ORDERS OVER $100</p>
  </div>
</div>

我的小提琴：https://jsfiddle.net/4okxw32v/

Answer 1

首先，不鼓励在布局设计中使用浮点数。这通常不是一种好的做事方式，通常如果你遇到布局问题，那就归结为浮动问题。相反，您应该使用display: inline-block设置。使用内联块时，需要考虑几个方面。

将显示元素之间的任何空白区域。要解决此问题，您可以在包装器上设置font-size: 0，然后在子项上设置font-size: 1rem。这会将内容中的字体大小设置为与html选择器相同的大小。
如果您在父级上设置white-space: nowrap，然后在子级上设置white-space: initial，则可以阻止换行。

下一步而不是添加图像并将其浮动到子项中，您可以在元素内的文本容器上使用css伪元素:: before（或css2：before）。

最后将内容集中在父

text-align: center

*, *::before, *::after {
  box-sizing: border-box;
}
html,
body {
  padding: 0px;
  margin: 0px;
}
.wrapper {
  font-size: 0;
}
.wrapper div {
  font-size: 1rem;
  min-height: 45px;
  padding: 1px;
  text-align: center;
  font-size: 13px;
  color: #fff;
  line-height: 1.5;
  font-family: 'Montserrat', sans-serif;
  overflow: hidden;
  display: inline-block;
  width: 50%;
}
#one {
  background-color: gray;
}
#one p:before {
  content: "";
  display: inline-block;
  width: 4em;
  height: 2em;
  background-image: url(http://livebodybuilding.com/images/fast-delivery.png);
  background-size: cover;
  vertical-align: middle;
  margin-right: 5px;
}
#two {
  background-color: red;
  overflow: hidden;
  min-height: 45px;
}
#two p:before {
  content: "";
  display: inline-block;
  width: 2.5em;
  height: 2em;
  background-image: url(http://livebodybuilding.com/images/free-gift.png);
  background-size: cover;
  vertical-align: middle;
  margin-right: 5px;
}
@media screen and (max-width: 620px) {
  .wrapper div {
    width: 100%;
  }
}

<div class="wrapper">
  <div id="one">
    <p><strong>FREE DELIVERY</strong> ORDERS OVER $100</p>
  </div>
  <div id="two">
    <p><strong>FREE GIFT</strong> ORDERS OVER $100</p>
  </div>
</div>

居中图像和文本

1 个答案: