Html 如何在div中垂直居中放置按钮和文本_Html_Css_Twitter Bootstrap 3

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

html css twitter-bootstrap-3

Html 如何在div中垂直居中放置按钮和文本,html,css,twitter-bootstrap-3,Html,Css,Twitter Bootstrap 3,我目前有这样一个页面： <!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">

我目前有这样一个页面：

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

和

按钮在div
中垂直对齐，我尝试将样式设置为vertical align:middle
，但它不起作用。我该怎么办
编辑：我原来的问题似乎不清楚。我的意思是，我希望标题文本和按钮显示在同一“行”上，但在该行上垂直对齐。现在，我可以让它们在同一行上，但文本和按钮将按上边缘对齐，而不是按中心对齐。


标题
按钮
#垂直的{
位置：绝对位置；
最高：40%；
宽度：100%；
}
h3{
保证金：0；
填充：0；
}
.页眉{
高度：200px；
背景色：红色；
位置：相对位置；
}


标题
按钮
#垂直的{
位置：绝对位置；
最高：40%；
宽度：100%；
}
h3{
保证金：0；
填充：0；
}
.页眉{
高度：200px；
背景色：红色；
位置：相对位置；
}
如果需要，可以通过将引导默认边距和填充设置为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;
    }


解释和来源：
如果需要，您可以通过将引导默认边距和填充设置为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;
    }


解释和来源：
编织：
你没有发布你的css，所以我不知道你在用什么。这里有一个简短的提示：
注意：仅适用于显示：表格单元格和显示：内联元素（它也适用于和）
下面是一个使用display:table的简单解决方案和显示：表格单元格用于垂直居中的所需内容
如果你想让你的按钮居中，你必须移除pull right
类，或者你可以在它后面添加另一个类，然后覆盖它的css。（简单的解决方案是，只需删除向右拉
类
编辑：那么您希望按钮与h3标签位于同一行，对吗
在我向您展示如何解决这个问题之前，请记住h1-h5标记都是display:block；
元素，这意味着它们将始终作为新行嵌入。（如段落标记），因此您需要告诉h3标记显示inline
或inline block

这是我的修订版：

html，正文{
身高：100%；
}
.桌子{
显示：表格；
宽度：100%；
身高：100%；
}
.细胞{
显示：表格单元格；
垂直对齐：中间对齐；
}
h3{
显示：内联块；
}
.btn{
边缘顶部：15px；
}

标题
按钮
编织：
你没有发布你的css，所以我不知道你在用什么。这里有一个简短的提示：
注意：仅适用于显示：表格单元格；
和显示：内联；
元素（它也适用于和）
下面是一个简单的解决方案，它使用父对象上的display:table；
和display:table cell；
实现垂直居中
如果你想让你的按钮居中，你必须移除pull right
类，或者你可以在它后面添加另一个类，然后覆盖它的css。（简单的解决方案，只需移除pull right
类
编辑：那么您希望按钮与h3标签位于同一行，对吗
在我向您展示如何解决这个问题之前，请记住h1-h5标记都是display:block；
元素，这意味着它们将始终作为新行嵌入。（如段落标记），因此您需要告诉h3标记显示inline
或inline block

这是我的修订版：

html，正文{
身高：100%；
}
.桌子{
显示：表格；
宽度：100%；
身高：100%；
}
.细胞{
显示：表格单元格；
垂直对齐：中间对齐；
}
h3{
显示：内联块；
}
.btn{
边缘顶部：15px；
}

标题
按钮

利用FlexBox
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>


利用FlexBox
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>

当您添加更多组件时，您必须更改顶部（%）值。这不是一种可扩展的方法，当您添加更多组件时，您必须更改顶部（%）值。不是可缩放的方法可能重复的可能重复的您能看到我的编辑吗？现在文本和按钮正在按其上边缘或下边缘对齐，而不是在中心对齐。我已经尝试将display:inline
添加到h3
标记中，但我的问题是h3
tag和按钮
通过其上边缘对齐。我希望它们通过其中心对齐，而不管其大小。垂直居中最好使用显示表和表格单元格（如回答中所述）。另一种方法是使用flex。因为h1-h5标记有边距，按钮位于边距旁边。您需要在希望居中的位置上使用边距属性（如答案所示）。你能看到我的编辑吗？现在文本和按钮是按其上边缘或下边缘对齐的，而不是在中间对齐。我已经尝试将display:inline
添加到h3
标记中，但我的问题是h3
标记和按钮
是按其上边缘对齐的。我会的喜欢它们按中心对齐，而不管大小。垂直居中最好使用显示表和表格单元格（如回答中所述）。另一种方法是使用flex。因为h1-h5标签有边距，按钮在旁边。您可以