Question

如何在页面中间添加标题文字？我使用flask-bootstrap，我想用我自己的CSS样式自定义它。

这是我的示例代码：

HTML

{% extends "bootstrap/base.html" %}

{% block head %}
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
{{ super() }}
<!-- My ccs style -->
<link rel="stylesheet" href="{{url_for('.static', filename='start.css')}}">
<!-- Custom Fonts -->
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-  awesome.css" rel="stylesheet">
{% endblock %}

{% block content %}

<header class="header">
    <div class="text-vertical-center">
        <h1>Welcome to my Site</h1>
        <h3>My portfolio</h3>
        <br>
        <a href="#" class="btn btn-dark btn-lg">Next Site</a>
    </div>    
</header>

{% endblock %}

CSS

html,
body {
   width: 100%;
   height: 100%;
}

body {
   font-family: "Source Sans Pro","Helvetica Neue",Helvetica,Arial,sans-serif;
}

.text-vertical-center {
   display: table-cell;
   text-align: center;
   vertical-align: middle;
}

.text-vertical-center h1 {
   margin: 0;
   padding: 0;
   font-size: 4.5em;
   font-weight: 700;
}

.btn-dark {
   border-radius: 4;
   color: #fff;
   background-color: rgba(0,0,0,0.4);
}

我做错了什么？ The result of the code in Chrome

Answer 1

为了以这种方式使用display: table-cell;，父元素必须设置为display: table;。在此之后它应该工作。

.header {
 display: table;
}

Answer 2

我认为这会对你有帮助。

.text-vertical-center{
 height: 100px;
 width: 100px;
 background-color: #036;
 left: 0;
 margin: auto;
 position: absolute;
 top: 0;
 right: 0;
 bottom: 0;
}

<div class="text-vertical-center">
    <h1>Welcome to my Site</h1>
    <h3>My portfolio</h3>
    <br>
    <a href="#" class="btn btn-dark btn-lg">Next Site</a>
</div>

Answer 3

如果您尝试将内容（垂直和水平）放置在页面的中心，则可以position: absolute使用2D Transforms。

*您可能希望对较小的视口使用媒体查询，但无需正常工作。

工作示例：

html,
body {
  width: 100%;
  height: 100%;
}
body {
  font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.header .text-vertical-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  background: red;
}
.header .text-vertical-center h1 {
  margin: 0;
  padding: 0;
  font-size: 4.5em;
  font-weight: 700;
}
.header .btn-dark {
  border-radius: 4;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.4);
}
@media (max-width: 800px) {
  .header .text-vertical-center {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
  }
}

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<header class="header">
  <div class="text-vertical-center">
    <h1>Welcome to my Site</h1>
    <h3>My portfolio</h3>
    <br>
    <a href="#" class="btn btn-dark btn-lg">Next Site</a>
  </div>
</header>

如何使用flask-bootstrap垂直和水平居中标题文本

3 个答案: