twitter-bootstrap 如何将面板标题中的文本与拉入右侧的按钮一起居中
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/36785731/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to center text in panel-heading alongside a button pulled into the right
提问by jarjarjinx
I created a panel heading in bootstrap and tried to center its text while having a button that's supposedly on the same horizontal axis as the text but pulled in the right but my output was:
我在引导程序中创建了一个面板标题，并尝试将其文本居中，同时有一个按钮，该按钮应该与文本在同一水平轴上，但被拉入右侧，但我的输出是：
- The button wasn't horizontally aligned with the text
- The text is centered between the left of the heading and the left of the button instead of being centered between the left and right side of the heading
- 按钮未与文本水平对齐
- 文本在标题左侧和按钮左侧之间居中，而不是在标题左侧和右侧之间居中
Here's my code:
这是我的代码：
<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>
Here's a jsfiddle of the result: https://jsfiddle.net/63c0wn66/3/
这是结果的 jsfiddle：https://jsfiddle.net/63c0wn66/3/
回答by Anoop John
Try this code. Put button outside h4
试试这个代码。把按钮放在 h4 外面
HTML
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
CSS
.panel-relative{
position: relative;
}
.btn-right{
position: absolute;
right: 15px;
}
回答by Igor Ivancha
1) Put your buttonoutside h4
2) Apply for h4property display: inline-block
1) 把你的button外面h4
2) 申请h4财产display: inline-block
<div class='container'>
<div class='panel panel-default'>
<div class='panel-heading text-center'>
<h4 class="myClass">Present Schedule</h4>
<button class='btn pull-right btn-danger' onclick="location.href='past_sched.php'">Go to Past Schedule</button>
</div>
</div>
</div>
.myClass {
display: inline-block;
}
