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

Question

I currently have a page like this: 我目前有一个这样的页面：

<!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>

I want the h3 and the button to be vertically aligned in the div , and I've tried setting style to vertical-align:middle but it doesn't work. 我希望h3和button在div垂直对齐，我尝试将样式设置为vertical-align:middle但它不起作用。 What should I do? 我该怎么办？

EDIT: It seems my original question was unclear. 编辑：似乎我原来的问题不清楚。 I meant that I want the header text and button to appear on the same "line", but to be aligned vertically on that line. 我的意思是我希望标题文本和按钮出现在同一“行”上，但要在该行上垂直对齐。 Right now, I can get them to be on the same line but the text and the button will be aligned by the top edge rather than the center. 现在，我可以让它们在同一条线上但文本和按钮将由顶边而不是中心对齐。

Answer 1

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

You didn't post your css so I don't know what you're working with. 你没有发布你的CSS，所以我不知道你在做什么。 So here's a quick note: 所以这里有一个快速说明：

NOTE: vertical-align only works for display: table-cell; 注意： vertical-align仅适用于display: table-cell; and display: inline; 和display: inline; elements (It also applies to ::first-letter and ::first-line ). elements（它也适用于:: first-letter和:: first-line ）。

Here's a simple solution using display: table; 这是一个使用display: table;的简单解决方案display: table; on the parent and display: table-cell; 在父和display: table-cell; for what you want vertically centered. 为了你想要的垂直居中。

If you want your button centered you have to remove the pull-right class, or you can add another class after it and then override it's css. 如果你想让你的按钮居中，你必须删除pull-right类，或者你可以在它之后添加另一个类，然后覆盖它的css。 (Simple solution, just remove the pull-right class. （简单的解决方案，只需删除pull-right类。

Edit: So you want the button in the same line as your h3 tag right? 编辑：那么你想要与你的h3标签在同一行的按钮对吗？

Well before I show you how to solve this remember that h1-h5 tags are all display: block; 在我告诉你如何解决这个问题之前，请记住h1-h5标签都display: block; elements meaning they will always embed as a new line. 元素意味着它们将始终作为新线嵌入。 (Like a paragraph <p> tag) So you need to tell the h3 tag to display either inline or inline-block . （就像段落<p>标签一样）所以你需要告诉h3标签显示inline或inline-block 。

Here is my revised weave: http://kodeweave.sourceforge.net/editor/#7b9839fb7971df2a27b7af895169ad8a 这是我的修改编织： http ： //kodeweave.sourceforge.net/editor/#7b9839fb7971df2a27b7af895169ad8a

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

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

Answer 2

You can verify the elements are vertically aligned by setting bootstraps default margins and paddings to 0px if needed. 如果需要，可以通过将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://jsfiddle.net/curtisweeks/md5qos66/

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

Answer 3

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

Make use of FlexBox 使用FlexBox

HTML code: HTML代码：

<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 code: 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 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 个解决方案

解决方案1
1 已采纳 2016-05-05 17:46:27

解决方案2
0 2016-05-05 17:31:16

解决方案3
0 2016-05-05 17:56:18

解决方案4
-1 2016-05-05 17:30:03

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

问题描述

4 个解决方案

解决方案1 1 已采纳 2016-05-05 17:46:27

解决方案2 0 2016-05-05 17:31:16

解决方案3 0 2016-05-05 17:56:18

解决方案4 -1 2016-05-05 17:30:03

解决方案1
1 已采纳 2016-05-05 17:46:27

解决方案2
0 2016-05-05 17:31:16

解决方案3
0 2016-05-05 17:56:18

解决方案4
-1 2016-05-05 17:30:03