Im trying to make a simple card grid layout but i get weird spacing on the right of the layout, what i want its that the content is always centered with the same margin in both sides of the layout.
My code: https://stackblitz.com/edit/angular-9-material-starter-ps6mp7?file=src%2Fapp%2Fapp.component.html
The area in purple is the weird spacing
Try adding justify-content: center; align-items: center; to your content2 class
.content2 {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
Related
Here is the stackbliz show the issue:
https://stackblitz.com/edit/angular-addm8z-rng1eb?file=app/checkbox-overview-example.css
Image of the Issue
Expectation
You need to set the width to cb-wrapper.
i.e
.cb-wrapper
{
display: flex;
flex-direction: column;
align-items: flex-start;
width: 100px;
margin: auto;
}
I tried this to vertically center all items in a Jumbotron,
display: flex;
justify-content: center;
align-items: center;
But the issue is all items are lined up in a single line like they are displaying inline. How do you vertically center them while still displaying them in block.
Since block element stacks vertically, change the flex direction to column, and so will the flex items.
display: flex;
flex-direction: column; /* added */
justify-content: center;
align-items: center;
Adding to above answer, you can also center text elements such as h1, p or a by setting text-align to center.
display: flex;
flex-direction: column;
justify-content: center;
align-items: center; /* aligning items */
text-align: center; /* aligning text */
I am trying to vertically align my login screen. Here is my code in JS Fiddle and used the css
.flexbox-container {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-align: center;
-webkit-align-items: center;
-webkit-box-align: center;.
align-items: center;
}
I am not getting my items vertically centered. Will i wont be able to achieve it since i use bootstrap class to horizontal center.
Bootstrap 4
Bootstrap 4 is flexbox by default, and there are flexbox utility classes for centering and alignment. The align-items-center class will work to vertically center rows and columns.
Bootstrap 3.x (orignal answer)
It will center both horizontally and vertically if you make the div and it's containers 100% height:
html,
body,
.fluid-container {
height: 100%;
}
.flexbox-container {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-align: center;
-webkit-align-items: center;
-webkit-box-align: center;
align-items: center;
height: 100%;
}
Demo
Another option (for modern browsers) is to set the full height using vh viewport unit:
.flexbox-container {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-align: center;
-webkit-align-items: center;
-webkit-box-align: center;
align-items: center;
height: 100vh;
}
Demo 2
I have a question related to CSS flex, i'm a web dev but not CSS expert and i need your help on this CSS flex issue.
Here is the plnkr code snippet, you can see what i wanted here: Plunker
.flex-container {
padding: 0;
margin: 0;
list-style: none;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row;
justify-content: space-around;
align-items: center;
}
.flex-item {
background: #e6e6e6;
padding: 10px;
align-self: stretch;
}
I want that:
All flex items should be stretch.
Flex item on the left should be both vertically and horizontally centered of the box.
Flex item on the right should be vertically: center, horizontally: left.
Thanks in advance, appreciate all your helps :)
I have updated your Plunker[1] Plunker. Please review and let me know is this what you need.
I have added flex-container to the orange div, so that the height will be height of the container
I am working on a menu bar that has all of its buttons distributed evenly in the center of the nav element (the container). I need this layout to look good on most devices, regardless of its size. The problem is, at one of the tablet sizes I am testing, only one of the buttons goes to the next line, leaving an undesirable look. Is there any way using css to have all items distributed on all lines being used evenly?
Here is the nav's style block:
nav {
display: -ms-flex;
display: -moz-flex;
display: -webkit-flex;
display: flex;
-ms-flex-wrap: wrap;
-moz-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-ms-justify-content: center;
-moz-justify-content: center;
-webkit-justify-content: center;
justify-content: center;
width: 100%;
height: 100px;
background-color: #000;
}