Question

我需要将div类图标放在中间和图像部分2上，我不知道margin-top：-17％是否真的将div放在图像上。

    <img style="padding-top:5%; width:100%;"src="img/image-section2.png">
        <div class="icons" style="position: relative; z-index: 2;margin-top:-17%;display:block;width:100%">
            <div style="float:left">
                <img style="width:25%"src="img/Project-icon.png">
                <h3 style="margin-left:-15%;width:200px;text-align:left;font-family:Raleway;font-weight:bold;font-size:15px;text-transform:uppercase;color:#FFFFFF;">complete Project</h3>
                <h1 style="margin-left:5%;width:200px;text-align:left;font-family:Arial;font-size:20px;text-transform:uppercase;color:#FFFFFF;">120</h1>
            </div>
            <div style="float:left">
                <img style="width:25%;"src="img/cup-of-coffee.png">
                <h3 style="margin-left:-15%;width:200px;text-align:left;font-family:Raleway;font-weight:bold;font-size:15px;text-transform:uppercase;color:#FFFFFF;">cups of coffee</h3>
                <h1 style="margin-left:5%;width:200px;text-align:left;font-family:Arial;font-size:20px;text-transform:uppercase;color:#FFFFFF;">570</h1>
            </div>
            <div style="float:left">
                <img style="width:25%;"src="img/award-icon.png">
                <h3 style="margin-left:-15%;width:200px;text-align:left;font-family:Raleway;font-weight:bold;font-size:15px;text-transform:uppercase;color:#FFFFFF;">Award Winners</h3>
                <h1 style="margin-left:5%;width:200px;text-align:left;font-family:Arial;font-size:20px;text-transform:uppercase;color:#FFFFFF;">682</h1>
            </div>
            <div style="float:left">
                <img style="width:25%;"src="img/customer.png">
                <h3 style="margin-left:-15%;width:200px;text-align:left;font-family:Raleway;font-weight:bold;font-size:15px;text-transform:uppercase;color:#FFFFFF;">happy customers</h3>
                <h1 style="margin-left:5%;width:200px;text-align:left;font-family:Arial;font-size:20px;text-transform:uppercase;color:#FFFFFF;">900</h1>
            </div>
        </div>

Answer 1

而不是为每个标签应用内联样式。使用样式标记并为所有类/ ID包含一种样式（以避免冗余）。

也为父容器添加背景图像。而不是使用spearate imag标签

为每个子容器指定一个名为“sub_container”的类

删除它们的浮动属性。将它们显示为表格单元格。添加一个white-space：nowrap属性。

在主容器中只需添加相同大小的填充顶部和底部。这将使项目看起来像是在页面

中居中下面的

小片（放在可调整大小的窗口中）

div {
  color: black;
}

#container {
  background: url("https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcTomMW37agCBOu64_RK6Kn8kQyN9937Upm5XZXRPkwCIbeAwyNG");
  background-size: cover;
  padding-top:100px;
  padding-bottom:100px;
}

.icons {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
}
.sub_container{
  white-space:nowrap;
  display:inline-block;
  border:solid red;

}

<div id="container">
<div class="sub_container" >
  <img style="width:25%;" src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcTdLmT2S2vZp6WFy0hQM4vrz8W-qZyglg3973cgAhJy9a51DXahOQ">
  <h3 style="width:200px;text-align:left;font-family:Raleway;font-weight:bold;font-size:15px;text-transform:uppercase;color:#FFFFFF;">complete Project</h3>
  <h1 style="width:200px;;font-family:Arial;font-size:20px;text-transform:uppercase;color:#FFFFFF;">120</h1>
</div>
<div class="sub_container" >
 <img style="width:25%;" src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcTdLmT2S2vZp6WFy0hQM4vrz8W-qZyglg3973cgAhJy9a51DXahOQ">
  <h3 style="width:200px;text-align:left;font-family:Raleway;font-weight:bold;font-size:15px;text-transform:uppercase;color:#FFFFFF;">cups of coffee</h3>
  <h1 style="width:200px;font-family:Arial;font-size:20px;text-transform:uppercase;color:#FFFFFF;">570</h1>
