在其他div和錨標記的中間對齊div

Question

我編寫了以下HTML / CSS，現在開始調整UV指數

    <!-- Page Content -->
    <div class="container">
        <div class="row">
<div class="well" id="container1">
<button  class="btn btn-sm btn-primary" id="togOutBtn">Hide Outdoors</button>
<fieldset class="outdoor" style="display: none;">
  <legend id="location">Loading.</legend>

  <a href="#" onclick="waterPlant1()" class="btn btn-default btn-circle"><i class="fa"><br>Water<br>the<br>plant</i></a>
    <div id="uvIndex" style="width:300px; margin:0 auto;" class="divTableHead">UV Index</div>
  <div id="Outtemp" class="label label-primary"></div><br>
  <div id="Outhumid" class="label label-default"></div><br>
  <div id="dewPoint" class="label label-primary"></div><br>
  <div id="OutheadIndex" class="label label-default"></div>

這導致

我想要的是div中間對齊中的UV索引div，其左下為藍灰色，右為錨標記。

Answer 1

嘗試使包含信息的大div並使用' display：inline; '到大div和UV div：

<div id="infodiv" style="display:inline;">
   <div id="Outtemp" class="label label-primary"></div><br>
   <div id="Outhumid" class="label label-default"></div><br>
   <div id="dewPoint" class="label label-primary"></div><br>
   <div id="OutheadIndex" class="label label-default"></div>
</div>
<div id="uvIndex" style="display:inline; width:300px; margin:0 auto;" class="divTableHead">UV Index</div>

Answer 2

我發現這是方便的解決方案：

    <!-- Page Content -->
    <div class="container">
        <div class="row">
<div class="well" id="container1">
<button  class="btn btn-sm btn-primary" id="togOutBtn">Hide Outdoors</button>
<fieldset class="outdoor" style="display: none;">
  <legend id="location">Loading.</legend>
  <table style="width: 100%;">
    <tr style="vertical-align:top;">
      <td>
         <div id="Outtemp" class="label label-primary"></div><br>
  <div id="Outhumid" class="label label-default"></div><br>
  <div id="dewPoint" class="label label-primary"></div><br>
  <div id="OutheadIndex" class="label label-default"></div>
      </td>
      <td>
        <div id="uvIndex">Loading UV index.</div>
      </td>
      <td>
          <a href="#" onclick="waterPlant1()" class="btn btn-default btn-circle"><i class="fa"><br>Water<br>the<br>plant</i></a>
      </td>
    </tr>
  </table>

不知道為什么網絡世界會遠離表格。