同时垂直和水平对齐不起作用答案

【问题标题】：vertical and horizontal alignment at the same time does not work同时垂直和水平对齐不起作用
【发布时间】：2016-12-23 05:25:46
【问题描述】：

我正在使用引导程序来布局我的网站。除了文本“这是测试”的垂直对齐之外，一切都很好。我使用了我在网上找到的不同方式，例如结合垂直对齐：中间和文本对齐：中心和弹性框。这些都没有产生正确的垂直对齐。这是我的代码：

 <!DOCTYPE html>
 <html lang="en">
  <head>
 <title>Bootstrap Example</title>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet"    href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script   src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">    </script>
   <style>
 .header{

 font-weight: bold;
 font-size: 30px;
 background-color: #4070CB;
color: #EFF0F2;
height:60px;

}
.txt{
  align-items :center;
  display : flex;
  text-align: center;
  justify-content: center;
}
 .rightImg{
  margin-right:30px;
  margin-left:12px;
  }
.leftImg{
margin-right:12px;
margin-left:30px;
}

</style>
 </head>
 <body>

<div class="container col-sm-offset-1">
  <div class="row">
   <div class="col-sm-10 header">
     <div class="row">
        <div class="col-sm-1 leftImg"><img   src="http://image.flaticon.com/sprites/authors/28-simpleicon.png" alt="Smiley   face" height="36" width="36"></div>
        <div class="col-sm-8 txt">THIS IS A TEST</div>
        <div class="col-sm-1 rightImg"><img  src="http://image.flaticon.com/sprites/authors/28-simpleicon.png" alt="Smiley   face" height="36" width="36"></div>
   </div>
   </div>
   </div>
 <div class="row">
   <div class="col-sm-3" style="background-color:lavender;">.col-sm-4</div>
   <div class="col-sm-4" style="background-color:lavenderblush;">.col-sm-4</div>
  <div class="col-sm-3" style="background-color:lavender;">.col-sm-4</div>
</div>

这里也是我的代码的 jfiddle 链接： jfiddle

有人可以帮忙吗？如何垂直对齐标题中的文本？

【问题讨论】：

您的父元素的定义高度为 60 像素。使用 line-height: 60px 在 60px 容器中垂直居中一行文本。这不会解决您的引导问题，但列不浮动 - 不知道那里发生了什么。
你能解释一下你想要输出的确切程度吗......关于输出有点不清楚
@JonUleis 感谢您的回答。如果我使用线高，它会缩小我的潜水，但我想要 60 的确切高度
@HamedMinaee line-height 不应该缩小你的 div - 如果是这样的话，其他东西会搞砸它。
@Geeky 当然，感谢您的回答。其实我需要两行。我目前坚持的标题的森林，第二个是正文。标题包含两个侧面的图像和一个标题文本。但是文本应该垂直和水平对齐。标题的高度也应为 60 像素

标签： css

【解决方案1】：

您的文本垂直居中，但相对于行，而不是标题。

要垂直对齐标题中的所有内容，您可以用填充替换高度。

.header {
   padding: 15px 0;
}

或者，您可以对文本应用边距。

.txt {
   margin-top: 10px;
}

【讨论】：

谢谢。只是为了仔细检查，因为我是引导程序的新手。你认为我的 bootstarp 布局正确吗？