Why does flex-direction: column and align-items: center; not position vertically? [duplicate]
up vote
0
down vote
favorite
This question already has an answer here:
In CSS Flexbox, why are there no “justify-items” and “justify-self” properties?
5 answers
I have a form that I want to move down using align-items:center property. This form is inside a parent wrapper div and has the id of left. As align items is used to position vertically, why does the left div stick to the top and not move down to the center?
To make it clear what I expect to happen, I have included an image
https://twitter.com/yama_code/status/1061751980400488449
The left div has the following properties
display:flex;
flex-direction:column;
flex:1;
align-items:center;
height:100vh;
javascript css css3 flexbox grid
edited Nov 12 at 1:49
Michael_B
143k46225336
asked Nov 12 at 1:17
lana
71128
marked as duplicate by Obsidian Age, Dacre Denny, Michael_B css
Users with the css badge can single-handedly close css questions as duplicates and reopen them as needed.
StackExchange.ready(function() {
if (StackExchange.options.isMobile) return;
$('.dupe-hammer-message-hover:not(.hover-bound)').each(function() {
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');
$hover.hover(
function() {
$hover.showInfoMessage('', {
messageElement: $msg.clone().show(),
transient: false,
position: { my: 'bottom left', at: 'top center', offsetTop: -7 },
dismissable: false,
relativeToBody: true
});
},
function() {
StackExchange.helpers.removeMessages();
}
);
});
});
Nov 12 at 1:49
This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.
add a comment |
up vote
0
down vote
favorite
This question already has an answer here:
In CSS Flexbox, why are there no “justify-items” and “justify-self” properties?
5 answers
I have a form that I want to move down using align-items:center property. This form is inside a parent wrapper div and has the id of left. As align items is used to position vertically, why does the left div stick to the top and not move down to the center?
To make it clear what I expect to happen, I have included an image
https://twitter.com/yama_code/status/1061751980400488449
The left div has the following properties
display:flex;
flex-direction:column;
flex:1;
align-items:center;
height:100vh;
javascript css css3 flexbox grid
edited Nov 12 at 1:49
Michael_B
143k46225336
asked Nov 12 at 1:17
lana
71128
marked as duplicate by Obsidian Age, Dacre Denny, Michael_B css
Users with the css badge can single-handedly close css questions as duplicates and reopen them as needed.
StackExchange.ready(function() {
if (StackExchange.options.isMobile) return;
$('.dupe-hammer-message-hover:not(.hover-bound)').each(function() {
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');
$hover.hover(
function() {
$hover.showInfoMessage('', {
messageElement: $msg.clone().show(),
transient: false,
position: { my: 'bottom left', at: 'top center', offsetTop: -7 },
dismissable: false,
relativeToBody: true
});
},
function() {
StackExchange.helpers.removeMessages();
}
);
});
});
Nov 12 at 1:49
This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.
2
please include the enclosing HTML, and any other CSS that may affect the rendered result
– Dacre Denny
Nov 12 at 1:21
In order for us to help you better, can you please update your question so that it shows all of your relevant code and details any failed attempts made so far in a minimal, complete, and verifiable example, along with clearly stating what your desired result is. For further information, please refer to the help article regarding how to ask good questions.
– Obsidian Age
Nov 12 at 1:22
twitter.com/yama_code/status/1061751980400488449
– lana
Nov 12 at 1:27
"As align-items is used to position vertically..." That was your mistake.
– Michael_B
Nov 12 at 1:47
add a comment |
up vote
0
down vote
favorite
up vote
0
down vote
favorite
This question already has an answer here:
In CSS Flexbox, why are there no “justify-items” and “justify-self” properties?
5 answers
I have a form that I want to move down using align-items:center property. This form is inside a parent wrapper div and has the id of left. As align items is used to position vertically, why does the left div stick to the top and not move down to the center?
To make it clear what I expect to happen, I have included an image
https://twitter.com/yama_code/status/1061751980400488449
The left div has the following properties
display:flex;
flex-direction:column;
flex:1;
align-items:center;
height:100vh;
javascript css css3 flexbox grid
edited Nov 12 at 1:49
Michael_B
143k46225336
asked Nov 12 at 1:17
lana
71128
This question already has an answer here:
In CSS Flexbox, why are there no “justify-items” and “justify-self” properties?
5 answers
I have a form that I want to move down using align-items:center property. This form is inside a parent wrapper div and has the id of left. As align items is used to position vertically, why does the left div stick to the top and not move down to the center?
To make it clear what I expect to happen, I have included an image
https://twitter.com/yama_code/status/1061751980400488449
The left div has the following properties
display:flex;
flex-direction:column;
flex:1;
align-items:center;
height:100vh;
This question already has an answer here:
In CSS Flexbox, why are there no “justify-items” and “justify-self” properties?
5 answers
javascript css css3 flexbox grid
javascript css css3 flexbox grid
edited Nov 12 at 1:49
Michael_B
143k46225336
asked Nov 12 at 1:17
lana
71128
edited Nov 12 at 1:49
Michael_B
143k46225336
asked Nov 12 at 1:17
lana
71128
edited Nov 12 at 1:49
Michael_B
143k46225336
edited Nov 12 at 1:49
Michael_B
143k46225336
edited Nov 12 at 1:49
Michael_B
143k46225336
143k46225336
asked Nov 12 at 1:17
lana
71128
asked Nov 12 at 1:17
lana
71128
asked Nov 12 at 1:17
lana
71128
71128
marked as duplicate by Obsidian Age, Dacre Denny, Michael_B css
Users with the css badge can single-handedly close css questions as duplicates and reopen them as needed.
StackExchange.ready(function() {
if (StackExchange.options.isMobile) return;
$('.dupe-hammer-message-hover:not(.hover-bound)').each(function() {
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');
$hover.hover(
function() {
$hover.showInfoMessage('', {
messageElement: $msg.clone().show(),
transient: false,
position: { my: 'bottom left', at: 'top center', offsetTop: -7 },
dismissable: false,
relativeToBody: true
});
},
function() {
StackExchange.helpers.removeMessages();
}
);
});
});
Nov 12 at 1:49
This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.
marked as duplicate by Obsidian Age, Dacre Denny, Michael_B css
Users with the css badge can single-handedly close css questions as duplicates and reopen them as needed.
StackExchange.ready(function() {
if (StackExchange.options.isMobile) return;
$('.dupe-hammer-message-hover:not(.hover-bound)').each(function() {
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');
$hover.hover(
function() {
$hover.showInfoMessage('', {
messageElement: $msg.clone().show(),
transient: false,
position: { my: 'bottom left', at: 'top center', offsetTop: -7 },
dismissable: false,
relativeToBody: true
});
},
function() {
StackExchange.helpers.removeMessages();
}
);
});
});
Nov 12 at 1:49
This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.
2
please include the enclosing HTML, and any other CSS that may affect the rendered result
– Dacre Denny
Nov 12 at 1:21
In order for us to help you better, can you please update your question so that it shows all of your relevant code and details any failed attempts made so far in a minimal, complete, and verifiable example, along with clearly stating what your desired result is. For further information, please refer to the help article regarding how to ask good questions.
– Obsidian Age
Nov 12 at 1:22
twitter.com/yama_code/status/1061751980400488449
– lana
Nov 12 at 1:27
"As align-items is used to position vertically..." That was your mistake.
– Michael_B
Nov 12 at 1:47
add a comment |
2
please include the enclosing HTML, and any other CSS that may affect the rendered result
– Dacre Denny
Nov 12 at 1:21
In order for us to help you better, can you please update your question so that it shows all of your relevant code and details any failed attempts made so far in a minimal, complete, and verifiable example, along with clearly stating what your desired result is. For further information, please refer to the help article regarding how to ask good questions.
– Obsidian Age
Nov 12 at 1:22
twitter.com/yama_code/status/1061751980400488449
– lana
Nov 12 at 1:27
"As align-items is used to position vertically..." That was your mistake.
– Michael_B
Nov 12 at 1:47
2
2
please include the enclosing HTML, and any other CSS that may affect the rendered result
– Dacre Denny
Nov 12 at 1:21
please include the enclosing HTML, and any other CSS that may affect the rendered result
– Dacre Denny
Nov 12 at 1:21
In order for us to help you better, can you please update your question so that it shows all of your relevant code and details any failed attempts made so far in a minimal, complete, and verifiable example, along with clearly stating what your desired result is. For further information, please refer to the help article regarding how to ask good questions.
– Obsidian Age
Nov 12 at 1:22
In order for us to help you better, can you please update your question so that it shows all of your relevant code and details any failed attempts made so far in a minimal, complete, and verifiable example, along with clearly stating what your desired result is. For further information, please refer to the help article regarding how to ask good questions.
– Obsidian Age
Nov 12 at 1:22
twitter.com/yama_code/status/1061751980400488449
– lana
Nov 12 at 1:27
twitter.com/yama_code/status/1061751980400488449
– lana
Nov 12 at 1:27
"As align-items is used to position vertically..." That was your mistake.
– Michael_B
Nov 12 at 1:47
"As align-items is used to position vertically..." That was your mistake.
– Michael_B
Nov 12 at 1:47
add a comment |
1 Answer
1
active
oldest
votes
up vote
0
down vote
The reason is because align-items affects the child elements, or the elements within the flex container.
Try instead putting the element you wish to be centre-aligned inside of a parent with #left's properties.
answered Nov 12 at 1:38
Frish
814313
add a comment |
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
0
down vote
The reason is because align-items affects the child elements, or the elements within the flex container.
Try instead putting the element you wish to be centre-aligned inside of a parent with #left's properties.
answered Nov 12 at 1:38
Frish
814313
add a comment |
up vote
0
down vote
The reason is because align-items affects the child elements, or the elements within the flex container.
Try instead putting the element you wish to be centre-aligned inside of a parent with #left's properties.
answered Nov 12 at 1:38
Frish
814313
add a comment |
up vote
0
down vote
up vote
0
down vote
The reason is because align-items affects the child elements, or the elements within the flex container.
Try instead putting the element you wish to be centre-aligned inside of a parent with #left's properties.
answered Nov 12 at 1:38
Frish
814313
The reason is because align-items affects the child elements, or the elements within the flex container.
Try instead putting the element you wish to be centre-aligned inside of a parent with #left's properties.
answered Nov 12 at 1:38
Frish
814313
answered Nov 12 at 1:38
Frish
814313
answered Nov 12 at 1:38
Frish
814313
answered Nov 12 at 1:38
Frish
814313
814313
add a comment |
add a comment |
2
please include the enclosing HTML, and any other CSS that may affect the rendered result
– Dacre Denny
Nov 12 at 1:21
In order for us to help you better, can you please update your question so that it shows all of your relevant code and details any failed attempts made so far in a minimal, complete, and verifiable example, along with clearly stating what your desired result is. For further information, please refer to the help article regarding how to ask good questions.
– Obsidian Age
Nov 12 at 1:22
twitter.com/yama_code/status/1061751980400488449
– lana
Nov 12 at 1:27
"As align-items is used to position vertically..." That was your mistake.
– Michael_B
Nov 12 at 1:47