, вероятно, функция блокировки обратного вызова для метода gsub. Я не уверен, что вы имели в виду, но может быть что-то вроде
s.gsub(/^(#+)\w+/) {|m| m.gsub("#", "=") }
На самом деле в этом случае это довольно просто: подайте заявку вертикаль выравниваются к изображению. Так как это - все в одной строке, это - действительно изображение, которое Вы хотите выровненный, не текст.
<!-- moved "vertical-align:middle" style from span to img -->
<div>
<img style="vertical-align:middle" src="https://placehold.it/60x60">
<span style="">Works.</span>
</div>
Протестированный в FF3.
Теперь можно использовать flexbox для этого типа расположения.
.box {
display: flex;
align-items:center;
}
<div class="box">
<img src="https://placehold.it/60x60">
<span style="">Works.</span>
</div>
Вы, вероятно, хотите это:
<div>
<img style="width:30px; height:30px;">
<span style="vertical-align:50%; line-height:30px;">Didn't work.</span>
</div>
, Поскольку другие предложили, попробуйте vertical-align
на изображении:
<div>
<img style="width:30px; height:30px; vertical-align:middle;">
<span>Didn't work.</span>
</div>
CSS не является раздражающим. Вы просто не читаете документация .; P
Поскольку необходимо установить line-height
на высоту отделения для этого для работы
Вот некоторые простые методы для вертикали - выровняйтесь:
Этот легок: установите высоту строки текстового элемента для равенства высоте строки контейнера
<div>
<img style="width:30px; height:30px;">
<span style="line-height:30px;">Doesn't work.</span>
</div>
Абсолютно, располагают внутреннее отделение относительно его контейнера
<div style="position:relative;width:30px;height:60px;">
<div style="position:absolute;bottom:0">This is positioned on the bottom</div>
</div>
<div style="display:table;width:30px;height:60px;">
<div style="display:table-cell;height:30px;">This is positioned in the middle</div>
</div>
, Чтобы заставить это работать правильно через плату, необходимо будет взломать CSS немного. К счастью существует ошибка IE, которая работает в нашу пользу. Установка top:50%
на контейнере и top:-50%
на внутреннем отделении, можно достигнуть того же результата. Мы можем объединиться, два использования другой функции IE не поддерживают: усовершенствованные селекторы CSS.
<style type="text/css">
#container {
width: 30px;
height: 60px;
position: relative;
}
#wrapper > #container {
display: table;
position: static;
}
#container div {
position: absolute;
top: 50%;
}
#container div div {
position: relative;
top: -50%;
}
#container > div {
display: table-cell;
vertical-align: middle;
position: static;
}
</style>
<div id="wrapper">
<div id="container">
<div><div><p>Works in everything!</p></div></div>
</div>
</div>
, Это решение требует немного более современного браузера, чем другие решения, поскольку это использует transform: translateY
свойство. ( http://caniuse.com/#feat=transforms2d )
Применение следующих 3 строк CSS к элементу будет вертикально центрировать его в своем родителе независимо от высоты родительского элемента:
position: relative;
top: 50%;
transform: translateY(-50%);
Не уверенный относительно того, почему это не представляет его на браузере Вашей навигации, но я обычно использую отрывок как это при попытке отобразить заголовок с изображением и текстом в центре, надеяться, что это помогает!
https://output.jsbin.com/jeqorahupo
<hgroup style="display:block; text-align:center; vertical-align:middle; margin:inherit auto; padding:inherit auto; max-height:inherit">
<header style="background:url('http://lorempixel.com/30/30/') center center no-repeat; background-size:auto; display:inner-block; vertical-align:middle; position:relative; position:absolute; top:inherit; left:inherit; display: -webkit-box; display: -webkit-flex;display: -moz-box;display: -ms-flexbox;display: flex;-webkit-flex-align: center;-ms-flex-align: center;-webkit-align-items: center;align-items: center;">
<image src="http://lorempixel.com/60/60/" title="Img title" style="opacity:0.35"></img>
http://lipsum.org</header>
</hgroup>