Question

我觉得这应该（并且可能是）在某个地方回答，但要么不是这样，我不是正确的搜索方式，或者是一些严密保护的国家机密，因为我找不到有效的答案。具体来说，我找不到适合我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是我遇到问题的唯一部分。任何指向一个好初学者的指针，但不是补救/'傻瓜'，指南也将不胜感激。

Answer 1

我建议您的徽标绝对定位。这将把它从html元素的流程中取出（就像背景图像一样），同时保持它仍然可以点击。

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

这样可以更轻松地集中您的标题。以下是对代码进行一些调整的完整示例：

http://jsfiddle.net/gqvUv/

你的“text-align：center;”保持一切水平居中，只要标题只有一行，调整h1的行高就可以垂直居中。

很容易因相对和绝对定位而感到困惑，但本教程明确指出：http://www.barelyfitz.com/screencast/html-training/css/positioning/

最后，这是我用CSS集中事物的首篇文章：http://designshack.net/articles/css/how-to-center-anything-with-css/

img in div float left，文本垂直和水平居中

1 个答案: