This question already has answers here:
Flex items not centering vertically
(2 answers)
How do I vertically center text with CSS? [duplicate]
(37 answers)
How can I horizontally center an element?
(133 answers)
Closed 4 years ago.
i am trying like crazy but i cannot get the text inside this table (i built with flex) to be centered. All the content should be vertically centered. Any ideas how i can achieve this? Any kind of help is really appreciated. I tried now for several hours.
Thanks a lot!
.wrapper {
display: flex;
flex-wrap: nowrap;
text-align: center;
background-color: silver;
border-top: 2px solid #000;
}
.wrapper>div {
height: 250px;
}
.ct-title {
flex: 1 40%;
background: deepskyblue;
text-align: left;
}
.ct-content-1 {
flex: 1 20%;
background: gold;
}
.ct-content-2 {
flex: 1 20%;
background: hotpink;
border-left: 4px solid #000;
border-right: 4px solid #000;
}
.ct-content-3 {
flex: 1 20%;
background: lime;
}
<div class="wrapper">
<div class="ct-title">Title
<p>This is some text in a paragraph.</p>
</div>
<div class="ct-content-1">6</div>
<div class="ct-content-2">8</div>
<div class="ct-content-3">12</div>
</div>
Try this. you need to apply flex on the child also.
.wrapper {
display: flex;
flex-wrap: nowrap;
text-align: center;
background-color: silver;
border-top: 2px solid #000;
}
.wrapper>div {
height: 250px;
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
}
.ct-title {
flex: 1 40%;
background: deepskyblue;
text-align: left;
}
.ct-content-1 {
flex: 1 20%;
background: gold;
}
.ct-content-2 {
flex: 1 20%;
background: hotpink;
border-left: 4px solid #000;
border-right: 4px solid #000;
}
.ct-content-3 {
flex: 1 20%;
background: lime;
}
<div class="wrapper">
<div class="ct-title">Title
<p>This is some text in a paragraph.</p>
</div>
<div class="ct-content-1">6</div>
<div class="ct-content-2">8</div>
<div class="ct-content-3">12</div>
</div>
Please try below code
.wrapper {
display: flex;
flex-wrap: nowrap;
text-align: center;
background-color: silver;
border-top: 2px solid #000;
}
.wrapper>div {
height: 250px;
}
.ct-title {
flex: 1 40%;
background: deepskyblue;
text-align: left;
display: flex;
justify-content: center;
flex-direction: column;
text-align: center;
}
.ct-content-1 {
flex: 1 20%;
background: gold;
display: flex;
justify-content: center;
flex-direction: column;
text-align: center;
}
.ct-content-2 {
flex: 1 20%;
background: hotpink;
border-left: 4px solid #000;
border-right: 4px solid #000;
display: flex;
justify-content: center;
flex-direction: column;
text-align: center;
}
.ct-content-3 {
flex: 1 20%;
align-items: center;
display: flex;
justify-content: center;
flex-direction: column;
text-align: center;
}
<div class="wrapper">
<div class="ct-title">Title
<p>This is some text in a paragraph.</p>
</div>
<div class="ct-content-1">6</div>
<div class="ct-content-2">8</div>
<div class="ct-content-3">12</div>
</div>
Related
I'm facing this problem where I want to have a header, sidebar and content with flexbox. I can't get to a solution to divide these 3 childs. I've been trying to use flex-grow and flex-direction:row but I'm having a problem.
Image of the website
How I want it to be
<style>
.parent {
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
height: 100vh;
border: 20px solid black;
display: flex;
flex-direction: column;
}
.header {
width: 200px;
height: 200px;
background: cornflowerblue;
}
.side {
width: 200px;
height: 200px;
background: rgb(219, 133, 133);
}
.content {
width: 200px;
height: 200px;
background: rgb(115, 202, 180);
}
.text {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
height: 190px;
color: #fff;
}
</style>
<div class="parent">
<div class="header">
<h2 class="text">Header</h2>
</div>
<div class="side">
<h2 class="text">Side</h2>
</div>
<div class="content">
<h2 class="text">Content</h2>
</div>
</div>
You need to create two containers, one for all your elements and one for your header and content.
<div class="parent"> <!-- Container 1 -->
<div class="side">
<h2 class="text">Side</h2>
</div>
<div class="container"> <!-- Container 2 -->
<div class="header">
<h2 class="text">Header</h2>
</div>
<div class="content">
<h2 class="text">Content</h2>
</div>
</div>
</div>
Then, you can treat each container as a separate flex-box. the parent will have a flex-direction: row; and the container will have flex-direction: column;.
You also want to set values in percentages, not absolute values as you have right now (200px, 20rem..).
.parent {
box-sizing: border-box;
margin: 0;
padding: 0;
height: 100vh;
border: 20px solid black;
display: flex;
flex-direction: row;
}
.header {
height: 30%;
background: cornflowerblue;
}
.side {
width: 30%;
height: 100%;
background: rgb(219, 133, 133);
}
.content {
height: 70%;
background: rgb(115, 202, 180);
}
.text {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
height: 190px;
color: #fff;
}
.container {
display: flex;
flex-direction: column;
width: 70%;
height: 100%;
}
JSFiddle
Images to illustrate the separation:
You have to wrap your header & content section inside another div. Something like this below example. However, The best way to achieve this layout is using a CSS grid. Here is the complete CSS grid guide
.parent {
display: flex;
height: 100vh;
background: #000;
padding: 5px;
margin: 0;
}
.side {
border: 1px solid #000;
width: 30vw;
display: flex;
justify-content: center;
align-items: center;
background: #fff;
margin-right: 5px;
}
.main-body {
border: 1px solid #000;
width: 70vw;
}
.header,
.content {
display: flex;
justify-content: center;
background: #fff;
}
.header {
height: 25vh;
margin-bottom: 5px;
}
.content {
align-items:center;
height: 70vh;
}
<div class="parent">
<div class="side">
<h2 class="text">Side</h2>
</div>
<div class="main-body">
<div class="header">
<h2 class="text">Header</h2>
</div>
<div class="content">
<h2 class="text">Content</h2>
</div>
</div>
</div>
I don't think that you deeply understand how flexbox work. You should read more about it. I advice you to read a book called CSS-in Depth. You can download it online from a website called Z-lib. Try to understand the code that I posted for you.
<style>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.parent {
height: 100vh;
border: 20px solid black;
display: flex;
background: pink;
}
.main {
display: flex;
backgound-color: green;
flex-direction: column;
flex: 2
}
.header {
background: cornflowerblue;
}
.side {
flex: 1;
background: rgb(219, 133, 133);
}
.content {
background: rgb(115, 202, 180);
flex: 1
}
.text {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
height: 190px;
color: #fff;
}
</style>
<div class="parent">
<div class="side">
<h2 class="text">Side</h2>
</div>
<div class="main">
<div class="header">
<h2 class="text">Header</h2>
</div>
<div class="content">
<h2 class="text">Content</h2>
</div>
</div>
</div>
I am using this to center things in CSS:
.testclass {
display: flex;
justify-content: center;
}
but when i want to scale elements using width and height, it doesn't work and my elements are not centered.
Like this:
.testclass {
display: flex;
justify-content: center;
width: 200px;
height: 200px;
}
What's the problem?
This looks like the expected behavior.
Remember that in this case justify-content: center; centers what is inside the container - not the container itself.
EDIT:
I added margin: 0 auto; to center the container.
#container1 {
display: flex;
justify-content: center;
border: 1px solid red;
}
#container1 > div {
border: 1px solid blue;
background: yellow;
}
#container2 {
display: flex;
justify-content: center;
border: 1px solid red;
width: 200px;
height: 200px;
margin: 0 auto;
}
#container2 > div {
border: 1px solid blue;
background: yellow;
}
<div id="container1">
<div>test 1</div>
</div>
<div id="container2">
<div>test 2</div>
</div>
display: flex; and justify-content: center;
works for parent elements. That is, child elements of that particular parent will be centered, not the parent.
To center .testclassHTML
<div class="parent">
<div class="testclass"></div>
</div>
CSS
.parent {
background-color: red;
display: flex;
justify-content: center;
}
.testclass {
background-color: green;
width: 200px;
height: 200px;
}
If you want full center (horizontal vertical) you can use this code:
.container {
position: relative;
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
<div class="container">
<div class="testclass">Content</div>
</div>
I'm attending the Code Academy course: Build a Website with HTML, CSS, and Github Pages (https://www.codecademy.com/learn/paths/learn-how-to-build-websites)
I'm working on the Tea Cozy Project, where they supply you with a pic of a page and you have to recreate it, the pic is this one Tea Cozy Page Specs
I made the HTML structure but I'm struggling to complete the CSS section, I'm trying to correctly make the Location section but I cannot move the Location text within 15px from the div containing the 3 boxes
#location-section {
background-color: black;
height: 500px;
justify-content: center;
}
#location-section .content-center {
display: inline;
background-color: green;
justify-content: center;
align-items: center;
flex-wrap: column;
margin-bottom: 0;
}
#location-section .content-center h2 {
text-align: center;
color: seashell;
background-color: red;
}
#location-section .location-container {
display: flex;
flex-wrap: column;
justify-content: space-between;
align-items: center;
background-color: blue;
margin: 0;
min-height:200px;
overflow:hidden;
}
#location-section .location-container1 {
background-color: red;
border: 2px solid white;
width: 300px;
align-items: center;
height: 200px;
max-width: calc((100% / 3) - 40px);
margin-left: 20px;
}
#location-section .location-container2 {
background-color: red;
border: 2px solid white;
width: 300px;
align-items: center;
height: 200px;
max-width: calc((100% / 3) - 40px);
}
#location-section .location-container3 {
background-color: red;
border: 2px solid white;
width: 300px;
align-items: center;
height: 200px;
max-width: calc((100% / 3) - 40px);
margin-right: 20px;
}
h4 {
text-align: center;
}
<pre>
<div id="location-section">
<div class="content-center">
<h2>Locations</h2>
</div>
<div class="location-container">
<div class="location-container1">
<h4>
Address 1
</h4>
</div>
<div class="location-container2">
<h4>
Address3
</h4>
</div>
<div class="location-container3">
<h4>
Address3
</h4>
</div>
</div>
</div>
</pre>
This question already has answers here:
How can I center text (horizontally and vertically) inside a div block?
(27 answers)
Closed 2 years ago.
I have a flexbox container with 3 flex items
the text of the two outer items should be at the center point of each item
so far the text appears on the top of
using align-items: center;
recommended in How to vertically align text inside a flexbox?
on the container just squished the divs to one line, ignoring the heigth of the container.
how to center the text at the center of each div ?
body {
margin: 0;
}
.file_upload-container {
display: flex;
margin: 20px;
height: 200px;
/*align-items: center;*/
justify-content: center;
}
.drop-zone_main {
color: #cccccc;
border: 4px dashed #009578;
border-radius: 10px;
}
.upload_spacer {
background-color: #00ffb7;
flex-basis: 200px;
}
.drop-zone_second {
color: #cccccc;
border: 4px dashed #009578;
border-radius: 10px;
flex-basis: 300px;
}
input {
display: none;
}
<div class="file_upload-container">
<div class="drop-zone_main">Drop MainFile here or click to upload</div>
<input class="input_main" type="file" name="upload_mainfile">
<div class="upload_spacer"></div>
<div class="drop-zone_second">Drop second file here or click to upload</div>
<input class="input_second" type="file" name="upload_secondfile">
</div>
You can wrap your input in a div, so it gets aligned with its siblings, and use display: flex to align the inner content:
body {
margin: 0;
}
.file_upload-container {
display: flex;
margin: 20px;
height: 200px;
/*align-items: center;*/
justify-content: center;
}
.drop-zone_main {
color: #cccccc;
border: 4px dashed #009578;
border-radius: 10px;
}
.upload_spacer {
background-color: #00ffb7;
flex-basis: 200px;
}
.drop-zone_second {
color: #cccccc;
border: 4px dashed #009578;
border-radius: 10px;
flex-basis: 300px;
}
.input-wrap {
display: flex;
align-items: center;
}
<div class="file_upload-container">
<div class="drop-zone_main">Drop MainFile here or click to upload</div>
<div class="input-wrap">
<input class="input_main" type="file" name="upload_mainfile">
</div>
<div class="upload_spacer"></div>
<div class="drop-zone_second">Drop second file here or click to upload</div>
<div class="input-wrap">
<input class="input_second" type="file" name="upload_secondfile">
</div>
</div>
You need to correct the css rules :
.drop-zone_main {
color: #cccccc;
border: 4px dashed #009578;
border-radius: 10px;
justify-content: center;
align-items: center;
display: flex;
}
.drop-zone_second {
color: #cccccc;
border: 4px dashed #009578;
border-radius: 10px;
flex-basis: 300px;
justify-content: center;
align-items: center;
display: flex;
}
I'm using flexbox to create a two-columns layout with a header row.
* {
box-sizing: border-box;
position: relative;
}
.container {
border: 2px solid gray;
display: flex;
flex-wrap: wrap;
height: 300px;
}
.header {
flex-basis: 100%;
border: 2px solid magenta;
height: 50px;
line-height: 50px;
text-align: center;
}
.column1 {
flex-basis: 150px;
/* height: calc(100% - 50px); */
border: 2px solid green;
}
.column2 {
/* height: calc(100% - 70px); */
flex: 1;
border: 2px solid orange;
}
<div class='container'>
<div class='header'>it's a header</div>
<div class='column1'>column 1</div>
<div class='column2'>column 2</div>
</div>
Feel free to see the full example here.
As you can see in the example there is a gap between columns and header. My aim is to stretch columns vertically to fill whole empty space in the container.
I can achieve it by setting height property like calc(100% - <header-height>). Is it the correct way?
I just tried to use "flex" style and set align-items: stretch to the container and align-self: stretch to columns but without success. Did I probably miss something trying to implement it this way?
I think specifying flex-direction as column is appropriate in this case.
The second row is itself a flex element with the flex-direction: row. You can fill the rest of the remaining space using flex: 1, which is equivalent to flex-grow: 1.
* {
box-sizing: border-box;
}
.container {
border: 2px solid gray;
display: flex;
flex-direction: column;
flex-wrap: wrap;
height: 300px;
}
.header {
border: 2px solid magenta;
height: 50px;
line-height: 50px;
text-align: center;
}
.subcontainer {
display: flex;
flex-direction: row;
flex: 1;
}
.column1 {
flex-basis: 150px;
border: 2px solid green;
}
.column2 {
flex: 1;
border: 2px solid orange;
}
<div class='container'>
<div class='header'>it's a header</div>
<div class="subcontainer">
<div class='column1'>column 1</div>
<div class='column2'>column 2</div>
</div>
</div>
Do it like shown below
* {
box-sizing: border-box;
}
body,
html {
height: 100%;
}
.container {
border: 2px solid gray;
display: flex;
flex-direction: column;
height: 100%;
}
.header {
width: 100%;
border: 2px solid magenta;
height: 50px;
line-height: 50px;
text-align: center;
}
.body-container {
display: flex;
width: 100%;
flex: 1;
}
.column1 {
width: 50%;
border: 2px solid green;
}
.column2 {
width: 50%;
border: 2px solid orange;
}
<div class='container'>
<div class='header'>it's a header</div>
<div class="body-container">
<div class='column1'>column 1</div>
<div class='column2'>column 2</div>
</div>
</div>