HTML Div коробки выравнивания

Question

Это то, что я хочу, чтобы это выглядело как:

Я пытаюсь создать HTML-файл, который имеет 5 Div коробки, как на картинке показано выше. У меня есть первые три, но я не уверен, как сделать дно два. Любая помощь с благодарностью

<div class="row divcenter" style="max-width: 1000px;"> 

         <div class="col-sm-4 bottommargin"> 

          <div class="team"> 
           <div class="team-image"> 
            <img src="images/team/1.jpg" alt="ThreatVulnManage"> 
            <div class="team-overlay"> 
             <div class="team-social-icons"> 
              <a class="si-borderless si-facebook" title="Facebook"> 
               <i style="color:#fff;padding-top: 10px"><ul>Penetration Testing</ul></i> 
               <i style="color:#fff"><ul>Vulnerability Scans</ul></i> 
               <i style="color:#fff"><ul>Red/Blue/Purple Team Exercise</ul></i> 
               <i style="color:#fff"><ul>Black Team</ul></i> 
              </a> 
             </div> 
            </div> 
           </div> 
           <div class="team-desc team-desc-bg"> 
            <div class="team-title"><h4>Threat & Vulnerability Management</h4></div> 
           </div> 
          </div> 

         </div> 

         <div class="col-sm-4 bottommargin"> 

          <div class="team"> 
           <div class="team-image"> 
            <img src="images/team/2.jpg" alt="EnterpriseRiskCompliance"> 
            <div class="team-overlay"> 
             <div class="team-social-icons"> 
              <a class="si-borderless si-facebook" title="Facebook"> 
               <i style="color:#fff"><ul>IT Security Assessment & Cyber Breach Risk Assessment</ul></i> 
               <i style="color:#fff"><ul>HIPAA & PCI-DSS</ul></i> 
               <i style="color:#fff"><ul>Third-Party Vendor Risk Assessment</ul></i> 
               <i style="color:#fff"><ul>Cloud App Risk Assessment</ul></i> 
               <i style="color:#fff"><ul>Data Discovery Mapping & Classification</ul></i> 
               <i style="color:#fff"><ul>Compliance Management</ul></i> 
              </a> 
             </div> 
            </div> 
           </div> 
           <div class="team-desc team-desc-bg"> 
            <div class="team-title"><h4>Enterprise <br>Risk & Compliance</h4></a></div> 
           </div> 
          </div> 

         </div> 

         <div class="col-sm-4 bottommargin"> 

          <div class="team"> 
           <div class="team-image"> 
            <img src="images/team/3.jpg" alt="SecurityProgramStrategy"> 
            <div class="team-overlay"> 

             <div class="team-social-icons"> 
              <a class="si-borderless si-facebook" title="Facebook"> 
               <i style="color:#fff;padding-top: 10px"><ul>Infosec Program Development</ul></i> 
               <i style="color:#fff"><ul>ISO 27002</ul></i> 
               <i style="color:#fff"><ul>NIST</ul></i> 
              </a> 
             </div> 
            </div> 
           </div> 
           <div class="team-desc team-desc-bg"> 
            <div class="team-title"><h4>Security Program <br>Strategy</h4></div> 
           </div> 
          </div> 

         </div> 

        </div> 

        <div class="row divcenter" style="max-width: 1000px;"> 

         <div class="col-sm-4 bottommargin"> 

          <div class="team"> 
           <div class="team-image element-5"> 
            <img src="images/team/1.jpg" alt="Trust"> 
            <div class="team-overlay"> 
             <div class="team-social-icons"> 
              <a class="si-borderless si-facebook" title="Facebook"> 
               <i style="color:#fff;padding-top: 10px"><ul>T-Score</ul></i> 
               <i style="color:#fff"><ul>R-Score</ul></i> 
               <i style="color:#fff"><ul>PNProtect</ul></i> 
               <i style="color:#fff"><ul>Trust Restoration Framework</ul></i> 
              </a> 
             </div> 
            </div> 
           </div> 
           <div class="team-desc team-desc-bg"> 
            <div class="team-title"><h4>Trust</h4></div> 
           </div> 
          </div> 

         </div> 

         <div class="col-sm-4 bottommargin"> 

          <div class="team"> 
           <div class="team-image element-4"> 
            <img src="images/team/2.jpg" alt="EducationAwareness"> 
            <div class="team-overlay"> 
             <div class="team-social-icons"> 
              <a class="si-borderless si-facebook" title="Facebook"> 
               <i style="color:#fff;padding-top: 10px"><ul>Security Awareness Training</ul></i> 
               <i style="color:#fff"><ul>Secure Code Review Training</ul></i> 
               <i style="color:#fff"><ul>Human Breach Prevention Project</ul></i> 
              </a> 
             </div> 
            </div> 
           </div> 
           <div class="team-desc team-desc-bg"> 
            <div class="team-title"><h4>Education & Awareness</h4></div> 
           </div> 
          </div> 

         </div> 

Answer 1

Трудно сказать точно, не зная, как вы структурируете свой код. Если все в одном контейнере, вы можете установить его text-align на center и иметь в нем элементы display: inline-block.

<div class="wrapper"> 
    <div class="child"> 
    <div class="child"> 
    <div class="child"> 
    <div class="child"> 
    <div class="child"> 
</div> 

И CSS:

.wrapper { 
    text-align: center; 
} 

.child { 
    display: inline-block; 
    width: 100px; 
    height: 100px; 
    background-color: #777777; 
    margin: 15px; 
} 

Пока дети слишком широка, чтобы все умещается на одной и той же строке в обертке, они будут переходить к следующей строке. В качестве альтернативы вы можете поместить элемент <br>, чтобы заставить их обернуть новую строку или просто поместить их в отдельные <div> s

Answer 2

Я очень новичок в кодировании, и я сожалею, если это предложение вам не поможет. Я пытаюсь ответить на вопросы, поэтому, возможно, я смогу больше узнать о себе.

Я хотел бы сделать что-то вроде этого в CSS:

#boxes { 
    float: left; 
    position: relative; 
} 

.box4 { 
    clear: left; 
} 

Затем отредактируйте запас соответственно.