</div>
<div class="sub_container" >
  <img style="width:25%;" src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcTdLmT2S2vZp6WFy0hQM4vrz8W-qZyglg3973cgAhJy9a51DXahOQ">
  <h3 style="width:200px;text-align:left;font-family:Raleway;font-weight:bold;font-size:15px;text-transform:uppercase;color:#FFFFFF;">Award Winners</h3>
  <h1 style="width:200px;font-family:Arial;font-size:20px;text-transform:uppercase;color:#FFFFFF;">682</h1>
</div>
<div class="sub_container" >
  <img style="width:25%;" src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcTdLmT2S2vZp6WFy0hQM4vrz8W-qZyglg3973cgAhJy9a51DXahOQ">
  <h3 style="width:200px;text-align:left;font-family:Raleway;font-weight:bold;font-size:15px;text-transform:uppercase;color:#FFFFFF;">happy customers</h3>
  <h1 style=";width:200px;;font-family:Arial;font-size:20px;text-transform:uppercase;color:#FFFFFF;">900</h1>
</div>


</div>

Alernative two（带有固定高度的容器）

div {
  color: black;
}

#container {
  background: url("https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcTomMW37agCBOu64_RK6Kn8kQyN9937Upm5XZXRPkwCIbeAwyNG");
  background-size: cover;
  height:500px;
}

.icons {
  top: 50%;
  left: 50%;
  margin: 0;
}
.sub_container{
  position:relative;
  top:50%;


  white-space:nowrap;
  display:inline-block;
}

<div id="container">
<div class="sub_container" >
  <img style="width:25%;" src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcTdLmT2S2vZp6WFy0hQM4vrz8W-qZyglg3973cgAhJy9a51DXahOQ">
  <h3 style="width:200px;text-align:left;font-family:Raleway;font-weight:bold;font-size:15px;text-transform:uppercase;color:#FFFFFF;">complete Project</h3>
  <h1 style="width:200px;;font-family:Arial;font-size:20px;text-transform:uppercase;color:#FFFFFF;">120</h1>
</div>
<div class="sub_container" >
 <img style="width:25%;" src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcTdLmT2S2vZp6WFy0hQM4vrz8W-qZyglg3973cgAhJy9a51DXahOQ">
  <h3 style="width:200px;text-align:left;font-family:Raleway;font-weight:bold;font-size:15px;text-transform:uppercase;color:#FFFFFF;">cups of coffee</h3>
  <h1 style="width:200px;font-family:Arial;font-size:20px;text-transform:uppercase;color:#FFFFFF;">570</h1>
</div>
<div class="sub_container" >
  <img style="width:25%;" src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcTdLmT2S2vZp6WFy0hQM4vrz8W-qZyglg3973cgAhJy9a51DXahOQ">
  <h3 style="width:200px;text-align:left;font-family:Raleway;font-weight:bold;font-size:15px;text-transform:uppercase;color:#FFFFFF;">Award Winners</h3>
  <h1 style="width:200px;font-family:Arial;font-size:20px;text-transform:uppercase;color:#FFFFFF;">682</h1>
</div>
<div class="sub_container" >
  <img style="width:25%;" src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcTdLmT2S2vZp6WFy0hQM4vrz8W-qZyglg3973cgAhJy9a51DXahOQ">
  <h3 style="width:200px;text-align:left;font-family:Raleway;font-weight:bold;font-size:15px;text-transform:uppercase;color:#FFFFFF;">happy customers</h3>
  <h1 style=";width:200px;;font-family:Arial;font-size:20px;text-transform:uppercase;color:#FFFFFF;">900</h1>
</div>


</div>

Answer 2

在屏幕中心使用margin: -17% auto;放置课程图标

好运

如何将div标签置于页面中间

2 个答案: