2017-02-18 3 views
0

я написал следующий HTML/CSS и теперь собирается tumbletweend корректировки индекса УФВыравнивание DIV в середине других дивы и тега привязки

<!-- 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> 

, который в результате

enter image description here

что я хочу - это индекс индекса UV в среднем выравнивании div, который показан внизу слева сине-серым и привязывающим тегом справа.

+0

Снимите «margin: 0 auto» из этого div. Это то, что заставляет его сосредоточиться. – JakeParis

+0

Вы хотите выровнять блок УФ-индекса влево или другие элементы в центр? Вы можете создать простую скрипку для лучшего понимания и даже быстрых ответов. – Siva

ответ

0

Попробуйте сделать большой div, содержащий информацию и использование 'display: inline; 'на большой сНу и УФ 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> 
+0

Как насчет кнопки «вода заводом»? –

+0

@Ciastopiekarz То же самое, применить дисплей: inline; также ему. –

0

Я нахожу это, как удобное решение:

<!-- 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> 

Не уверен, почему веб-мир отдаляется формы таблиц.

Смежные вопросы