Question

我正在使用bootstrap来布局我的网站。一切都很好，除了文本“这是测试”的垂直对齐。我使用了在网络中找到的不同方式，例如vertical-align：middle和text-align：center和flex box的组合。这些都没有产生正确的垂直对齐。这是我的代码：

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

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

Answer 1

您的文字是垂直居中的，但与行相关，而不是标题。

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

.header {
   padding: 15px 0;
}

或者，您可以在文本中应用保证金。

.txt {
   margin-top: 10px;
}

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

1 个答案: