Как я могу центрировать этот текст вертикально в промежутке?

Question

Я хочу центрировать некоторый текст вертикально в промежутке, который содержит изображение SVG. Ниже приведен фрагмент моего кода, и вы можете видеть, что текст выровнен в верхней части SVG, тогда как я хочу, чтобы он был выровнен по центру. Как я могу это сделать? Я пробовал использовать vertical-align: middle;, но это не имело значения.

* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
html, 
 
body { 
 
    overflow: hidden; 
 
    font-family: 'Open Sans', sans-serif; 
 
} 
 
.bottom-wrapper { 
 
    position: absolute; 
 
    bottom: 0; 
 
    width: 100%; 
 
    margin-bottom: 0.5%; 
 
    margin-left: 0.5%; 
 
    margin-right: 0.5%; 
 
} 
 
.widgets { 
 
    float: left; 
 
    width: 87%; 
 
} 
 
#settings { 
 
    width: 13%; 
 
    margin-top: 5%; 
 
} 
 
#settings > span { 
 
    /* Container */ 
 
    float: left; 
 
    width: 100%; 
 
    margin-top: 3%; 
 
} 
 
#settings > span > div { 
 
    /* SVG */ 
 
    float: left; 
 
    height: 20%; 
 
    width: 20%; 
 
} 
 
#settings > span > p { 
 
    /* Text */ 
 
    float: left; 
 
    height: 20%; 
 
    width: 20%; 
 
    margin-left: 5%; 
 
    font-size: 1.2vw; 
 
}

<div class="bottom-wrapper"> 
 
    <div class="widgets">Place Holder</div> 
 
    <div class="widgets" id="settings"> 
 
    <span id="setting1"> 
 
      <div id="setting1-light"> 
 
       <!--?xml version="1.0" encoding="UTF-8"?--> 
 
       <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 30 30" xml:space="preserve" id="settingsLight"> 
 
        <circle id="settingsLight-oval" stroke="rgb(32, 33, 32)" stroke-width="5" fill="rgb(47, 222, 107)" cx="15" cy="15" r="12.5"></circle> 
 
       </svg> 
 
      </div> 
 
      <p id="setting1-text">Setting1</p> 
 
     </span> 
 
    <span id="setting2"> 
 
      <div id="setting2-light"> 
 
       <!--?xml version="1.0" encoding="UTF-8"?--> 
 
       <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 30 30" xml:space="preserve" id="settingsLight"> 
 
        <circle id="settingsLight-oval" stroke="rgb(32, 33, 32)" stroke-width="5" fill="rgb(222,58,62)" cx="15" cy="15" r="12.5"></circle> 
 
       </svg> 
 
      </div> 
 
      <p id="setting2-text">Setting2</p> 
 
     </span> 
 
    </div> 
 
</div>

Answer 1

Я думаю, что лучший способ - использовать vertical-align, как вы пробовали. Для этого вам нужно использовать display: inline-block. Вы можете прочитать больше о том, что here

Пример:

#settings > span > div { 
    /* SVG */ 
    display: inline-block; 
    height: 20%; 
    width: 20%; 
    vertical-align: middle; 
} 
#settings > span > p { 
    /* Text */ 
    display: inline-block; 
    height: 20%; 
    width: 20%; 
    margin-left: 5%; 
    font-size: 1.2vw; 
} 

Codepen: http://codepen.io/anon/pen/qbBwoL

Почему лучше использовать встроенный блок? Advantages of using display:inline-block vs float:left in CSS

Answer 2

Использование высота строки вместо высоты:

#settings > span > p { 
    float: left; 
    height: 20%; 
    width: 20%; 
    margin-left: 5%; 
    font-size: 1.2vw; 
    line-height: 18px; 
} 

Answer 3

Вот один из способов:

#settings > span { 
    float: left; 
    width: 100%; 
    margin-top: 3%; 
    position: relative; /* NEW */ 
} 

#settings > span > p { 
    /* float: left; */ 
    height: 20%; 
    width: 20%; 
    margin-left: 5%; 
    font-size: 1.2vw; 
    position: absolute; /* NEW */ 
    top: 23%; /* NEW */ 
    left: 20%; /* NEW */ 
} 

DEMO