居中 header 与按钮在同一行

Question

我想创建一个居中 header 按钮在右边。
我已经有这样的东西了：

h1{
  text-align : center;
  margin-right : 32px;
}

button{
  position: absolute;
  top: 32px;
  right: 32px;
}

<html>
<body>
<div><h1>test</h1><button style="float: right;">test</button></div>
<div style="text-align: center;">text</div>
</body>
</html>

但在这种情况下 header 未居中于全宽页面。
另外，如果 header 太长，它不应该覆盖按钮..

感谢阅读！

Answer 1

您可以使用 flex-box 或 floats 来解决这个问题。您还必须稍微修改您的标记。

<div class="header">
  <h1>Headline</h1>
  <button>Button</button>
</div>

弹性框：

.header {
  display: flex;
}

.header h1 {
  flex-grow: 1;
}

.header button {
  margin-left: 20px;
}

花车：

.header {
  overflow: hidden;
}

.header button {
  float: right;
  margin-left: 20px;
}

Answer 2

如果 flexbox 是一个选项，您可以将 h1 居中并将 button 置于右侧：

div {
  display: flex;
  justify-content: center;
  position: relative;
}
h1 {
  text-align: center;
}
button {
  position: absolute;
  right: 0;
}

<div>
  <h1>test</h1>
  <button>test</button>
</div>

干杯！

Answer 3

试试这个

        .div-header{
            width: 95%;
            float: left;
            text-align: center;
        }
        .div-btn{
            width: 5%;
            float: left;
        }

    <div class="div-main">
        <div class="div-header">
             <p>ABCDEFGHIJKLMNOPQRSTUVWXYZ ABCDEFGHIJKLMNOPQRSTUVWXYZ ABCDEFGHIJKLMNOPQRSTUVWXYZ ABCDEFGHIJKLMNOPQRSTUVWXYZ ABCDEFGHIJKLMNOPQRSTUVWXYZ ABCDEFGHIJKLMNOPQRSTUVWXYZ ABCDEFGHIJKLMNOPQRSTUVWXYZ ABCDEFGHIJKLMNOPQRSTUVWXYZ ABCDEFGHIJKLMNOPQRSTUVWXYZ ABCDEFGHIJKLMNOPQRSTUVWXYZ ABCDEFGHIJKLMNOPQRSTUVWXYZ</p></div>
        <div class="div-btn"><button>Button</button></div>
    </div>

居中 header 与按钮在同一行

Centered header with button in the same line

html

css

vertical-alignment