在其他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>

不确定为什么网络世界正在移动表格。