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

Question

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

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

https://codepen.io/danongu/pen/LYYevMv

HTML

<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}

标签： htmlcss

Answer 1

您应该将包含小图标的 div 移动到带有“h2h-team-intro”类的 div 中：

<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>

并添加这个 CSS：

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

而且你不需要“ ”作为空间。您可以使用边距管理空间。