Css img in div向左浮动，文本垂直和水平居中

我觉得这应该（也可能是）在某个地方得到回答，但要么不是这样，我没有寻找正确的方法，要么这是一个严密保守的国家秘密，因为我找不到一个有效的答案。具体地说，我找不到与div左侧的图像相适应的答案

我试图使文本相对于整个屏幕水平居中，在“header”div中垂直居中。我不想将我的徽标用作背景，因为我将其用作主锚。我曾尝试使用“显示：表格单元格”和“垂直对齐：中间”来避免灾难性的结果。请提供任何建议/帮助/链接，不胜感激

CSS:

HTML:

网站名称

---

另外，我对使用CSS是完全陌生的（对于xhtml/html5来说非常无用）。我正在进行我当前的项目，以熟悉CSS/PHP/HTML/JScript，到目前为止，CSS/HTML是我唯一遇到问题的部分。如果您有任何关于初学者的建议，但不是针对傻瓜的补救指南，也将不胜感激。

我建议您将您的徽标绝对定位。这将使它脱离html元素流（就像背景图像一样），同时保持其可点击性

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

这将使你的标题更容易居中。下面是对代码进行了一些调整的完整示例：

您的“文本对齐：居中；”使所有内容水平居中，只要标题只有一行，调整h1的行高将使其垂直居中

相对定位和绝对定位很容易混淆，但本教程明确指出：

---

最后，这是我的一篇关于用CSS来集中事物的文章：

谢谢你的回答，布莱恩。我把它调高了一点，根据div的百分比按高度设置图像大小。这样做之后，再加上一个绝对位置，一切都按我需要的方式工作。我对浏览器/分辨率之间的可移植性有一些担心，但我会在以后开发网站时解决这些问题。

<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>

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