img in div浮动左边文字垂直和水平居中

我觉得这应该（可能是）在某个地方回答，但要么不是这种情况，我没有找到正确的方式，或者它是一些严密守卫的国家秘密，因为我找不到有效的答案。具体来说，我无法找到适合我的div左侧图片的答案。img in div浮动左边文字垂直和水平居中

我想要实现的效果是将文本水平放置在整个屏幕上并垂直位于“标题”div内。我不想用我的标志作为背景，因为我将它用作主页。我试图使用'display：table-cell'和'vertical-align：middle'来导致灾难性的结果。请，任何意见/帮助/链接表示赞赏。

CSS：

#header{ 
    width: 85%; 
    min-width: 500px; 
    text-align: center; 
    margin-left: auto; 
    margin-right: auto; 
    overflow: hidden; 
    background-color: #fff; 
    border-bottom-width: 10px; 
    border-bottom-style: double; 
    border-bottom-color: #000; 
} 

#title{ 
    width: 85%; 
    margin-left: auto; 
    margin-right: auto; 
    position: absolute; 
    display: table-cell; 
    vertical-align: middle; 
} 

#logo{ 
    float: left; 
    padding-right: 1em; 
    width: 150px; 
}

HTML：

<div id="header"> 

     <a href="."><img id="logo" src="../images/logo.jpg" alt="Widget News" /></a> 
    <span id="title"><h1>Site Title</h1></span> 
     </div>

此外，我完全新的使用CSS（与XHTML/HTML5很没用）。我正在研究当前的项目，以便熟悉CSS/PHP/HTML/JScript，到目前为止，CSS/HTML是我遇到的唯一问题。任何指向一个好的初学者，但不补救/'假人'，指导也将不胜感激。

来源

2013-03-05 jvance

我建议让您的徽标绝对定位。这将把它从html元素的流（如背景图像）中移出，同时保持它仍然是可点击的。

#logo { 
position: absolute; 
top: 5px; 
left: 10px; 
width: 150px; 
}

这样可以更容易地居中标题。下面是完整的例子再对代码做一些调整：

http://jsfiddle.net/gqvUv/

你“文本对齐：中心;”将所有内容保持水平居中，调整h1的行高将使其垂直居中，只要标题只有一行即可。

可以很容易地得到由相对和绝对定位的困惑，但本教程清楚：http://www.barelyfitz.com/screencast/html-training/css/positioning/

最后，这是我去到文章中，关于CSS为中心的东西：http://designshack.net/articles/css/how-to-center-anything-with-css/

来源

2013-03-05 05:44:03 bryanbraun

谢谢您的回答，布赖恩。我通过根据div的百分比设置图像大小来调整它的大小。这样做后，结合绝对位置，一切都按我需要的那样运作。我对浏览器/解决方案之间的可移植性有一些担忧，但稍后我会在网站更加开发时解决这些问题。 – jvance 2013-03-05 14:30:01

img in div浮动左边文字垂直和水平居中

回答

相关问题