如何使用flask-bootstrap垂直和水平居中标题文本 [英] How to center vertically and horizontally a heading text using flask-bootstrap
问题描述
如何在页面中间添加标题文本?我正在使用 Flask-bootstrap,我想用我自己的 CSS 样式对其进行自定义.
这是我的示例代码:
HTML
{% 扩展 "bootstrap/base.html" %}{% 块头 %}<meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge">{{ 极好的() }}<!-- 我的抄送风格--><link rel="stylesheet" href="{{url_for('.static', filename='start.css')}}"><!-- 自定义字体--><link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">{% 结束块 %}{% 块内容 %}<header class="header"><div class="text-vertical-center"><h1>欢迎来到我的网站</h1><h3>我的投资组合</h3><br><a href="#" class="btn btn-dark btn-lg">下一个站点</a>
</标题>{% 结束块 %}
CSS
html,身体 {宽度:100%;高度:100%;}身体 {字体系列:Source Sans Pro"、Helvetica Neue"、Helvetica、Arial、sans-serif;}.text-vertical-center {显示:表格单元格;文本对齐:居中;垂直对齐:中间;}.text-vertical-center h1 {边距:0;填充:0;字体大小:4.5em;字体粗细:700;}.btn-暗 {边界半径:4;颜色:#fff;背景颜色:RGBA(0,0,0,0.4);}
我做错了什么?Chrome 中代码的结果
如果您尝试将内容(垂直和水平)置于页面中心,您可以使用 position: absolute
和2D 变换.
*您可能希望对较小的视口使用媒体查询,但没有必要正常工作.
工作示例:
html,身体 {宽度:100%;高度:100%;}身体 {字体系列:Source Sans Pro"、Helvetica Neue"、Helvetica、Arial、sans-serif;}.header .text-vertical-center {位置:绝对;顶部:50%;左:50%;变换:翻译(-50%,-50%);文本对齐:居中;背景:红色;}.header .text-vertical-center h1 {边距:0;填充:0;字体大小:4.5em;字体粗细:700;}.header .btn-dark {边界半径:4;颜色:#fff;背景颜色:rgba(0, 0, 0, 0.4);}@media(最大宽度:800px){.header .text-vertical-center {位置:绝对;顶部:50%;左:0;右:0;变换: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>欢迎来到我的网站</h1><h3>我的投资组合</h3><br><a href="#" class="btn btn-dark btn-lg">下一个站点</a>
</header>
How can I bring a heading text in the middle of a page? I'm using flask-bootstrap and I would like to customize it with my own CSS style.
Here's my sample code:
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);
}
What am I doing wrong ? The result of the code in Chrome
If you're trying to place the content (both vertically and horizontally) center of the page you can use position: absolute
with 2D Transforms.
*You may want to use a media query for smaller viewports but it isn't necessary to work correctly.
Working Example:
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垂直和水平居中标题文本的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!