Question

过去2个小时我一直在努力解决这个问题，我无法解决这个问题....

我希望将标题的文本居中，并引用实际页面，教师符号保持固定在左侧。

我很抱歉，如果这篇文章重复，但我已经超过100个帖子谷歌，并没有找到解决方案，我可以突破...不用说，我仍然非常noob到HTML和CSS

HTML：

<header>
  <a href ="index.html" id ="logo">
    <a href="http://ist.utl.pt"><img src="IMG/IST.png" alt="IST Logo" class="IST-icon"></a>
  </a>
  <h1> Titulo do Blog </h1>

  <nav>
    <ul>
      <li>
        <a href="about.php"  <?php if ( isset($section) && $section == "index")   {} ?> >About</a>
      </li>
      <li>
        <a href="index.php"  <?php if ( isset($section) && $section == "about")   {} ?> >QQL Coisa</a>
      </li>
      <li>
        <a href="Contacts.php" <?php if ( isset($section) && $section == "Contactos") {} ?> >Contacts</a>
      </li>
    </ul>
  </nav>
</header>

CSS：

header{  margin: 0 0 20px 0; padding: 5px 0 0 0; width: 100%; }

#logo {text-align: center;  margin: 0; }
.IST-icon {float: left; width: 200px;  margin: 5px 0; }

h1{ float: left; font-family:'Open Sans', sans-serif;  font-size: 1.75em; font-weight: normal; line-height: 1em; }

Answer 1

了解＆＃34;显示＆＃34;的类型什么＆＃34;漂浮＆＃34;与元素有关。

从float元素

h1

向其添加display: inline;
在父text-align: center;元素上添加header

进一步阅读：

所有关于花车：http://css-tricks.com/all-about-floats/

差异块和内联：http://www.impressivewebs.com/difference-block-inline-css/

Answer 2

变化：

<a href ="index.html" id ="logo">
            <a href="http://ist.utl.pt"><img src="IMG/IST.png" alt="IST Logo" class="IST-icon"></a>             </a>
            <h1> Titulo do Blog </h1>

要：

<h1>
    <a href="http://ist.utl.pt"><img src="IMG/IST.png" alt="IST Logo"></a>
    <a href="index.html">Titulo do Blog</a>
</h1>

您无法嵌套两个a元素。

也没有必要将img浮动到左侧，因为默认情况下图像是内联的并且相应地表现。只需将header h1设置为text-align: center，就可以了。

Answer 3

您可以使用H1元素上的填充来偏移右侧的左侧徽标边距（200px）。

http://jsfiddle.net/rudiedirkx/0zhw40xx/

header {  
    margin: 0 0 20px 0;
    padding: 5px 0 0 0;
    width: 100%;
    background: #eee;
}
header:after {
    content: "";
    display: table;
    clear: both;
}
#logo {
    text-align: center;
    margin: 0;
}
.IST-icon {
    float: left;
    width: 200px;
    height: 100px;
    margin: 5px 0;
}
h1 { 
    font-family:'Open Sans', sans-serif;
    font-size: 1.75em;
    font-weight: normal;
    line-height: 1em;
    background: #ddd;
    text-align: center;
    padding-right: 200px;
}
nav {
    text-align: center;
    clear: both;
}
nav * {
    display: inline;
    margin: 0;
    padding: 0;
}

我补充说：

背景颜色
标题上的clearfix，因为一个浮动
显示内联导航项目
在H1上填充

现在我开始怀疑这是你的意思......我认为问题在于让H1正确居中。真？

无法居中我的网页标题

3 个答案: