Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 1 year ago.
Improve this question
I would like to build a "grid"/"table" using flexbox which has 2 rows and 2 columns. In the two items of the left column I want the text to be aligned to the left while in the two items of the right column I want the text to be centered. As easy as it seems to be, I cannot figure out how to achieve this goal using flexbox. I would be very delighted if someone could provide a small example on how to do this.
* {
margin: 0;
padding: 0;
outline: 0;
box-sizing: border-box;
}
body {
height: 100vh;
display: grid;
place-items: center;
}
.flex {
display: flex;
}
.container {
position: relative;
width: 350px;
height: 350px;
border: 1px solid red;
}
.column {
position: relative;
width: 100%;
height: 100%;
padding: 2rem;
display: flex;
flex-direction: column;
background-color: pink;
}
.column:nth-child(2) {
background-color: coral;
}
.column:nth-child(2) .box {
text-align: center;
/* if you also want to align text vertically center */
/* display: grid;
place-items: center; */
}
.column .box {
width: 100%;
height: 100%;
background-color: lightgreen;
}
.column .box:not(:first-of-type) {
margin-top: 2rem;
}
<div class="container flex">
<div class="column">
<div class="box">
aligned left
</div>
<div class="box">
aligned left
</div>
</div>
<div class="column">
<div class="box">
aligned center
</div>
<div class="box">
aligned center
</div>
</div>
</div>
If you also want to align text vertically center add the below mentioned code inside .box.
/* grid method */
display: grid;
place-items: center;
/* flex method */
display: flex;
align-items: center;
justify-content: center;
CSS:
.container {
display: flex;
width: 200px;
height: 200px;
border: 1px solid red;
flex-wrap: wrap;
box-sizing:border-box
}
.container div {
width: 50%;
height: 100px;
border: 1px solid green;
box-sizing:border-box
}
.container .box1,
.container .box3{
text-align: left
}
.container .box2,
.container .box4{
text-align: center
}
HTML:
<div class="container">
<div class="box1">sample text</div>
<div class="box2">sample text</div>
<div class="box3">sample text</div>
<div class="box4">sample text</div>
</div>
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 21 days ago.
Improve this question
I want to have text on the left side of the useres screen and on the right side and Image. Look at the prototype i provided![enter image description here][1]
I can't find a solution pls help
I cant upload images, but heres a link to it
https://photos.app.goo.gl/97ZLoYcLBsVsRnjc6
I tried to do it with floats. But it didnt work out, since the button would just be way to far away from the text. The Image shouldt take away any space, it should display on the right side
We can use flex in this case
Refer CSS flex for further changes >> CSS Flex
* {
padding: 0;
margin: 0
}
.container {
display: flex;
justify-content: space-around;
align-items:center;
background-color: black;
color: white;
height:100vh
}
.container-button {
border: none;
background-color: white;
color: black;
padding: 0px 20px;
}
.container-img {
height: 100px;
width: 200px;
}
<div class="container">
<div class="container-text">
<h2>Hello World</h2>
<h4>This is some Text</h4>
<button class="container-button">button</button>
</div>
<img class="container-img" src="https://via.placeholder.com/200x100/FFFFFF/000000">
</div>
You can do something like this:
.container{
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
}
.container-right-side img{
margin-right: 2rem;
max-width: 60vw;
width: 100%;
}
.container-left-side{
margin-left: 2rem;
}
#media screen and (min-width: 0px) and (max-width: 600px){
.container{
flex-direction: column;
}
.container-left-side{
margin-left: 0;
}
}
<div class="container">
<div class="container-left-side">
<h2>Hello World</h2>
<h4>This is Some text</h4>
<button>button</button>
</div>
<div class="container-right-side">
<img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg" />
</div>
</div>
You can use something like this:
.container {
display: flex;
justify-content: space-between;
padding: 70px;
background-color: black;
}
.text {
display: flex;
flex-direction: column;
justify-content: center;
/* align-items: center; */
width: 50%;
padding: 50px;
color: white;
}
.image {
width: 50%;
}
img {
width: 100%;
height: auto;
border: 1px solid white;
}
button {
max-width: 100px;
}
<div class="container">
<div class="text">
<h1>Hello World</h1>
<p>This is Some Text</p>
<button>Button</button>
</div>
<div class="image">
<img src="https://via.placeholder.com/300 " alt="Image">
</div>
</div>
This question already has answers here:
How does the vertical-align property work?
(2 answers)
Closed 2 years ago.
I can't figure this out, it's suposed to put the boxes in the middle of it's container, but I can't make them move.
The idea is to center the inside the wrapper and to place them horizontally in the middle without having to fuzz around with margins or paddings and using veritcal-align.
#wrapper {
width: 1000px;
height: 1000px;
}
#container {
width: 900px;
height: 900px;
text-align: center;
display: inline-block;
background-color: lightblue;
}
.box {
width: 200px;
height: 200px;
margin: 0 auto;
display: inline-block;
vertical-align: middle;
background-color: lightgreen;
border: 1px solid grey;
margin: 10px;
}
<div id="wrapper">
<div id="container">
<div class="box">BOXES</div>
<div class="box">BOXES</div>
<div class="box">BOXES</div>
</div>
</div>
I think you are looking for flexbox.
I have adapted your jsfiddle to fit
https://jsfiddle.net/ke4w58ra/
The folowing code is what I have changed to your #content element.
display: flex;
justify-content: center;
align-items: center;
gap: 5px;
Essentially, setting the elements to display in the center horisontally (align-items) and vertically (justify-content). With a gap of 5px to space the boxes out.
For more information, look here: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Below is the integrated form of the JSFiddle
#container{
width: 100vw;
height: 100vh;
text-align: center;
display: inline-block;
background-color: lightblue;
display: flex;
justify-content: center;
align-items: center;
gap: 5px;
}
.box{
width: 200px;
height: 200px;
margin: 0 auto;
background-color: lightgreen;
border: 1px solid grey;
margin: 10px;
display: flex;
align-items: center;
justify-content: center;
}
body {
margin: 0px;
}
<body>
<div id="container">
<div class="box">BOXES</div>
<div class="box">BOXES</div>
<div class="box">BOXES</div>
</div>
</body>
This question already has answers here:
Align 3 unequal blocks left, center and right
(4 answers)
Horizontally center an element and put another element to the right of it
(1 answer)
Center one and right/left align other flexbox element
(11 answers)
Closed 2 years ago.
I am trying to center one item with flexbox, the one in blue. And the item in red should not be centered but simply be aligned to the right of the blue item.
How to do this?
.container {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.box.right-item {
background: red;
width: 200px;
}
.box.left {
background: blue;
width: 200px;
height: 20px;
}
<div class="container">
<div class="box left">
xx
</div>
<div class="box right-item">
yy
</div>
</div>
Just use margin-left: calc(50% - 100px); for .box.left This centers the blue box.
.container {
display: flex;
flex-direction: row;
align-items: center;
}
.box.right-item {
background: red;
width: 200px;
}
.box.left {
background: blue;
width: 200px;
height: 20px;
margin-left: calc(50% - 100px);
/* ↑ half of the width */
}
<div class="container">
<div class="box left">
xx
</div>
<div class="box right-item">
yy
</div>
</div>
This is a little bit tricky to do but you could do a few workarounds like make the second box's position absolute so that it's really just the blue box being centered - or what I think would be a simpler elegant solution - just give the blue box a left margin the size of the red box -
.container {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.box.right-item {
background: red;
width: 200px;
}
.box.left {
background: blue;
width: 200px;
height: 20px;
margin-left:200px;
}
<div class="container">
<div class="box left">
xx
</div>
<div class="box right-item">
yy
</div>
</div>
If you want to center the blue item while keeping justify-content: center, you'll need to shift the center point by positioning both items 100px to the right of their original position, which translates to adding position: relative; left: 100px; to both item. Or, you could try using margin-left.
There's no direct way to center 1 item and at the same time push the other to the end. You could do it with grid, but for flex, above will work.
.container {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
.box.right-item {
background: red;
width: 200px;
position: relative;
left: 100px;
}
.box.left {
background: blue;
width: 200px;
height: 20px;
position: relative;
left: 100px;
}
<div class="container">
<div class="box left">
xx
</div>
<div class="box right-item">
yy
</div>
</div>
Although your question is not quite clear, here is what I make from your question -
If you are trying to center things inside your blue-box on left, you will have to add display properties for that container too. Here I am using flexbox as you might be familiar with it.
the modified class will be like this -
.box.left {
background: blue;
width: 200px;
display: flex;
justify-content: center;
}
You don't need to add flex-direction as it is by default row.
You can run the following snippet below to check out
.container {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.box.right-item {
background: red;
width: 200px;
}
.box.left {
background: blue;
width: 200px;
display: flex;
justify-content: center;
}
<div class="container">
<div class="box left">
xx
</div>
<div class="box right-item">
yy
</div>
</div>
This question already has answers here:
How to make an element width: 100% minus padding?
(15 answers)
Closed 4 years ago.
How to avoid a horizontal overflow inside flex column? For instance I have the following markup:
.container {
display: flex;
}
.left, .right {
height: 300px;
}
.left {
flex: 0 0 300px;
background-color: pink;
}
.right {
flex: 1 0;
background-color: lightblue;
}
.inner-container{
padding-left: 16px;
padding-right: 16px;
width: 100%;
/*for testing purpose*/
display: flex;
justify-content: center;
align-items: center;
height: 100%;
}
<div class="container">
<div class="left"></div>
<div class="right">
<div class="inner-container">
Inner container
</div>
</div>
</div>
As you can see there are two items inside flex container: a left one is 300px width and a right one that takes all remaining space inside container. And if I'm going to add another fullwidth container inside right flex column it causes horizontal overflow. How to prevent this behavior? Thank you.
Add box-sizing: border-box to .inner-container.
.container {
display: flex;
}
.left,
.right {
height: 300px;
}
.left {
flex: 0 0 300px;
background-color: pink;
}
.right {
flex: 1 0;
background-color: lightblue;
}
.inner-container {
padding-left: 16px;
padding-right: 16px;
width: 100%;
/*for testing purpose*/
display: flex;
justify-content: center;
align-items: center;
height: 100%;
box-sizing: border-box; /* NEW */
}
<div class="container">
<div class="left"></div>
<div class="right">
<div class="inner-container">
Inner container
</div>
</div>
</div>
This question already has answers here:
Center and bottom-align flex items
(3 answers)
Closed 5 years ago.
I'm trying to get one flex item to be centered vertically and horizontally.
I'd like for some text to be fixed to the bottom of the flex container.
margin-top:auto on the text just shoves the inner box to the top. Ideas?
.container {
background: lightblue;
width: 300px;
height: 300px;
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
padding: 10px;
}
.container .box {
background: goldenrod;
height: 30px;
width: 30px;
}
<div class="container">
<div class="box"></div>
<span>Text</span>
</div>
Here's the codepen.
Try the below instead:
.box {
background:goldenrod;
height: 30px;
width: 30px;
margin: auto;
}
Here is one way of doing it.
Add position: relative to your .container CSS rule, and then use absolute positioning on .box to position the span to the bottom of the parent container.
You can center the text by allowing .box to have 100% width and then using text-align: center.
.container {
background: lightblue;
width: 300px;
height: 300px;
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
padding: 10px;
position: relative;
}
.box {
background: goldenrod;
height: 30px;
width: 30px;
}
span {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
text-align: center;
}
<div class="container">
<div class="box"></div>
<span>Text</span>
</div>
Since flexbox alignment involves the distribution of free space in the container, margin-top: auto won't work in this case because there's no counterweight on the other side.
Therefore, one method for centering the box and bottom-aligning the text involves creating a duplicate of the text element and placing it on the opposite side of the box. This will create a counterweight.
With equal balance on both ends, flex alignment properties (including auto margins) can work.
In this case, even justify-content: space-between would work.
Of course, you'll need to apply visibility: hidden to the duplicate element.
.container {
background: lightblue;
width: 300px;
height: 300px;
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
padding: 10px;
}
.box {
background: goldenrod;
height: 30px;
width: 30px;
margin: auto 0; /* or instead use justify-content: space-between on .container */
}
span:first-child {
visibility: hidden;
}
<div class="container">
<span>Text</span>
<div class="box"></div>
<span>Text</span>
</div>
OR, instead of a duplicate element, use a pseudo-element.
A less intrusive and more semantically proper method would use a pseudo-element as the duplicate. However, for this method to work, you would need to know the height of the actual element, because you would need to match it precisely.
Something like this will work to create equal balance:
.container::before {
content: "";
height: 15px; /* must match actual element's height */
}
.container {
background: lightblue;
width: 300px;
height: 300px;
display: flex;
justify-content: space-between;
flex-direction: column;
align-items: center;
padding: 10px;
}
.box {
background: goldenrod;
height: 30px;
width: 30px;
}
span {
height: 15px;
}
.container::before {
content: "";
height: 15px;
}
<div class="container">
<div class="box"></div>
<span>Text</span>
</div>