Align vertically / horizontally using bootstrap
Question
I've asked this question a few times now, but no one has been able to resolve my problem.
The problem I have is that I can't get the header to sit completely centrally within a fullpage background.
There is however one method that does work (commented out in the header tag) but faces problems when coming to full browser compatibility.
HTML
<body>
<div class="container-fluid text-center">
<header role="banner" id="banner" class="vcenter">
<h1>Fix this</h1>
<h2>Bootstrap/css</h2>
<h3>Please</h3>
</header>
</div>
</body>
CSS (rest is in the jsfiddle )
.vcenter {
display: inline-block;
vertical-align: middle;
float: none;
}
I have made a jsfiddle to try and describe the problem I am facing. Note that the background image has been changed to a solid colour. http://jsfiddle.net/wesbbtqn/
If someone can fix this I will be hugely grateful as it has been bugging me for ages.
EDIT - The height and width must remain flexible.
4 answers
solution1
2 ACCPTED 2015-01-16 13:35:08
If I get correctly what you're asking:
Horizontal centering:
just add text-align: center to h1, h2 and h3.
Vertical centering:
One way to achieve this in pure CSS, in a supported cross-browser way, and without setting explicitly the container's height is to add display: table to the parent of the container, and display: table-cell (along with the already present vertical-align: middle ) to the container itself (in your case: <header> )
.vcenter {
vertical-align: middle;
display: table-cell;
}
solution2
0 2015-01-16 13:28:22
Are you looking for this:
http://jsfiddle.net/shannabarnard/wesbbtqn/4/
All I did was add
text-align: center;
width: 90%;
height: 50%;
position: absolute;
top:0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
to your header css.
solution3
0 2015-01-16 13:48:28
html, body { height: 100%; } header { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); text-align: center; }
<header> <h1>Fix this</h1> <h2>Bootstrap/css</h2> <h3>Please</h3> </header>
solution4
0 2015-01-16 14:00:37
firstly, change your css code for this class .vcenter to be like this:
.vcenter {
display: inline;
vertical-align: middle;
float: none;
text-align:center;
}
and then, add new class in your container element, to be like this <div class="container-fluid text-center page-container"> .
and add new class in your css to override height:100%; from .container-fluid :
.page-container{
height:auto !important;
}
hopefully helping .
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.