Question

你能告诉我如何在标题上垂直居中显示文字。对于水平中心，我知道 text-align：center 工作正常。但是当我需要垂直居中时我会做什么？我试过行高？但不行吗？

我需要我的文字或标题“品牌”显示在垂直中心。我尝试了一些保证金，但不是..

我需要标题只应 50PX 的高度和标题应始终位于中心

这是我的代码 http://plnkr.co/edit/QORTN7sRCtove4FpGDFv?p=catalogue

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Basic Bootstrap Template</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <!-- Optional Bootstrap theme -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
</head>
<style>
   .navbar-header {
    float: left;
    padding: 0px;
    text-align: center;
    width: 100%;
}
.navbar-brand {float:none;}
</style>
<body>


<nav role="navigation" class="navbar navbar-default navbar-fixed-top">
    <div class="container">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a href="#" class="navbar-brand">Brand</a>
        </div>
        <!-- Collection of nav links and other content for toggling -->
        <div id="navbarCollapse" class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">Home</a></li>
                <li><a href="#">Profile</a></li>
                <li><a href="#">Messages</a></li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#">Login</a></li>
            </ul>
        </div>
    </div>
</nav>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>

</html>

Answer 1

您只需将样式更改为：

<style>
   .navbar-header {
    float: left;
    padding: 0px;
    text-align: center;
    width: 100%;
    height:100%;
    position:relative;
}
.navbar-brand {float:none;
  position:absolute;
  top: 50%;
  transform: translateY(-50%);
}
</style>

如何在标题上显示文本垂直中心？

1 个答案: