Вертикального выравнивания недопонимания

У меня есть проблема со следующим кодом:Вертикального выравнивания недопонимания

<!DOCTYPE html> 
<html> 
<head> 
    <style> 
     .circle { 
      width: 16px; 
      height: 16px; 
      border-radius: 50%; 
      border: 1px solid black; 
     } 

     .circle.red { 
      background-color: red; 
     } 

     .circle.green { 
      background-color: green; 
     } 

     .circle.blue { 
      background-color: blue; 
     } 

     .some_class { 
      height: 24px; 
      width: 320px; 
      border: 1px solid black; 
      background: yellow; 
     } 

     .some_class div { 
      display: inline-block; 
      background-color: aqua; 
     } 

     .some_class .circle { 
      margin: 3px 3px 3px 3px;; 
     } 

     .some_class .title { 
      background-color: blueviolet; 
     } 
    </style> 
</head> 
<body> 
    <div id="some_id" class="some_class"> 
     <div class="circle green"> 

     </div> 
     <div class="title"> 
      Some title 
     </div> 
     <div class="text"> 
      Some text 
     </div> 
    </div> 
</body> 
</html>

Проблема здесь заключается в том, что «Некоторое название» и «Некоторые тексты» блоки показаны ниже центра зеленого круга. Более того, эти блоки даже не лежат внутри <div id="some_id">. Как я могу это исправить? Было бы здорово, если бы я мог вертикально выровнять эти divs до середины основного div. Но, по крайней мере, я хочу, чтобы они находились внутри этого div. я могу сделать что-то вроде этого:

.some_class .title { 
      background-color: blueviolet; 
      position: relative; 
      top: -7px; 
     }

но dosn't, кажется, правы, потому что я до сих пор не могу понять, почему они находятся вне основных дел.

источник

2014-10-29 am-real

Не мог бы вы создать в JSFiddle для нас, ну, скрипки с? – Rvervuurt

С вашего 3-го ребенка-div's установлено значение display: inline-block, их значение по умолчанию vertical-align имеет значение baseline, поэтому они не выровнены по вертикали. Вам нужно будет добавить vertical-align: middle всех ваших 3 ребенка-Див как это:

.text, .title, .circle { 
    vertical-align: middle; 
}

jsFiddle Demo.

.circle { 
 
    width: 16px; 
 
    height: 16px; 
 
    border-radius: 50%; 
 
    border: 1px solid black; 
 
} 
 
.circle.red { 
 
    background-color: red; 
 
} 
 
.circle.green { 
 
    background-color: green; 
 
} 
 
.circle.blue { 
 
    background-color: blue; 
 
} 
 
.some_class { 
 
    height: 24px; 
 
    width: 320px; 
 
    border: 1px solid black; 
 
    background: yellow; 
 
} 
 
.some_class div { 
 
    display: inline-block; 
 
    background-color: aqua; 
 
} 
 
.some_class .circle { 
 
    margin: 3px 3px 3px 3px; 
 
    ; 
 
} 
 
.some_class .title { 
 
    background-color: blueviolet; 
 
} 
 
.text, 
 
.title, 
 
.circle { 
 
    vertical-align: middle; 
 
}

<div id="some_id" class="some_class"> 
 
    <div class="circle green"></div> 
 
    <div class="title">Some title</div> 
 
    <div class="text">Some text</div> 
 
</div>

источник

2014-10-29 12:21:12

По умолчанию vertical-align является baseline основание текста принятого в качестве ссылки. Просто изменить это свойство:

.some_class div { 
    display: inline-block; 
    vertical-align:middle; /*ADD THIS LINE*/ 
    background-color: aqua; 
}

Проверить это DemoFiddle

источник

2014-10-29 12:21:54 DaniP

Вертикального выравнивания недопонимания

ответ

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