Как сверстать такое лого?

Question

[Neocaridina]

Вроде просто, но не могу ничего придумать чтоб реализовать такое без использования таблиц и под адаптив (типо красная - картинка по центру, остальное div).

Comments

[Ярослав Иванов]

Причем тут семантическая верстка?)

[Neocaridina]

ну, я могу это и таблицами зафигачить, но...
убрать тег?

[Ярослав Иванов]

Neocaridina: Вы знаете, что такое семантическая верстка?)))

Answer 1

[Николай]

codepen.io/Nickolyashka/pen/OpXeLN

Answer 2

[MaximKubrak]

2 варианта, с помощью флоатов и флекса
https://jsfiddle.net/w891cmr6/1/

Answer 3

[dorado]

если лого может быть фиксированым, то примерно так бы я сделал.

<div class="logo">
  <span>Hello</span>
  <span>World</span>
</div>

.logo{
// стиль с темным фоном и все такое
}
.logo:after{
// рисуем тут круг
}
.logo span:first-child{
// margin на расстояние диаметра круга или чуть больше
}

через псевдоэлемент after отрисовать круг, а остальное просто

Comments

[Neocaridina]

круг - картинка. она должна быть по центру, а эти слова по боках.

[dorado]

Neocaridina: тогда круг положите в див и этому диву с after и before присвоите контент