1

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

4

1 回答 1

0

我建议让你的标志绝对定位。这将使它脱离 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-05T05:44:03.820 回答