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

我正在設計一個液體佈局移動網站。作爲標題，我有一個居中的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; 
}

提前非常感謝！

來源

2012-02-02 WebGremlin

您的代碼看起來不錯，我FF：http://jsfiddle.net/sLd3K/您使用的是什麼瀏覽器？ – Niklas 2012-02-02 08:50:46

Firefox 3.6。它確實有效。但是，我希望文字垂直與徽標的中間對齊。 – WebGremlin 2012-02-02 10:25:54

你解決了這個問題嗎？ – Niklas 2012-02-24 15:58:22

您可以使用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>

Demo on Codepen

來源

2014-08-09 22:47:56 Lorof

如果能解決您的問題，請您接受這個答案嗎？謝謝 – Lorof 2014-11-29 17:27:08

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

回答

相關問題