如何实现按钮居左、文本居中且二者处于同一行？

嘿，我来帮你搞定这个布局问题！你遇到的按钮跑到文本上方的原因，主要是这两个点：

1. 你用的<center>标签是块级元素，它会默认占据整一行的宽度，哪怕外面套了display: inline的div也没用；
2. Bootstrap的pull-left类是通过浮动实现的，浮动元素和块级元素组合时，很容易出现换行的情况。

下面给你两种可靠的解决方案，优先推荐第一种现代布局方式：

方案1：用Flexbox布局（推荐） #

Flexbox是现在最主流的布局方案，代码简洁且兼容性好，能轻松实现你要的效果：

<html>
<body>
  <!-- 父容器用Flex布局，垂直居中对齐，占满整行宽度 -->
  <div style="display: flex; align-items: center; width: 100%;">
    <!-- 按钮正常放置在左侧 -->
    <a href="/back" class="btn btn-default" role="button">Back</a>
    <!-- 标题占据剩余所有空间，文本居中 -->
    <h1 style="flex: 1; text-align: center; margin: 0;">Welcome</h1>
  </div>
</body>
</html>

关键说明： #

• display: flex：把父容器变成Flex容器，里面的子元素会在同一行排列；
• align-items: center：让按钮和文本在垂直方向上居中对齐；
• flex: 1：让<h1>占据父容器剩下的所有空间，这样text-align: center就能让标题在整行的中间位置显示；
• margin: 0：移除<h1>默认的上下外边距，避免出现不必要的垂直间距。

方案2：用浮动+文本居中（兼容旧浏览器） #

如果需要兼容非常老的浏览器（比如IE9及以下），可以用浮动和文本居中的组合：

<html>
<body>
  <div style="position: relative; width: 100%;">
    <!-- 按钮浮动到左侧 -->
    <a href="/back" class="btn btn-default pull-left" role="button">Back</a>
    <!-- 标题用文本居中，同时给左边留出按钮的空间 -->
    <h1 style="text-align: center; margin: 0; padding-left: 80px;">Welcome</h1>
  </div>
</body>
</html>

关键说明： #

• position: relative：给父容器设置相对定位，方便后续调整；
• padding-left: 80px：手动给标题左边留出按钮的宽度，避免文本被按钮挡住；
• 这种方法需要手动计算按钮的宽度，灵活性不如Flexbox，所以优先推荐方案1。

另外提醒一下：<center>标签已经被HTML5废弃了，以后尽量用CSS的text-align: center来实现文本居中哦！

内容的提问来源于stack exchange，提问作者mraaMate