Вертикально выровнять текст рядом с изображением?

, вероятно, функция блокировки обратного вызова для метода gsub. Я не уверен, что вы имели в виду, но может быть что-то вроде

s.gsub(/^(#+)\w+/) {|m| m.gsub("#", "=") }
1848
задан ProgramFOX 31 October 2014 в 13:48
поделиться

5 ответов

На самом деле в этом случае это довольно просто: подайте заявку вертикаль выравниваются к изображению. Так как это - все в одной строке, это - действительно изображение, которое Вы хотите выровненный, не текст.

<!-- 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>
2138
ответ дан patelarpan 7 August 2019 в 19:23
поделиться

Вы, вероятно, хотите это:

<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

-4
ответ дан strager 7 August 2019 в 19:23
поделиться

Поскольку необходимо установить line-height на высоту отделения для этого для работы

19
ответ дан Josh Crozier 7 August 2019 в 19:23
поделиться

Вот некоторые простые методы для вертикали - выровняйтесь:

Короткая вертикаль-align:middle

Этот легок: установите высоту строки текстового элемента для равенства высоте строки контейнера

<div>
  <img style="width:30px; height:30px;">
  <span style="line-height:30px;">Doesn't work.</span>
</div>

, Несколько-строк, вертикальные-align:bottom

Абсолютно, располагают внутреннее отделение относительно его контейнера

<div style="position:relative;width:30px;height:60px;">
  <div style="position:absolute;bottom:0">This is positioned on the bottom</div>
</div>

Несколько-строк, вертикальные-align:middle

<div style="display:table;width:30px;height:60px;">
  <div style="display:table-cell;height:30px;">This is positioned in the middle</div>
</div>

, Если необходимо поддерживать древние версии IE < = 7

, Чтобы заставить это работать правильно через плату, необходимо будет взломать 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>

Переменная контейнерная высота, вертикальная-align:middle

, Это решение требует немного более современного браузера, чем другие решения, поскольку это использует transform: translateY свойство. ( http://caniuse.com/#feat=transforms2d )

Применение следующих 3 строк CSS к элементу будет вертикально центрировать его в своем родителе независимо от высоты родительского элемента:

position: relative;
top: 50%;
transform: translateY(-50%);
335
ответ дан Scoots 7 August 2019 в 19:23
поделиться

Не уверенный относительно того, почему это не представляет его на браузере Вашей навигации, но я обычно использую отрывок как это при попытке отобразить заголовок с изображением и текстом в центре, надеяться, что это помогает!

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>
0
ответ дан 22 November 2019 в 20:02
поделиться
Другие вопросы по тегам:

Похожие вопросы: