在Bootstrap'row'

Question

尝试在同一个Bootstrap行div中垂直居中一个Font Awesome图标，一个2文本行div和另外两个图标时遇到了困难。我设法伪造了所需的结果但是在几小时后尝试了很多CSS属性我很想知道最好的解决方案是什么。

因此，我需要垂直定位的项目，以便那些不管包含元素大小而保​​持这种状态的是'fa fa-building-o fa-4x'图标，右边是2行文本（“X5 Retail”群组“和”公司地址和联系人“）都有不同的字体大小（我尝试使用<h5>和<h3>标签实现），以及右侧的2个图标。

不需要制作一定高度的部分。 line-height属性包含了一个方便我的数字。

该代码是为Firefox 39设计的。

这是我的html的一个Plunkr链接：https://plnkr.co/edit/0BVnHFowRD53KOVoy1KU?p=preview

以下是页面的.html。

     body {
       padding-top: 20px;
     }
     section#top1 {
       line-height: 40px;
     }
     section#top2 {
       line-height: 80px;
     }
     .monitoring {
       background-color: #E8E8E8;
     }
     .monitoringh4 {
       display: inline;
     }
     .h4buttonlike:hover {
       cursor: pointer;
       font-weight: bold;
     }
     section#top3 {
       line-height: 60px;
     }
     section#top4 {
       line-height: 80px;
     }
     .container {
       border: 1px solid #ccc;
       border-radius: 4px;
       margin-bottom: 5px;
     }
     .container .col-md-12 {
       background: #e6e6e6;
       border-radius: 4px;
     }
     .container .logo {
       display: inline;
       margin: auto 0 auto 0;
       width: 80px;
     }
     .container h4 {
       font-size: 1.0em;
       display: inline;
       margin-left: 5px;
       text-align: center;
     }
     section#top1 .container ul {
       display: table;
       margin: auto 0;
       float: right;
     }
     section#top1 .container ul li {
       display: table-cell;
       padding-right: 15px;
     }
     .settings i {
       vertical-align: middle;
     }
     .container i {
       margin-right: 5px;
     }
     .dropdown {
       display: inline;
       margin-left: 5px;
       margin-top: 3px;
     }
     .myclass {
       text-align: right;
     }
     section#top4 .brands {
       position: absolute;
       top: 50%;
       display: inline-block;
       /* margin-left: 20px; */
       transform: translate(5%, -55%);
     }
     .exp {
       height: 56px;
       width: 44px;
       display: inline-block;
       text-align: center;
       vertical-align: middle;
     }
     .my-icons {
       position: absolute;
       top: 50%;
       right: 15px;
       transform: translate(-60%, -50%);
       display: inline-block;
     }

  <!-- Bootstrap core CSS -->
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet">

  <!-- Custom styles for this template -->
  <link href="css/style.css" rel="stylesheet">

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>



  <section id='top1'>
    <div class='container'>
      <div class='row'>
        <div class='col-md-12'>
          <img class='logo' src='http://www.toennies.com/uploads/pics/fTRACE-Logo_02.png'>
          <h4>Company name</h4>
          <ul>
            <li>Total items: 100</li>
            <li style='color: #009900;'>Oline: 82</li>
            <li style='color: #787878;'>Offline: 16</li>
            <li style='color: #FF0000;'>Damaged: 6</li>
          </ul>
        </div>
        <div class='clearfix'></div>
      </div>
    </div>
  </section>

  <section id='top2'>
    <div class='container'>
      <div class='row'>
        <div class='col-md-9 monitoring'>
          <div class='monitoringh4'>
            <h4>Monitoring</h4>
          </div>
          <div class="dropdown">
            <h4 class="dropdown-toggle h4buttonlike" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    								Reports
    								<span class="caret"></span>
    							</h4>
            <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
              <li><a href="#">Report 1</a>
              </li>
              <li><a href="#">Report 2</a>
              </li>
              <li><a href="#">Report 3</a>
              </li>
            </ul>
          </div>
          <div class="dropdown">
            <h4 class="dropdown-toggle h4buttonlike" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    								Tune
    								<span class="caret"></span>
    							</h4>
            <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
              <li><a href="#">Tune 1</a>
              </li>
              <li><a href="#">Tune 2</a>
              </li>
              <li><a href="#">Tune 3</a>
              </li>
            </ul>
          </div>
        </div>
        <div class='col-md-3 monitoring'>
          <div class="dropdown">
            <h4 class="dropdown-toggle h4buttonlike" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    								John Doe (Admin)
    								<span class="caret"></span>
    							</h4>
            <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
              <li><a href="#">Jane Doe</a>
              </li>
              <li><a href="#">Jack Doe</a>
              </li>
              <li><a href="#">Jimmy Doe</a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </section>

  <section id='top3'>
    <div class='container'>
      <div class='row'>
        <div class='col-md-12 settings'>
          <h4><i class="fa fa-desktop fa-2x"></i>Tuneup > Company profile > X5 Retail Group</h4>
        </div>
      </div>
    </div>
  </section>

  <section id='top4'>
    <div class='container'>
      <div class='row'>
        <div class='col-md-12'>
          <div class='exp'><i class="fa fa-building-o fa-4x"></i>
          </div>
          <div class='brands'>
            <h3>X5 Retail Group</h3>
            <h5>Company address and contacts</h5>
          </div>
          <div class='my-icons'>
            <h5><i class="fa fa-pencil-square-o"> Edit</h5>
            </i>
            <h5><i class="fa fa-print"></i>Print</h5>
          </div>
        </div>
      </div>
    </div>
  </section>

谢谢。