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

时间:2016-04-22 05:41:19

标签: html css twitter-bootstrap

我在bootstrap中创建了一个面板标题,并尝试将其文本居中,同时有一个按钮,该按钮可能与文本在同一水平轴上但在右侧拉出但是我的输出是:

  1. 该按钮未与文字
  2. 水平对齐
  3. 文字位于标题左侧和按钮左侧的中心位置,而不是在标题的左侧和右侧之间居中
  4. 这是我的代码:

    showSaveDialog
    if (accepted) {
        saveFile = getSelectedFile
        ImageIO.write(img, "jpg", saveFile);
    }
    

    这是结果的jsfiddle:https://jsfiddle.net/63c0wn66/3/

2 个答案:

答案 0 :(得分:8)

试试这段代码。把按钮放在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/

答案 1 :(得分:1)

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;
}

JSFiddle