I want to make a text vertically center on 100vh height.
Here is what I've done
.about-header {
height: 100vh;
background: #000;
}
.about-header p {
font-size: 5em;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container-fluid about-header text-center">
<div class="row ">
<div class="col-md-12">
<p>Lorem Ipsum</p>
</div>
</div>
</div>
just add this below CSS:-
.about-header{
height: 100vh;
background: #000;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
Your content will be vertically aligned.
Related
This question already has answers here:
Bootstrap Center Vertical and Horizontal Alignment
(17 answers)
Closed 2 years ago.
I'm creating a showcase with bootstrap 4. I want the showcase content to be centered.
so I'm using flexbox with align-items: center;. but for some reason it's not working.
Can some please explain what am I doing wrong?
#showcase {
position: relative;
background: url("https://source.unsplash.com/random") no-repeat center center/cover;
min-height: 350px;
}
#showcase .overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
}
#showcase .showcase-content {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
max-width: 540px;
height: 100%;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<header id="showcase" class="py-5">
<div class="overlay text-white text-center">
<div class="container">
<div class="showcase-content">
<h1 class="h2 mb-4">My Heading will go here</h1>
<div class="header-search w-100">
<form action="" method="get">
<input
type="search"
name="query"
placeholder="My input place holder"
id="query"
class="form-control"
/>
</form>
</div>
</div>
</div>
</div>
</header>
Your container class was not endowed with css rules. So I added flex to it to center it vertically using the justify-content: center rule. And in order to center it vertically, you need to add the rule height: 100%, since the child selector #showcase .showcase-content already contains flex rules, and it makes no sense to prescribe an align-item: center.
Add this selector to your css:
.container {
display: flex;
justify-content: center;
height: 100%;
}
#showcase {
position: relative;
background: url("https://source.unsplash.com/random") no-repeat center center/cover;
min-height: 350px;
}
#showcase .overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
}
#showcase .showcase-content {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
max-width: 540px;
height: 100%;
}
.container {
display: flex;
justify-content: center;
height: 100%;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<header id="showcase" class="py-5">
<div class="overlay text-white text-center">
<div class="container">
<div class="showcase-content">
<h1 class="h2 mb-4">My Heading will go here</h1>
<div class="header-search w-100">
<form action="" method="get">
<input
type="search"
name="query"
placeholder="My input place holder"
id="query"
class="form-control"
/>
</form>
</div>
</div>
</div>
</div>
</header>
Second solution:
#showcase {
position: relative;
background: url("https://source.unsplash.com/random") no-repeat center center/cover;
min-height: 350px;
}
#showcase .overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
}
#showcase .showcase-content {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
max-width: 540px;
height: 100%;
margin: auto; /*add this it*/
}
.container {
height: 100%; /*add this it*/
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<header id="showcase" class="py-5">
<div class="overlay text-white text-center">
<div class="container">
<div class="showcase-content">
<h1 class="h2 mb-4">My Heading will go here</h1>
<div class="header-search w-100">
<form action="" method="get">
<input
type="search"
name="query"
placeholder="My input place holder"
id="query"
class="form-control"
/>
</form>
</div>
</div>
</div>
</div>
</header>
You can give margin: auto; to your showcase-content class or you can give this style to your container:
.container {
display: flex;
align-items: center;
justify-content: center;
}
But because of you use bootstrap maybe this tip interrupt another codes, so you should make another container for you showcase-content into the container like this:
<div class="container">
<div class="show-case-container">
<div class="showcase-content">
</div></div></div>
Basically I have three items aligned in a row with flexboxes and it worked however there is a weird issue with the vertical align.
Screenshot:
Fiddle Demo
.flex-container {
display: flex;
display: -ms-flexbox;
display: -webkit-flex;
flex-direction: row;
-ms-flex-align: center;
-webkit-align-items: center;
-webkit-box-align: center;
align-items: center;
}
.points {
flex: 1;
vertical-align: top;
}
.p1 {
align-self: flex-start;
}
.p2 {
align-self: center;
}
.p3 {
align-self: flex-end;
}
<div class="textcenter">
<h1>Lorem Ipsum</h1>
<h4>dolor sit amet, consectetur adipiscing</h4>
</div>
<div class="flex-container bg">
<div class="points p1 textcenter">
<h3>Support for most popular<br>languages and frameworks</h3>
<p></p>
</div>
<div class="points p2 textcenter">
<h3>Open Source</h3>
</div>
<div class="points p3 textcenter">
<h3>Constantly Growing</h3>
</div>
</div>
Thanks in advance,
Diego
Revise Fiddle
.flex-container {
display: flex;
display: -ms-flexbox;
display: -webkit-flex;
flex-direction: row;
-ms-flex-align: center;
-webkit-align-items: center;
-webkit-box-align: center;
align-items: center;
background-color: cadetblue;
}
.points {
flex: 1;
vertical-align: top;
text-align: center;
}
p1,p2,p3 {
}
<div class="textcenter">
<h1>tutorial-db</h1>
<h4>The Ultimate Coding Recource Database</h4>
</div>
<div class="flex-container bg">
<div class="points p1 textcenter">
<h3>Support for most popular<br>languages and frameworks</h3>
<p></p>
</div>
<div class="points p2 textcenter">
<h3>Open Source</h3>
</div>
<div class="points p3 textcenter">
<h3>Constantly Growing</h3>
</div>
</div>
My CMS has a rather rigid setup with 2 columns with headers and content, as below:
.wrapper {
overflow: auto;
border: 1px solid #ccc;
text-align: center;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-align: center;
-webkit-align-items: center;
-webkit-box-align: center;
align-items: center;
}
.left,
.right {
float: left;
width: 45%;
padding: 5px;
}
<div class="wrapper">
<div class="left">
<h3>Title (should be aligned to top)</h3>
<div class="content">
left<br>
left<br>
left<br>
left<br>
</div>
</div>
<div class="right">
<h3>Title (should be aligned to top)</h3>
<div class="content">
right
</div>
</div>
</div>
jsFiddle
I want to make the .content of each column align vertically to the middle but keep the header h3s vertically aligned to the top.
Normally I would achieve vertical align using flexbox as such:
.wrapper {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-align: center;
-webkit-align-items: center;
-webkit-box-align: center;
align-items: center;
}
but of course this affects all elements within .wrapper.
Would anyone know a way I could 'target' the .content classes and get the same effect (keeping in mind I cannot really alter the HTML)?
This is a sort of a hack, but it works:
Remove align-items: center from the wrapper and flex:1 to the flex children left and right
Make the inner left and right container a column flexbox and center the h3 and content using justify-content:center
Use margin-bottom:auto to push both h3 to the top and allow content to stay at the middle.
See demo below:
.wrapper {
overflow: auto;
border: 1px solid #ccc;
text-align: center;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}
.left,
.right {
padding: 5px;
display: flex;
flex-direction: column;
justify-content: center;
flex: 1;
}
.left h3, .right h3 {
margin-bottom: auto;
}
.content {
margin-bottom: auto;
}
<div class="wrapper">
<div class="left">
<h3>
Title (should be aligned to top)
</h3>
<div class="content">
left
<br>left
<br>left
<br>left
<br>
</div>
</div>
<div class="right">
<h3>
Title (should be aligned to top)
</h3>
<div class="content">
right
</div>
</div>
</div>
check this fiddle
.wrapper {
overflow: auto;
border: 1px solid #ccc;
text-align: center;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-align: flex-start;
-webkit-align-items: flex-start;
-webkit-box-align: flex-start;
align-items: flex-start; // changed
}
I'm trying to achieve the following result using flexbox:
I tried the with the following html but I can't get it to work.
<div class=" flex-center">
<div class="flex-item-center">
<p>
Some text in box A
</p>
</div>
<div class="flex-item-bottom">
<p>Some text in box B....</p>
</div>
</div>
CSS:
.flex-center {
display: flex;
align-items: center;
align-content: center;
justify-content: center;
}
.flex-item-center {
align-self: center;
}
.flex-item-bottom {
align-self: flex-end;
}
How can I make it look like the image?
I've made a posible solution.
.flex-center {
background-color: #739FD0;
color: #000000;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-content: center;
align-items: center;
height: 400px;
}
.flex-center-bottom {
background-color: #739FD0;
color: #000000;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-end;
align-content: center;
align-items: center;
}
.flex-item-center {
border: solid 2px #4675AA;
order: 0;
flex: 0 1 auto;
align-self: center;
}
.flex-item-bottom {
border: solid 2px #4675AA;
order: 1;
flex: 0 1 auto;
align-self: flex-end;
}
<div class="flex-center">
<div class="flex-item-center">
<p>DROP FILES HERE</p>
</div>
</div>
<div class="flex-center-bottom">
<div class="flex-item-center">
<p>Hint: You can also drop files in the all files page</p>
</div>
</div>
Update 2017: Tested in Google Chrome Versión 62.0.3202.89 (Build oficial) (32 bits).
.flex-center,
.flex-center-bottom {
align-items: center;
background-color: #739FD0;
color: #000000;
display: flex;
}
.flex-center {
height: 400px;
justify-content: center;
}
.flex-center-bottom {
justify-content: flex-end;
}
.flex-item-center {
border: solid 2px #4675AA;
font-family: Arial, sans-serif;
font-size: 1.6em;
line-height: 1px;
padding: 0 3px;
}
<div class="flex-center">
<div class="flex-item-center">
<p>Some text in box A</p>
</div>
</div>
<div class="flex-center-bottom">
<div class="flex-item-center">
<p>Some text in box B...</p>
</div>
</div>
I hope this helps you.
Is this what you are looking for? http://jsfiddle.net/DIRTY_SMITH/q12bh4se/6/
body {
background-color: lightblue;
}
#main {
width: 100%;
height: 400px;
border: 1px solid black;
display: -webkit-flex;
/* Safari */
-webkit-align-items: flex-start;
/* Safari 7.0+ */
display: flex;
align-items: flex-start;
}
#main div {
-webkit-flex: 1;
/* Safari 6.1+ */
flex: 1;
}
.flex-item-center {
margin-left: 40%;
border-style: solid;
-webkit-align-self: center;
/* Safari 7.0+ */
align-self: center;
}
.flex-item-bottom {
border-style: solid;
align-self: flex-end;
}
Try:
#main-wrapper {
background: blue;
width: 100%;
height: 100%;
min-height: 300px;
display: flex;
align-items: center;
}
.x-center {
display: flex;
justify-content: center;
}
.y-center {
flex: 1;
}
.x-right {
justify-content: flex-end;
}
.y-bottom {
align-self: flex-end;
}
.small-div {
padding: 10px;
}
<div id="main-wrapper">
<div class="x-center y-center small-div">Center center</div>
<div class="x-right y-bottom small-div">Bottom Right</div>
</div>
Notes:
The align-self won't work for IE10 or below.
Anybody know how to make the center div a bit more to the left without position relativing it? Thanks
In Bootstrap 4.x you can use the utility classes
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-12">
<div class="d-flex justify-content-center h-100">
<div class="d-flex align-items-center">center center</div>
</div>
<div class="d-flex justify-content-end h-100">
<div class="d-flex align-items-end">right bottom</div>
</div>
</div>
</div>
</div>
EDIT
Since I received a couple downvotes I believe a review is in order.
To me the above answer is still valid, however I understand it's not clear it requires some height.
How this height is achieved doesn't really matter. Either you set it fixed in CSS on a wrapper or for the code snippet's sake we set the document's height to make it responsive.
If the "center content" takes up the space in height, the "bottom content" can be positioned absolute, so it doesn't add height. All what's left is to make sure it covers the full width and positions from the bottom.
html, body { height: 100%; } /* can be anything that generates height */
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="d-flex justify-content-center h-100">
<div class="d-flex align-items-center">center center</div>
</div>
<div class="d-flex justify-content-end position-absolute w-100 fixed-bottom">
<div class="d-flex align-items-end">right bottom</div>
</div>
So functionality wise, there's no additional CSS required in Bootstrap.
Documentation justify content
Documentation position
I'm trying to create a header using flexbox that features 3 divs: left = navigation, center = logo, right = social icons/links. The problem I am running into is that each div in my header is not even, so the logo is not directly centered directly in the header.
I thought if I set the flex-grow property to 1, then each section would have the same width.
Here's my code:
<html>
<head>
<style>
*, *:before, *:after {
box-sizing:border-box;
}
body {margin: 0}
.header {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
position: relative;
width: 100%;
padding:25px 20px;
background-color:#f0f0f0;
}
.header__left {
flex-grow:1;
-webkit-align-items: flex-start;
align-items: flex-start;
-webkit-justify-content: flex-start;
justify-content: flex-start;
text-align: left;
}
.header__center {
flex-grow:1;
-webkit-align-items: center;
align-items:center;
-webkit-justify-content: center;
justify-content: center;
text-align: center;
}
.header__right {
flex-grow:1;
-webkit-align-items: flex-end;
align-items: flex-end;
-webkit-justify-content: flex-end;
justify-content: flex-end;
text-align: right;
}
</style>
</head>
<body>
<header class="header">
<div class="header__left">
<nav class="header__navigation">
Menu
</nav>
</div>
<div class="header__center">
<div class="header__logo">Flexbox</div>
</div>
<div class="header__right">
<div class="header__social">
Facebook
Twitter
</div>
</div>
</header>
</body>
</html>
Use flex:1; instead of flex-grow:1;
*,
*:before,
*:after {
box-sizing: border-box;
}
body {
margin: 0
}
.header {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
position: relative;
width: 100%;
padding: 25px 20px;
background-color: #f0f0f0;
}
[class*="header__"] {
border: 1px solid green;
}
.header__left {
flex: 1;
-webkit-align-items: flex-start;
align-items: flex-start;
-webkit-justify-content: flex-start;
justify-content: flex-start;
text-align: left;
}
.header__center {
flex: 1;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
text-align: center;
}
.header__right {
flex: 1;
-webkit-align-items: flex-end;
align-items: flex-end;
-webkit-justify-content: flex-end;
justify-content: flex-end;
text-align: right;
}
<header class="header">
<div class="header__left">
<nav class="header__navigation">
Menu
</nav>
</div>
<div class="header__center">
<div class="header__logo">Flexbox</div>
</div>
<div class="header__right">
<div class="header__social">
Facebook
Twitter
</div>
</div>
</header>