如何让含text-align:center的容器div中span与button元素同行显示

嘿，这问题我碰到过好多次啦！核心原因就是你的<form>标签默认是块级元素，它会独占一整行，所以才把按钮挤到了span的下面。给你两个简单好用的解决办法，随便选一个都能搞定：

方法1：把Form改成行内块元素 #

直接给form加上display: inline-block样式，让它和span一样能在同一行显示，还能保留块级元素的特性。另外可以加个margin-left让文本和按钮之间有点间距，看着更舒服：

<div class="request" style="text-align: center">
  <span>{{ request.username }} wants to be your friend!</span>
  <form action="/accept_friend" method="POST" style="display: inline-block; margin-left: 10px;">
    <input type="hidden" value="{{ request.user_a }}" name="sender_id">
    <button type="submit">Accept</button>
  </form>
</div>

方法2：用Flex布局（更推荐） #

现代布局首选flex，不仅能让元素同行，还能轻松控制垂直对齐和间距，代码也更简洁：

把父div的text-align: center换成flex相关的样式，这样里面的span和form会自动排在同一行，而且居中显示：

<div class="request" style="display: flex; justify-content: center; align-items: center; gap: 10px;">
  <span>{{ request.username }} wants to be your friend!</span>
  <form action="/accept_friend" method="POST">
    <input type="hidden" value="{{ request.user_a }}" name="sender_id">
    <button type="submit">Accept</button>
  </form>
</div>

这里的gap:10px就是控制文本和按钮之间的间距，比用margin更直观。如果需要兼容非常老旧的浏览器（比如IE9及以下），就用方法1；否则优先选方法2，后续调整布局也更方便。

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