Question

我目前有这样一个页面：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Title</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <div class="container">
      <div class="page-header">
        <h3>HEADING</h3>
        <button class="btn btn-danger pull-right">Button</button>
      </div>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

我希望h3和button在div中垂直对齐，我尝试将样式设置为vertical-align:middle，但它不起作用。我该怎么办？

编辑：我原来的问题似乎不清楚。我的意思是我希望标题文本和按钮出现在同一“行”上，但要在该行上垂直对齐。现在，我可以让它们在同一条线上，但文字和按钮将由顶边而不是中心对齐。

Answer 1

编织： http://kodeweave.sourceforge.net/editor/#0def3ea11664636810328b98a8780ed2

你没有发布你的CSS，所以我不知道你在做什么。 所以这里有一个快速说明：

注意： vertical-align 仅适用于display: table-cell;和display: inline;元素（它也适用于::first-letter和::first-line）。

这是一个简单的解决方案，使用display: table;在父级display: table-cell;上，使用pull-right来实现您想要的垂直居中。

如果您希望按钮居中，则必须删除pull-right类，或者可以在其后添加另一个类，然后覆盖它的css。（简单的解决方案，只需删除display: block;类。

编辑：您希望与h3标签位于同一行的按钮对吗？

在我向您展示如何解决此问题之前，请记住h1-h5标签都是inline元素，这意味着它们将始终作为新行嵌入。（就像段落＆lt; p＆gt; 标签一样）所以你需要告诉h3标签显示inline-block或html, body { height: 100%; } .table { display: table; width: 100%; height: 100%; } .cell { display: table-cell; vertical-align: middle; } h3 { display: inline-block; } .btn { margin-top: 15px; }。

这是我修改过的编织：http://kodeweave.sourceforge.net/editor/#7b9839fb7971df2a27b7af895169ad8a

＆＃13;

<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://getbootstrap.com/dist/js/bootstrap.js"></script>
<link rel="stylesheet" href="http://getbootstrap.com/dist/css/bootstrap.css"/>

<div class="container table">
  <div class="page-header cell">
    <h3>HEADING</h3>
    <button class="btn btn-danger pull-right">Button</button>
  </div>
</div>

＆＃13;

def show
  ... # setup code
  render json: @my_json_structure
end

＆＃13;

Answer 2

如果需要，您可以通过将bootstraps默认边距和填充设置为0px来验证元素是否垂直对齐。

    .container {
      white-space: nowrap;
      background: #eee;
    }

    .contener:before {
      content: '';
      display: inline-block;
      height: 100%;
      vertical-align: middle;
      margin-right: -0.25em;
    }

    .page-header {
      display: inline-block;
      vertical-align: middle;
      width: 300px;
    }

https://jsfiddle.net/curtisweeks/md5qos66/

解释和来源：https://css-tricks.com/centering-in-the-unknown/

Answer 3

https://jsfiddle.net/dsupreme/m92e9dkr/

使用FlexBox

HTML code：

<div class="container">
  <div class="page-header">
    <div id="vertical"><h3>HEADING</h3>
      <button class="btn btn-danger pull-right">Button</button></div></div>
    </div>
  </div>
</div>

CSS代码：

.container {
  width: 100%;
  text-align: center;
}
#vertical {
  width: 100%;
}

h3 {
  margin: 0;
  padding: 0;
}

.page-header {
  height: 200px;
  width: 100%;
  background-color: red;
  display: flex;
  justify-content: center;
  align-items: center;
}

Answer 4

http://codepen.io/ruchiccio/pen/xVmJaG

<div class="container">
      <div class="page-header">
          <div id="vertical"><h3>HEADING</h3>
            <button class="btn btn-danger pull-right">Button</button></div></div>
      </div>

#vertical {
  position: absolute;
  top: 40%;
  width: 100%;
}

h3 {
  margin: 0;
  padding: 0;
}

.page-header {
  height: 200px;
  background-color: red;
  position: relative;
}

如何在div中垂直居中按钮和文本

4 个答案: