Html 如何使一个div在另一个div的下方居中对齐，同时使它们保持独立div

我正在学习CSS，并试图将一个div置于另一个div之下。我希望它们是单独的div，但尽管尝试了一些建议，例如使用：relative、absolute等，我还是无法让它工作。在本例中，第一个div包含名称XYZ和图像，而第二个div包含红色小图标。我需要使它们成为单独的div，但仍然要保持它们对齐，如下图所示。这里是我的代码笔的链接

请帮我解决这个问题。谢谢

HTML

团队

微光
CSS
@媒体全部{a:活动，a:悬停{大纲：0}
img{最大宽度：100%；高度：自动；垂直对齐：中间；边框：0；-ms插值模式：双三次}
@媒体打印{*{文本阴影：无！重要；颜色：#000！重要；背景：0！重要；方框阴影：无！重要}
a、 a:访问{text decoration:underline}a[href]：在{content:“（attr（href）”）”之后}
img{page break-inside:avoid}img{max-width:100%！important}h2，p{孤儿：3；寡妇：3}h2{page break-after:avoid}p{margin:0 0.11px}h2{margin:11px 0；字体系列：继承；字体重量：700；行高：22px；颜色：继承；文本阴影：0 1px 0#fff}h2{字体大小：32px；行高：40px}h2 a:hover:note-text-decoration:{媒体内容：无装饰后}{（最大宽度：767px）{h2{font size:25.6px；行高：25.6px}}}@media all{a:focus{outline:thin-dottered}333；outline:thin-auto-grey；outline offset:-2px}a{color:#5a5a5a5a5a；文本装饰：none}a:focus a:hover{color:#3434343434；文本装饰：下划线}h2{字体系列：Verdana，日内瓦，sans serif；font-weight:h2*{-webkit框大小：边框框；框大小：边框框}：前{-webkit框大小：边框框；框大小：边框框}：后{-webkit框大小：边框框；框大小：边框框}img{height:auto}a{text装饰：none}img{最大宽度：100%；高度：auto}。表单图标。表单丢失{背景色：#ef362a}。表单图标。表单丢失：悬停{background background color:#f272; a}{文字装饰：无；光标：指针}a.表格图标{边距：1px；显示：内联块}表格图标{文字缩进：0；背景：0；边框：0实心透明；边框半径：6px；颜色：#fff；线条高度：15px；字体重量：700；字体大小：10px；不透明度：1；宽度：17px；文字对齐：中心}@媒体屏幕和（最大宽度：700px）{表格图标{宽度：13.7px}p}{margin:0；padding:0；border:0；font:inherit；vertical align:baseline}*{-webkit字体平滑：抗锯齿；文本呈现：优化易读性；-moz-osx字体平滑：灰度}.bold{font-weight:700}.ac{text-align:center！important}.bold{font-weight:700}a{text-decoration:none}a，div，h2，img，p{margin:0；padding:0；border:0；font size:100%；font:inherit；vertical align:baseline}*{-webkit字体平滑：抗锯齿；文本呈现：优化易读性；-moz-osx字体平滑：灰度}a:hover{text-decoration:underline}h2{font-size:1.8em；font-weight:700}黑色，{color:#222 important}.m0Auto}清除：两者；显示：块；边距：0 auto}.mt01e{margin top:.1em！important}.bold{font-weight:700}.ac{text align:center！important}.hover none:hover{text装饰：none！important}.bold{font-weight:700}.col-lg-4{width:33.333333%；float:left；-webkit框大小：边框框；-moz框大小：边框框；框大小：边框框大小：边框框}.club图像边框{边框：1px实心#666；背景：#fff；填充：.2em}.club图像大小{宽度：138px；-webkit框大小：边框框；-moz框大小：边框框；框大小：边框框}@media screen和（最大宽度：1000px）{h2{font size:1.4em}.col-sm-12{width:100%！important；最大宽度：100%！important}.col-sm-3{width:25%；最大宽度：25%；float:left}.h2h团队简介h2{font size:1em}.h2h团队简介p{font size:9em}.black{颜色：#111！重要}img{垂直对齐：文本底部！重要}

您应该将包含小图标的div移动到类为“h2h团队简介”的div中：

---

你不需要用“ ”来表示空间。你可以用边距来管理空间。

我需要关闭第一个div来分隔它们。像这样

团队

否则它们仍然是相互依赖的。这可能吗？是的，你可以添加以下样式：。currform{clear:both；

body{display:flex；flex direction:column；align items:center}

或在两个div的任何其他父元素上，您可以选择在

上添加一些
边距顶部
。currform

div这似乎可行，但会覆盖此

。col-lg-4{width:33.333333%；float:left；

删除

align items:center

替换图标。如果可以添加包装器/父元素，则

.parent{max width:400px（例如）；display:flex；flex direction:column；align items:center}

其中

max width

可以是图像的宽度。

<p>Team</p> </h2> <p>&nbsp;</p>
  <a class="black hover-none col-sm-12 m0Auto" href="/"><img class="club-image-border club-image-size m0Auto col-sm-12" src="http://www.cosmoleague.com/img/default-logo.png" alt="Team Logo"></a> </div>

<div class="currform">
<a class="form-icon form-loss" title="Team 2 - 1 Team">L</a><a class="form-icon form-loss" title="Team 0 - 2 Team">L</a><a class="form-icon form-loss" title="Team 0 - 1 Team">L</a><a class="form-icon form-loss" title="Team 3 - 0 Team">L</a><a class="form-icon form-loss" title="Team 0 - 2 Team">L</a>
</div>

CSS
@media all{a:active,a:hover{outline:0}
img{max-width:100%;height:auto;vertical-align:middle;border:0;-ms-interpolation-mode:bicubic}
@media print{*{text-shadow:none!important;color:#000!important;background:0 0!important;box-shadow:none!important}
a,a:visited{text-decoration:underline}a[href]:after{content:" (" attr(href) ")"}
img{page-break-inside:avoid}img{max-width:100%!important}h2,p{orphans:3;widows:3}h2{page-break-after:avoid}}p{margin:0 0 11px}h2{margin:11px 0;font-family:inherit;font-weight:700;line-height:22px;color:inherit;text-shadow:0 1px 0 #fff}h2{font-size:32px;line-height:40px}h2 a:hover{text-decoration:none}@media print{a[href]:after{content:""}}@media (max-width:767px){h2{font-size:25.6px;line-height:25.6px}}}@media all{a:focus{outline:thin dotted #333;outline:thin auto grey;outline-offset:-2px}a{color:#5a5a5a;text-decoration:none}a:focus,a:hover{color:#343434;text-decoration:underline}}h2{font-family:Verdana,Geneva,sans-serif;font-weight:inherit}h2{text-shadow:none}*{-webkit-box-sizing:border-box;box-sizing:border-box}:before{-webkit-box-sizing:border-box;box-sizing:border-box}:after{-webkit-box-sizing:border-box;box-sizing:border-box}img{height:auto}a{text-decoration:none}img{max-width:100%;height:auto}.form-icon.form-loss{background-color:#ef362a}.form-icon.form-loss:hover{background-color:#f27272}a{text-decoration:none;cursor:pointer}a.form-icon{margin:1px;display:inline-block}.form-icon{text-indent:0;background:0 0;border:0 solid transparent;border-radius:6px;color:#fff;line-height:15px;font-weight:700;font-size:10px;opacity:1;width:17px;text-align:center}@media screen and (max-width:700px){.form-icon{width:13.7px}}p{margin:0;padding:0;border:0;font:inherit;vertical-align:baseline}*{-webkit-font-smoothing:antialiased;text-rendering:optimizelegibility;-moz-osx-font-smoothing:grayscale}.bold{font-weight:700}.ac{text-align:center!important}.bold{font-weight:700}a{text-decoration:none}a,div,h2,img,p{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}*{-webkit-font-smoothing:antialiased;text-rendering:optimizelegibility;-moz-osx-font-smoothing:grayscale}a:hover{text-decoration:underline}h2{font-size:1.8em;font-weight:700}.black,.black *{color:#222!important}.m0Auto{clear:both;display:block;margin:0 auto}.mt01e{margin-top:.1em!important}.bold{font-weight:700}.ac{text-align:center!important}.hover-none:hover{text-decoration:none!important}.bold{font-weight:700}.col-lg-4{width:33.333333%;float:left;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.club-image-border{border:1px solid #666;background:#fff;padding:.2em}.club-image-size{width:138px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}@media screen and (max-width:1000px){h2{font-size:1.4em}.col-sm-12{width:100%!important;max-width:100%!important}.col-sm-3{width:25%;max-width:25%;float:left}.h2h-team-intro h2{font-size:1em}.h2h-team-intro p{font-size:.9em}.black{color:#111!important}}img{vertical-align:text-bottom!important}

<div class="col-lg-4 col-sm-3 h2h-team-intro">
    <h2 class="mt01e ac bold">
        <p>Team</p> 
    </h2> <p>&nbsp;</p>
    <a class="black hover-none col-sm-12 m0Auto" href="/">
     <img class="club-image-border club-image-size m0Auto col-sm-12" 
     src="http://www.cosmoleague.com/img/default-logo.png" alt="Team Logo">
    </a> 
    <div class="currform">
       <a class="form-icon form-loss" title="Team 2 - 1 Team">L</a>
       <a class="form-icon form-loss" title="Team 0 - 2 Team">L</a>
       <a class="form-icon form-loss" title="Team 0 - 1 Team">L</a>
       <a class="form-icon form-loss" title="Team 3 - 0 Team">L</a>
       <a class="form-icon form-loss" title="Team 0 - 2 Team">L</a>
    </div>
</div>

.currform {
   text-align: center;
}
.currform > a.form-icon {
   // style your icon
}