html – 如何将面板标题中的文本与拉到右侧的按钮对齐

概述我在bootstrap中创建了一个面板标题,并尝试将其文本居中,同时有一个按钮,该按钮可能与文本位于同一水平轴上,但在右侧拉出但我的输出是： >该按钮未与文本水平对齐 >文本位于标题左侧和按钮左侧之间,而不是在标题的左侧和右侧之间居中 这是我的代码： <div class='container'> <div class='panel panel-default'> <div 我在bootstrap中创建了一个面板标题,并尝试将其文本居中,同时有一个按钮,该按钮可能与文本位于同一水平轴上,但在右侧拉出但我的输出是：

>该按钮未与文本水平对齐
>文本位于标题左侧和按钮左侧之间,而不是在标题的左侧和右侧之间居中

这是我的代码：

<div class='container'>    <div class='panel panel-default'>        <div class='panel-heading'>            <div class='panel-heading text-center'>                <h4>Present Schedule<button class='btn pull-right btn-danger' onclick="location.href='past_sched.PHP'">Go to Past Schedule</button></h4>            </div>        </div>    </div></div>

这是结果的一个方面：https://jsfiddle.net/63c0wn66/3/

解决方法 试试这个代码.把按钮放在h4外面

HTML

<div class='container'>  <div class='panel panel-default'>    <div class='panel-heading text-center panel-relative'>    <button class='btn btn-danger btn-right' onclick="location.href='past_sched.PHP'">Go to Past Schedule</button>      <h4>Present Schedule</h4>    </div>  </div></div>

CSS

.panel-relative{  position: relative;}.btn-right{  position: absolute;  right: 15px;}

https://jsfiddle.net/63c0wn66/7/

总结

以上是内存溢出为你收集整理的html – 如何将面板标题中的文本与拉到右侧的按钮对齐全部内容，希望文章能够帮你解决html – 如何将面板标题中的文本与拉到右侧的按钮对齐所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。