Question

我想用右边的按钮创建一个CENTERED标题我已经有这样的事情了：

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>

但在这种情况下，标题不会以全宽页面为中心。
另外，如果标题太长，则不应覆盖按钮。

感谢您阅读！

Answer 1

如果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 2

您可以使用flex-box或floats解决此问题。您还需要稍微修改您的标记。

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

Flexbox的：

.header {
  display: flex;
}

.header h1 {
  flex-grow: 1;
}

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

浮标：

.header {
  overflow: hidden;
}

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

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>

中心标题与同一行中的按钮

3 个答案: