html - 无法将我的网页标题居中

Question

在过去的 2 个小时里，我一直在为此苦苦挣扎，我无法解决这个问题......

我想将标题文本与实际页面的引用居中，教员符号固定在左侧。

如果这篇文章被重复，我很抱歉，但我已经谷歌了 100 多个帖子，但没有找到我可以突破的解决方案......不用说，我仍然是 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

您可以使用 H1 元素上的内边距在右侧偏移左侧 Logo 边距 (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 标题，因为 float
• 内联显示导航项
• 在 H1 上向右填充

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