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

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>

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

问题描述投票：2回答：3

3个回答

最新问题

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

问题描述 投票：2回答：3

3个回答

最新问题

问题描述投票：2回答：3