выровнять текст по левому краю по правому краю

Question

Я разрабатываю мобильный макет с жидкой версткой. В качестве заголовка у меня есть центрированный div, который имеет «text-align: right;», который содержит мой логотип. Тогда другой div устанавливается на «float: left;» и этот содержит название моего сайта.

Я хочу выровнять текст по логотипу по вертикали, в то время как текст остается выровненным по левому краю, а логотип по-прежнему выровненным по правому краю, как мне это сделать?

Раздетый код для соответствующего бита:

<div id="wrapper">

<div id="title">
    <h3>My title</h3>
</div><!--end title-->

<div id="logo">
    <img src="images/logo.jpg" alt="Logo" class="logo" />
</div><!--end logo-->

CSS:

html, body{
    margin: 0;
    padding: 0;
    height: 100%;
    font-family: Arial, Helvetica, sans-serif;
}
img.logo{
    width: 96px;
    height: 41px;

}

#wrapper{
    min-height: 100%;
}

#title{
    float: left;
    padding: 0.5em 0 0.5em 10%;
}

#logo{
    width: 90%;
    margin: 0 auto;
    text-align: right;
    padding: 0.5em;
}

Большое спасибо заранее!

Answer 1

Вы можете использовать text-align: justify примерно так:

div {
  text-align: justify;
  line-height: 100px;
  height: 100px;
  background: gold;
}

img, span {
  display: inline-block;
  vertical-align: middle;
}

div:after {
  content: '';
  display: inline-block;
  width: 100%;
}

<div>
  <span>test</span>
  <img src=http://placehold.it/100x50>
</div>

Демонстрация на Codepen