将div垂直放置在居中的父对象中？

Question

我有一个居中排列的父母。我需要在此父级内部堆叠3个div，以便它们像这样堆叠

Name
Address
Zip

所以我的屏幕需要看起来像这样

Data                                   Name                         more Data
                                       Address 
                                        Zip 

这是我的标记，因为堆叠的div并排，所以不起作用

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="row footer">
  <div class="col">
    <div class="pull-left">{{data}}</div>
  </div>
  <div class="col center-block">
    <div><strong>
            {{name}}</strong>
    </div>
    <br>
    <div><strong>
            {{address}}</strong>
    </div>
    <div><strong>
            {{zip}}</strong>
    </div>
  </div>
  <div class="col pull-right">
    <div class="pull-right" style="padding-right: 20px;">
      <img src="../assets/img/logo.png" style="height: 40px;" alt="Data" />
    </div>
  </div>
</div>

Answer 1

HTML对我来说还不错。假设您没有CSS（因为您没有在问题中发任何帖子），您可以简单地使.row {display：flex;}

.row {display:flex;}

 <div class="row footer">
    <div class="col">
      <div class="pull-left">{{data}}</div>
    </div>
    <div class="col center-block">    
       <div><strong>
        {{name}}</strong>
       </div>
       <br>
       <div><strong>
        {{address}}</strong>
      </div>
      <div><strong>
        {{zip}}</strong>
        </div>     
    </div>
    <div class="col pull-right">
      <div class="pull-right" style="padding-right: 20px;">
        <img src="../assets/img/logo.png" style="height: 40px;" alt="Data"/>
      </div>
    </div>
  </div>

Answer 2

我想在您的div中添加text-align: center会达到您想要的效果。

Btw，<br>标签没有用，因为它们是它们的正常行为，因此无法垂直堆叠<div>标签（<div>标签默认为display: block。