將左對齊文本與右對齊圖像垂直對齊

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上的演示