This question already has answers here:
How does flex-wrap work with align-self, align-items and align-content?
(2 answers)
Closed 5 years ago.
In my application the number of items in a flex container is variable, and I want them to be both vertically and horizontally centred. I'm doing this by using justify-content for horizontal centring, and align-content for vertical centring.
However, reading from CSS Tricks' almanac states the following:
Note, this property has no effect when the flexbox has only a single line.
This becomes quickly apparent in my application. While there aren't enough items to wrap onto another line, vertical centring from align-content doesn't work at all.
As soon as a second line of content appears, align-content kicks in and works as expected.
I'm sure there's a reason for this behaviour, however in my case the result is an inconsistent user experience.
I know that I can achieve vertical centring by other means, for instance by wrapping the entire container in another flexbox, or a table, and applying vertical centring there. However, I feel like there should be a better way?
Is there some other flexbox option I'm missing that would solve this problem without introducing more HTML elements? If so, what is that option? :P
Based on the given facts, you should use align-items instead of align-content
Notes:
align-content works on multi line flexboxes, very well described here: Whats the difference between align-content and align-items
Based on the flex direction, justify-content and align-items alignment direction changes
Column-based
.flex {
display: flex;
flex-direction: column;
justify-content: center; /* center vertical */
align-items: center; /* center horizontal */
height: 250px;
border: 1px solid gray
}
.flex * {
margin-bottom: 0; /* removed margin at one side since they
doesn't collapse when flexbox is used */
}
<div class="flex">
<h1>Hey</h1>
<p>How are</p>
<p>we doing</p>
</div>
Row-based
.flex {
display: flex;
justify-content: center; /* center horizontal */
align-items: center; /* center vertical */
height: 250px;
border: 1px solid gray
}
<div class="flex">
<h1>Hey </h1>
<p>How are </p>
<p>we doing</p>
</div>
Using align-items & justify-content together will vertically and horizontally center a single item:
align-items:center; justify-content:center
See fiddle: https://jsfiddle.net/p8zk4bkk/
Related
What is the difference between align-items and align-content?
The align-items property of flex-box aligns the items inside a flex container along the cross axis just like justify-content does along the main axis. (For the default flex-direction: row the cross axis corresponds to vertical and the main axis corresponds to horizontal. With flex-direction: column those two are interchanged respectively).
Here's an example of how align-items:center looks:
But align-content is for multi line flexible boxes. It has no effect when items are in a single line. It aligns the whole structure according to its value. Here's an example for align-content: space-around;:
And here's how align-content: space-around; with align-items:center looks:
Note the 3rd box and all other boxes in first line change to vertically centered in that line.
Here are some codepen links to play with:
http://codepen.io/asim-coder/pen/MKQWbb
http://codepen.io/asim-coder/pen/WrMNWR
Here's a super cool pen which shows and lets you play with almost everything in flexbox.
From the example at flexboxfroggy.com:
It will take you 10-20 minutes and at level 21 you will find the answer to your question.
align-content determines the spacing between lines
align-items determines how the items as a whole are aligned within the container.
When there is only one line, align-content has no effect
First, align-items is for items in a single row. So for a single row of elements on main axis, align-items will align these items respective of each other and it will start with fresh perspective from the next row.
Now, align-content doesn't interfere with items in a row but with rows itself. Hence, align-content will try to align rows with respect to each other and flex container.
Check this fiddle : https://jsfiddle.net/htym5zkn/8/
I had the same confusion. After some tinkering based on many of the answers above, I can finally see the differences. In my humble opinion, the distinction is best demonstrated with a flex container that satisfies the following two conditions:
The flex container itself has a height constraint (e.g., min-height: 60rem) and thus can become too tall for its content
The child items enclosed in the container have uneven heights
Condition 1 helps me understand what content means relative to its parent container. When the content is flush with the container, we will not be able to see any positioning effects coming from align-content. It is only when we have extra space along the cross axis, we start to see its effect: It aligns the content relative to the boundaries of the parent container.
Condition 2 helps me visualize the effects of align-items: it aligns items relative to each other.
Here is a code example. Raw materials come from Wes Bos' CSS Grid tutorial (21. Flexbox vs. CSS Grid)
Example HTML:
<div class="flex-container">
<div class="item">Short</div>
<div class="item">Longerrrrrrrrrrrrrr</div>
<div class="item">💩</div>
<div class="item" id="tall">This is Many Words</div>
<div class="item">Lorem, ipsum.</div>
<div class="item">10</div>
<div class="item">Snickers</div>
<div class="item">Wes Is Cool</div>
<div class="item">Short</div>
</div>
Example CSS:
.flex-container {
display: flex;
/*dictates a min-height*/
min-height: 60rem;
flex-flow: row wrap;
border: 5px solid white;
justify-content: center;
align-items: center;
align-content: flex-start;
}
#tall {
/*intentionally made tall*/
min-height: 30rem;
}
.item {
margin: 10px;
max-height: 10rem;
}
Example 1: Let's narrow the viewport so that the content is flush with the container. This is when align-content: flex-start; has no effects since the entire content block is tightly fit inside the container (no extra room for repositioning!)
Also, note the 2nd row--see how the items are center aligned among themselves.
Example 2: As we widen the viewport, we no longer have enough content to fill the entire container. Now we start to see the effects of align-content: flex-start;--it aligns the content relative to the top edge of the container.
These examples are based on flexbox, but the same principles are applicable to CSS grid. Hope this helps :)
The effect of both align-items and align-content is along the cross-axis.
Let say if flex-direction is row then the main axis is Left to Right and if flex-direction is column then the main axis is from top to bottom.
So In the below examples, we gonna assume that flex-direction is row i.e. main axis is from Left to Right and cross-axis is from top to bottom.
align-content only works if there is flex-wrap: wrap and if there is more than one flex-line in container.
align-content has higher priority than align-items if there are multiple flex-line.
What is flex-line?
Each row or column of flex items in a flex container is a flex line. Multiple lines occur when there is not enough space in a container and flex-items would take the next line(in flex-direction: row;) to fit in. In flex-direction: column it will add flex items to next line.
example
By default, the flex is a flexible container i.e. it can accommodate any number of elements unless we have specified flex-wrap: wrap. Without wrap, flex-items will overflow the container(if flex-direction is row).
align-content example
.container{
border: 5px solid #000;
height: 100vh;
display: flex;
flex-wrap: wrap;
align-content: flex-end;
}
.box{
height:100px;
font-size: 2rem;
width: 33.33%;
}
.box1{
background: purple;
}
.box2{
background: #ff8c00;
}
.box3{
background: lime;
}
.box4{
background: #008080;
}
.box5{
background-color: red;
}
<div class="container">
<div class="box box1">box 1</div>
<div class="box box2">box 2</div>
<div class="box box3">box 3</div>
<div class="box box4">box 4</div>
<div class="box box5">box 5</div>
</div>
In the above example, If there would have been flex-wrap: no-wrap then align-content doesn't affect our layout.
align-items example
The align-items property determines how flex items are positioned within a flex line, along the cross-axis.
.container{
border: 5px solid #000;
height: 100vh;
display: flex;
flex-wrap: wrap;
align-items: flex-end;
}
.box{
height:100px;
font-size: 2rem;
width: 33.33%;
}
.box1{
background: purple;
}
.box2{
background: #ff8c00;
}
.box3{
background: lime;
}
.box4{
background: #008080;
}
.box5{
background-color: red;
}
<div class="container">
<div class="box box1">box 1</div>
<div class="box box2">box 2</div>
<div class="box box3">box 3</div>
<div class="box box4">box 4</div>
<div class="box box5">box 5</div>
</div>
If align-content and align-items are declared on a container with properties flex-wrap: wrap and if there are more than flex-line then align-content property has higher priority than align-items.
align-content and align-items priority example
.container{
border: 5px solid #000;
height: 100vh;
display: flex;
flex-wrap: wrap;
align-content: flex-end;
align-items: flex-start;
}
.box{
height:100px;
font-size: 2rem;
width: 33.33%;
}
.box1{
background: purple;
}
.box2{
background: #ff8c00;
}
.box3{
background: lime;
}
.box4{
background: #008080;
}
.box5{
background-color: red;
}
<div class="container">
<div class="box box1">box 1</div>
<div class="box box2">box 2</div>
<div class="box box3">box 3</div>
<div class="box box4">box 4</div>
<div class="box box5">box 5</div>
</div>
Well I have examined them on my browser.
align-content can change a line's height for row direction or width for column when it's value is stretch, or add empty space between or around the lines for space-between, space-around, flex-start, flex-end values.
align-items can change items height or position inside the line's area. When items are not wrapped they have only one line which it's area is always stretched to the flex-box area (even if the items overflow), and align-content has no effect on a single line. So it has no effect on items that are not wrapped and only align-items can change items position or stretch them when all of them are on a single line.
However, if they are wrapped you have multiple lines and items inside each line. And if all items of each line have the same height (for row direction) that line's height will be equal to those items height and you don't see any effect by changing align-items value.
So if you want to affect items by align-items when your items are wrapped and have the same height (for row direction) first you have to use align-content with stretch value in order to expand the lines area.
Having read some of the answers, they identify correctly that align-content takes no affect if the flex content is not wrapped. However what they don't understand is align-items still plays an important role when there is wrapped content:
In the following two examples, align-items is used to center the items within each row, then we change align-content to see it's effect.
Example 1:
align-content: flex-start;
Example 2:
align-content: flex-end;
Here's the code:
<div class="container">
<div class="child" style="height: 30px;">1</div>
<div class="child" style="height: 50px;">2</div>
<div class="child" style="height: 60px;">3</div>
<div class="child" style="height: 40px;">4</div>
<div class="child" style="height: 50px;">5</div>
<div class="child" style="height: 20px;">6</div>
<div class="child" style="height: 90px;">7</div>
<div class="child" style="height: 50px;">8</div>
<div class="child" style="height: 30px;">9</div>
<div class="child" style="height: 40px;">10</div>
<div class="child" style="height: 30px;">11</div>
<div class="child" style="height: 60px;">12</div>
</div>
<style>
.container {
display: flex;
width: 300px;
flex-flow: row wrap;
justify-content: space-between;
align-items: center;
align-content: flex-end;
background: lightgray;
height: 400px;
}
.child {
padding: 12px;
background: red;
border: solid 1px black;
}
</style>
align-content
align-content controls the cross-axis (i.e. vertical direction if the flex-direction is row, and horizontal if the flex-direction is column) positioning of multiple lines relative to each other.
(Think lines of a paragraph being vertically spread out, stacked toward the top, stacked toward the bottom. This is under a flex-direction row paradigm).
align-items
align-items controls the cross-axis of an individual line of flex elements.
(Think how an individual line of a paragraph is aligned, if it contains some normal text and some taller text like math equations. In that case, will it be the bottom, top, or center of each type of text in a line that will be aligned?)
align-items spreads the child elements vertically with space between them.
align-content bunches them together as if they were one element.
(if the flex-direction is column)
What I have learned from every answer and visiting the blog is
what is the cross axis and main axis
main axis is horizontal row and cross axis is vertical column - for flex-direction: row
main axis is vertical column and cross axis is horizontal row - for flex-direction: column
Now align-content and align-items
align-content is for the row, it works if the container has (more than one row)
Properties of align-content
.container {
align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | start | end | baseline | first baseline | last baseline + ... safe | unsafe;
}
align-items is for the items in row
Properties of align-items
.container {
align-items: stretch | flex-start | flex-end | center | baseline | first baseline | last baseline | start | end | self-start | self-end + ... safe | unsafe;
}
For more reference visit to flex
The key property is flex-wrap. When nowrap (or when there is no extra space in the cross axis), align-content has no effect. When wrap or wrap-reverse, it has always an effect (regardless of the line count) if there is extra space in the cross axis.
Compare these four boxes:
while align-items would centre as a single line of text both horizontally and vertically inside a container , align-content would behave as if there were multiple lines of text,or a paragraph, and start from top aligning even a single line of text as if it were paragraph which has been given a text-align: center rule.
This is the result we get from
align-content:center;
First Part
align-items applies to single line of boxes only. Suppose there are 4 boxes in a single line inside the container. then align-items will be applied to align those boxes in a single line. If flex-direction is row (which is default) then align-items will arrange the boxes vertically, if its column then arrange the boxes horizontally.
Second Part
Continuing with the above single line of boxes, if we add one more line of 4 boxes, now there are 8 boxes, 4 in each line. Here align-content comes into picture, if we apply align-content to the container, it will be applied to both lines having total of 8 boxes. If we apply align-content:center, it will center both lines in a container. In that sense align-content is used to arrange multi line flexible boxes.
align-items: center, align-content: flex-start
The main difference is when the height of the elements are not the same!
Then you can see how in the row, they are all center\end\start
according to what I understood from here:
when you use align-item or justify-item, you are adjusting "the content inside a grid item along the column axis or row axis respectively.
But:
if you use align-content or justify-content, you are setting the position a grid along the column axis or the row axis. it occurs when you have a grid in a bigger container and width or height are inflexible (using px).
What is the difference between align-items and align-content?
The align-items property of flex-box aligns the items inside a flex container along the cross axis just like justify-content does along the main axis. (For the default flex-direction: row the cross axis corresponds to vertical and the main axis corresponds to horizontal. With flex-direction: column those two are interchanged respectively).
Here's an example of how align-items:center looks:
But align-content is for multi line flexible boxes. It has no effect when items are in a single line. It aligns the whole structure according to its value. Here's an example for align-content: space-around;:
And here's how align-content: space-around; with align-items:center looks:
Note the 3rd box and all other boxes in first line change to vertically centered in that line.
Here are some codepen links to play with:
http://codepen.io/asim-coder/pen/MKQWbb
http://codepen.io/asim-coder/pen/WrMNWR
Here's a super cool pen which shows and lets you play with almost everything in flexbox.
From the example at flexboxfroggy.com:
It will take you 10-20 minutes and at level 21 you will find the answer to your question.
align-content determines the spacing between lines
align-items determines how the items as a whole are aligned within the container.
When there is only one line, align-content has no effect
First, align-items is for items in a single row. So for a single row of elements on main axis, align-items will align these items respective of each other and it will start with fresh perspective from the next row.
Now, align-content doesn't interfere with items in a row but with rows itself. Hence, align-content will try to align rows with respect to each other and flex container.
Check this fiddle : https://jsfiddle.net/htym5zkn/8/
I had the same confusion. After some tinkering based on many of the answers above, I can finally see the differences. In my humble opinion, the distinction is best demonstrated with a flex container that satisfies the following two conditions:
The flex container itself has a height constraint (e.g., min-height: 60rem) and thus can become too tall for its content
The child items enclosed in the container have uneven heights
Condition 1 helps me understand what content means relative to its parent container. When the content is flush with the container, we will not be able to see any positioning effects coming from align-content. It is only when we have extra space along the cross axis, we start to see its effect: It aligns the content relative to the boundaries of the parent container.
Condition 2 helps me visualize the effects of align-items: it aligns items relative to each other.
Here is a code example. Raw materials come from Wes Bos' CSS Grid tutorial (21. Flexbox vs. CSS Grid)
Example HTML:
<div class="flex-container">
<div class="item">Short</div>
<div class="item">Longerrrrrrrrrrrrrr</div>
<div class="item">💩</div>
<div class="item" id="tall">This is Many Words</div>
<div class="item">Lorem, ipsum.</div>
<div class="item">10</div>
<div class="item">Snickers</div>
<div class="item">Wes Is Cool</div>
<div class="item">Short</div>
</div>
Example CSS:
.flex-container {
display: flex;
/*dictates a min-height*/
min-height: 60rem;
flex-flow: row wrap;
border: 5px solid white;
justify-content: center;
align-items: center;
align-content: flex-start;
}
#tall {
/*intentionally made tall*/
min-height: 30rem;
}
.item {
margin: 10px;
max-height: 10rem;
}
Example 1: Let's narrow the viewport so that the content is flush with the container. This is when align-content: flex-start; has no effects since the entire content block is tightly fit inside the container (no extra room for repositioning!)
Also, note the 2nd row--see how the items are center aligned among themselves.
Example 2: As we widen the viewport, we no longer have enough content to fill the entire container. Now we start to see the effects of align-content: flex-start;--it aligns the content relative to the top edge of the container.
These examples are based on flexbox, but the same principles are applicable to CSS grid. Hope this helps :)
The effect of both align-items and align-content is along the cross-axis.
Let say if flex-direction is row then the main axis is Left to Right and if flex-direction is column then the main axis is from top to bottom.
So In the below examples, we gonna assume that flex-direction is row i.e. main axis is from Left to Right and cross-axis is from top to bottom.
align-content only works if there is flex-wrap: wrap and if there is more than one flex-line in container.
align-content has higher priority than align-items if there are multiple flex-line.
What is flex-line?
Each row or column of flex items in a flex container is a flex line. Multiple lines occur when there is not enough space in a container and flex-items would take the next line(in flex-direction: row;) to fit in. In flex-direction: column it will add flex items to next line.
example
By default, the flex is a flexible container i.e. it can accommodate any number of elements unless we have specified flex-wrap: wrap. Without wrap, flex-items will overflow the container(if flex-direction is row).
align-content example
.container{
border: 5px solid #000;
height: 100vh;
display: flex;
flex-wrap: wrap;
align-content: flex-end;
}
.box{
height:100px;
font-size: 2rem;
width: 33.33%;
}
.box1{
background: purple;
}
.box2{
background: #ff8c00;
}
.box3{
background: lime;
}
.box4{
background: #008080;
}
.box5{
background-color: red;
}
<div class="container">
<div class="box box1">box 1</div>
<div class="box box2">box 2</div>
<div class="box box3">box 3</div>
<div class="box box4">box 4</div>
<div class="box box5">box 5</div>
</div>
In the above example, If there would have been flex-wrap: no-wrap then align-content doesn't affect our layout.
align-items example
The align-items property determines how flex items are positioned within a flex line, along the cross-axis.
.container{
border: 5px solid #000;
height: 100vh;
display: flex;
flex-wrap: wrap;
align-items: flex-end;
}
.box{
height:100px;
font-size: 2rem;
width: 33.33%;
}
.box1{
background: purple;
}
.box2{
background: #ff8c00;
}
.box3{
background: lime;
}
.box4{
background: #008080;
}
.box5{
background-color: red;
}
<div class="container">
<div class="box box1">box 1</div>
<div class="box box2">box 2</div>
<div class="box box3">box 3</div>
<div class="box box4">box 4</div>
<div class="box box5">box 5</div>
</div>
If align-content and align-items are declared on a container with properties flex-wrap: wrap and if there are more than flex-line then align-content property has higher priority than align-items.
align-content and align-items priority example
.container{
border: 5px solid #000;
height: 100vh;
display: flex;
flex-wrap: wrap;
align-content: flex-end;
align-items: flex-start;
}
.box{
height:100px;
font-size: 2rem;
width: 33.33%;
}
.box1{
background: purple;
}
.box2{
background: #ff8c00;
}
.box3{
background: lime;
}
.box4{
background: #008080;
}
.box5{
background-color: red;
}
<div class="container">
<div class="box box1">box 1</div>
<div class="box box2">box 2</div>
<div class="box box3">box 3</div>
<div class="box box4">box 4</div>
<div class="box box5">box 5</div>
</div>
Well I have examined them on my browser.
align-content can change a line's height for row direction or width for column when it's value is stretch, or add empty space between or around the lines for space-between, space-around, flex-start, flex-end values.
align-items can change items height or position inside the line's area. When items are not wrapped they have only one line which it's area is always stretched to the flex-box area (even if the items overflow), and align-content has no effect on a single line. So it has no effect on items that are not wrapped and only align-items can change items position or stretch them when all of them are on a single line.
However, if they are wrapped you have multiple lines and items inside each line. And if all items of each line have the same height (for row direction) that line's height will be equal to those items height and you don't see any effect by changing align-items value.
So if you want to affect items by align-items when your items are wrapped and have the same height (for row direction) first you have to use align-content with stretch value in order to expand the lines area.
Having read some of the answers, they identify correctly that align-content takes no affect if the flex content is not wrapped. However what they don't understand is align-items still plays an important role when there is wrapped content:
In the following two examples, align-items is used to center the items within each row, then we change align-content to see it's effect.
Example 1:
align-content: flex-start;
Example 2:
align-content: flex-end;
Here's the code:
<div class="container">
<div class="child" style="height: 30px;">1</div>
<div class="child" style="height: 50px;">2</div>
<div class="child" style="height: 60px;">3</div>
<div class="child" style="height: 40px;">4</div>
<div class="child" style="height: 50px;">5</div>
<div class="child" style="height: 20px;">6</div>
<div class="child" style="height: 90px;">7</div>
<div class="child" style="height: 50px;">8</div>
<div class="child" style="height: 30px;">9</div>
<div class="child" style="height: 40px;">10</div>
<div class="child" style="height: 30px;">11</div>
<div class="child" style="height: 60px;">12</div>
</div>
<style>
.container {
display: flex;
width: 300px;
flex-flow: row wrap;
justify-content: space-between;
align-items: center;
align-content: flex-end;
background: lightgray;
height: 400px;
}
.child {
padding: 12px;
background: red;
border: solid 1px black;
}
</style>
align-content
align-content controls the cross-axis (i.e. vertical direction if the flex-direction is row, and horizontal if the flex-direction is column) positioning of multiple lines relative to each other.
(Think lines of a paragraph being vertically spread out, stacked toward the top, stacked toward the bottom. This is under a flex-direction row paradigm).
align-items
align-items controls the cross-axis of an individual line of flex elements.
(Think how an individual line of a paragraph is aligned, if it contains some normal text and some taller text like math equations. In that case, will it be the bottom, top, or center of each type of text in a line that will be aligned?)
align-items spreads the child elements vertically with space between them.
align-content bunches them together as if they were one element.
(if the flex-direction is column)
What I have learned from every answer and visiting the blog is
what is the cross axis and main axis
main axis is horizontal row and cross axis is vertical column - for flex-direction: row
main axis is vertical column and cross axis is horizontal row - for flex-direction: column
Now align-content and align-items
align-content is for the row, it works if the container has (more than one row)
Properties of align-content
.container {
align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | start | end | baseline | first baseline | last baseline + ... safe | unsafe;
}
align-items is for the items in row
Properties of align-items
.container {
align-items: stretch | flex-start | flex-end | center | baseline | first baseline | last baseline | start | end | self-start | self-end + ... safe | unsafe;
}
For more reference visit to flex
The key property is flex-wrap. When nowrap (or when there is no extra space in the cross axis), align-content has no effect. When wrap or wrap-reverse, it has always an effect (regardless of the line count) if there is extra space in the cross axis.
Compare these four boxes:
while align-items would centre as a single line of text both horizontally and vertically inside a container , align-content would behave as if there were multiple lines of text,or a paragraph, and start from top aligning even a single line of text as if it were paragraph which has been given a text-align: center rule.
This is the result we get from
align-content:center;
First Part
align-items applies to single line of boxes only. Suppose there are 4 boxes in a single line inside the container. then align-items will be applied to align those boxes in a single line. If flex-direction is row (which is default) then align-items will arrange the boxes vertically, if its column then arrange the boxes horizontally.
Second Part
Continuing with the above single line of boxes, if we add one more line of 4 boxes, now there are 8 boxes, 4 in each line. Here align-content comes into picture, if we apply align-content to the container, it will be applied to both lines having total of 8 boxes. If we apply align-content:center, it will center both lines in a container. In that sense align-content is used to arrange multi line flexible boxes.
align-items: center, align-content: flex-start
The main difference is when the height of the elements are not the same!
Then you can see how in the row, they are all center\end\start
according to what I understood from here:
when you use align-item or justify-item, you are adjusting "the content inside a grid item along the column axis or row axis respectively.
But:
if you use align-content or justify-content, you are setting the position a grid along the column axis or the row axis. it occurs when you have a grid in a bigger container and width or height are inflexible (using px).
This question already has answers here:
How can I vertically align elements in a div?
(28 answers)
Closed 6 years ago.
I have a div containing some content. It has a height of 31px and inside it, the button has smaller height.
<div class="headerAndButton">
<h3 class="h3">
Click the button to the right
<button>click me</button>
</h3>
</div>
I have another header that does not have a button in it.
<div class="headerAndButton">
<h3 class="h3">No button here, I only want to have this header have the same vertical alignment, height and margin as the other header</h3>
</div>
I want to vertically align the <h3> text within each div. I have tried to solve the problem with the following SCSS:
.headerAndButton {
margin-bottom: $space-300;
h3 {
min-height: 31px;
vertical-align: bottom;
button {
margin-left: $space
}
}
}
The vertical-align property has no visible effect. The text in the without the botton is top aligned. The text in the other is a bit lower. It also becomes top aligned if I remove the button.
How can I make this headers have the same vertical alignment? I am not good at CSS, so maybe there are completely different better ways to solve this.
You could use several methods to vertical align an element. For example you could use new display: flex methods:
display: flex;
justify-content: center;
flex-direction: column;
Example
If its no problem to position: absolute your element you could use
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
There is a quite good tutorial from CSS-Tricks, named Centering in CSS: A Complete Guide.
display: flex;
justify-content: center;
align-items: center;
just apply this CSS code on headerAndButton
You can use display:table-cell then vertical-align:middle to do that.
JS Fiddle
( I add a border so you can see the h3 is aligned )
I'm having a lot of trouble setting a div to appear under another div (like they do normally).
I'musing MaterializeCSS. My layout is as follows:
<div class="container valign-wrapper">
<div class="customClass"></div>
<div class="customClass"></div>
</div>
And css:
.valign-wrapper{
display: flex;
align-items: center;
}
.customClass{
margin: 0 auto;
/* text and font css */
}
However , even adding width:100% or changing display class won't make the two divs appear vertically, they appear side by side. I found out that removing valign-wrapper class will work, but my items will obviously appear at the top of the site...
If anyone has encountered the same problem I would appreciate the help!
You need to add the flex direction:
.valign-wrapper { flex-direction: column; }
That way, flex items are positioned as a column. Alternatively, if you need to go with flex-direction: row; (default), you can use
.valign-wrapper { flex-wrap: wrap; }
.customClass { flex-basis: 100%; }
to still maintain the row style but have your two items wrap and eventually positioned above each other.
Even though the post is from 2013, it still teaches the magic of flexbox in a nice way and I can just recommend everyone to read about it: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
The more I think about this the less feasible it seems, but I was wondering if there was a way to control a flex item's margin based on how it has been laid out in the flex flow.
A screenshot probably explains it best:
The 'captured pieces' divs are in a flex container, which is a sibling to the div with the move history in it. The captured pieces container, and the history, are themselves flex items in another container. Each captured pieces div has a 3px top margin, to space them out from each other and from the history.
The problem is when there is enough space to display the history div and the 'captured pieces' container side by side, as shown here by artificially shrinking the history div:
When they're side by side like this, the 3px top margin is unnecessary - I'd like the top of the 'opponent's captured pieces' to line up with the top of the history.
Is there any way to achieve this with CSS?
Here's the CSS for the relevant divs:
div.history_and_captured {
display: flex;
flex-wrap: wrap;
}
div.game_history {
flex-basis: 15em;
flex-grow: 1;
}
div.captured_pieces_container {
display: flex;
flex-direction: column;
justify-content: space-between;
flex-grow: 1;
}
And the HTML:
<div class="history_and_captured">
<div class="game_history" id="history">
<!--history widget is created dynamically-->
</div>
<div class="captured_pieces_container">
<div class="captured_pieces" id="captured_pieces_opponent">
opponent's captured pieces
</div>
<div class="captured_pieces" id="captured_pieces_player">
player's captured pieces
</div>
</div>
</div>