垂直对齐左对齐的文本与右对齐的图像

我正在设计一个液体布局移动网站。作为标题，我有一个居中的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

垂直对齐左对齐的文本与右对齐的图像

回答

相关问题