html - 将页面标题定位在顶部栏中的菜单按钮旁边

Question

我正在创建一个顶部栏，我只想要左侧有一个菜单图标，旁边是页面标题，我将在右侧添加一个搜索栏，但我稍后会这样做。

我按照 w3schools 指南创建了一个折叠的侧边栏并且它有效但我想实现另外两件事:

• 菜单图标比它所在的栏本身小。我希望它增加大小以填满栏。
• 我希望页面标题显示在它旁边，但无论我将包含它的 放置在何处，我都无法实现这一点。

我将删除侧面板代码，因为它正在运行，它与我定位菜单图标和页面标题的问题无关:

#wrapper-header {
  color: white;
  font-size: 28px;
  float: left;
  width: 100%;
  height: 65px;
  background-color: #2E2D30;
}

#main-header {
  position: relative;
  width: 1200px;
  left: 50%;
  margin-left: -400px;
  height: auto;
}

.page-title {
  position: relative;
  margin-top: -35px;
  left: 150px;
}

<!-- Add icon library -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<div id="wrapper-header">
  <div id="main-header">
    <button class="openbtn" onclick="openNav()">&#9776;</button>
    <div class="page-title">Recientes</div>
  </div>
</div>

Answer 1

所以，基本上我不得不稍微改变一下你的 CSS

    #wrapper-header {
        color: white;
        font-size: 28px;
        float: left;
        width: 100%;
        height: 65px;
        background-color: #2E2D30;
    }

    #main-header {
        position: relative;
    }

    .page-title {
        position: absolute;
        height: 20px;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
     }

     .openbtn {
        height: 30px;
        width: 30px;
        margin-top: 18px;
        margin-left: 20px;
        transform: scale(2);
      }

<!-- Add icon library -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<div id="wrapper-header">
  <div id="main-header">
<button class="openbtn" onclick="openNav()">&#9776;</button>
<div class="page-title">Recientes</div>
  </div>
</div>

这是一个fiddle或者只运行答案中的代码片段以查看结果

注意:我使用 transform: scale(2); 使按钮适合导航栏，因为如果您只更改宽度和高度，图标将仍然太小

让我知道它是否回答了您的问题以及您是否需要更多信息