Вёрстка текста с картинкой по центру?

Question

[NikSIk31]

Нужно сделать вот так:

текст ... картинка .. текст
текст ... .........................

а сейчас вот так:

текст ... картинка
.. текст текст ... ............
.............

то есть, выделенный текст переносится на другую строку после картинки (хотя место там еще остается под него [не под весь, однако есть]) А нужно чтобы хоть какая-то часть оставалась (если есть место)..
CSS обёртки:

margin-bottom: 25px;
    margin-top: 0;
    display: inline-flex;
    flex-wrap: wrap;
    text-align: justify;
    align-items: center;

в обёртке находятся теги: p и img
+ по задумке надо чтобы сами картинки центрировались по центру относительно строки

Comments

[WapSter]

Обтекание можно сделать флоутами, но по центру по моему никак.

Answer 1

[hzzzzl]

ну если использовать span вместо p, то он так себя и поведет



про центр картинки непонятно, то есть ее положение вообще не привязано к тексту, а надо чтобы она разделяла текст на 2 половинки по центру окна?

Comments

[NikSIk31]

о, кажется если картинке в этом примере задать
vertical-align: middle;
то оно становится как нужно)

[NikSIk31]

Я тут шаманил, и вдруг понял, что эта картинка не совсем ровно выравнивается..
Дело в том, что у меня формулы-картинки (сделаны через mathjax). Поэтому мне надо масштабировать эти картинки относительно размера текста (ну это задачу я решил через высчитывание нужного значения ширины в ex при максимальном моём шрифте, а дальше оно масштабируется как мне надо, при изменении шрифта обёртки.)
Однако теперь есть проблема, что я не понимаю как сделать ровно картинку.. Например, на википедии для этого используют vertical-align: (и какой-то коэффициент), но не могу понять как высчитывается он.. (потому что я просмотрел несколько картинок и попытался для них посчитать путём деления значения vertical-align на высоту картинки, и получаю все время разные значения.

[NikSIk31]

NikSIk31, если что, я вот тут - вики