I am trying to put justify-content:center to center the content of the toolbar. On targeting the toolbar I can see the expanded elements and one of them is md-toolbar-row to which giving justify-content:center centers the content(centers only while debugging through developer tools).
Here is the plunker:https://plnkr.co/edit/qh3Kqi9GDXIL4H1HTzFu?p=preview
How do I center the content?
Tried following but none helps:
md-toolbar-row{
justify-content:center;
}
.mat-toolbar-row{
justify-content:center;
}
.mat-toolbar .mat-toolbar-row{
justify-content:center;
}
As the flex direction is column you should use align-items: center to horizontally center it
md-toolbar {
align-items: center;
}
Updated Plnkr
Optionally you can change the flex direction and use justify-content: center;
md-toolbar {
flex-direction: row;
justify-content: center;
}
Updated Plnkr 2
If you want to center content for only this toolbar then use the example-spacer class. Make the following change in the class and add it before the <div> tag.
Plnkr demo
css:
.example-spacer {
flex: .5 1 auto;
}
html:
<md-toolbar color="primary">
<span class="example-spacer"></span>
<div>Custom Toolbar</div>
</md-toolbar>
Related
Been awhile since I played with Flexbox. I'm trying to push the buttons to the bottom of the page. Does the parent container always have to have a size to do that? That seems to be the only way I can get the result I want, but then I have to constantly resize based on what else is on the page. What else am I doing wrong?
.all {
display: flex;
flex-direction: column;
justify-content: flex-end;
}
<h2>My lists</h2>
<div class="all">
<div class="top"><button>Top</button></div>
<div class="middle"><button>Midde</button></div>
<div class="bottom"><button>Bottom</button></div>
</div>
Instead of using justify-content: flex-end; try to use justify-content: space-between;so that each element will be spread.
Also you need to set a min-height in the .alt class or the container in order to see the space-between in action.
As you mentioned in your question, you need to define a height from the area you want to align the elements.
Wrap your container
You need to define your parent container as
to make the elements inside don't overflow the box itself. For that use:
flex-wrap: wrap
Make the elements inside your container use the full width
By default flex will shrink the elements. to remove the defaults and use 100% of the width, use
flex: 0 0 100%
Make your elements align itself
This is the key for your question. the elements needs to be aligned not with the other boxes, they have to align themselves. For that you must use align-self: flex-start, align-self: center or align-self: flex-end
Minimal Example
.all {
display: flex;
min-height: 100vh;
flex-wrap: wrap;
}
/* This is going to make full width the divs inside .all */
.all div {
flex: 0 0 100%;
}
.top {
align-self: flex-start;
}
.middle {
align-self: center;
}
.bottom {
align-self: flex-end;
}
<div class="all">
<div class="top"><button>Top</button></div>
<div class="middle"><button>Middle</button></div>
<div class="bottom"><button>Bottom</button></div>
</div>
how to apply display flex to make it full width. I am getting full length of parent div
<div class="tb-startingprice">
<i>Task Total Budget:</i>
<span><sup>$</sup>940.00</span>
</div>
here is CSS code
.tb-additonoltitle .tb-startingprice {
align-items: flex-start;
}
.tb-startingprice {
width:100%
display:flex;
align-items: flex-start;
}
please remove .tb-additonoltitle class .
I am not expert in css styling. Can anyone help with the following to vertically align a text top.
I have the following in my angular template:
<div class="validation-error-section">
<i class="icon-md error-rd"></i>
<t-error [Text]="ERROR_MSG_UPLOAD_FAILED"></t-error>
</div>
and the style
.validation-error-section {
display:flex;
flex-direction: row;
align-items: flex-start;
}
I want the text in to display vertically top to align with the image. but it looks like below:
Can anyone help how to align the text 'The import of your file has faile...' vertically align to top ?
Just align your items in the center of your message.
.message {
display: flex;
flex-flow: row nowrap;
align-items: center;
}
.icon {
width: 10px;
height: 10px;
background: #a33;
border-radius: 50%;
}
<div class='message'>
<div class='icon'></div>
<div class='text'>The import of your file has failed. Please try again.</div>
</div>
Switch from align-items: flex-start; to align-items: start;
If that is not enough then add also align-self: start;'
Check Flex alignment documentation. You are interested on alignment for Cross Axis
This question already has answers here:
Center and bottom-align flex items
(3 answers)
Closed 3 years ago.
I'm building a static page with a large intro section, that has a title, a caption, and a button. I want the title and caption to be left aligned horizontally, and center aligned vertically but the button needs to be center aligned horizontally and at the bottom of the container.
I'm using flexbox here, the parent is the flexbox with flex-direction set to column and justify-content: center. Then I gave the button a align-self: center which worked for the horizontally centered alignment. Then I gave the button a margin-top: auto, hoping it would move to the bottom of the parent, but while that happened, it also pushed the title and caption to the very top of the container, which is not what I want.
See the code below.
.section__intro {
display: flex;
justify-content: center;
flex-direction: column;
align-items: flex-start;
&__button {
align-self: center;
margin-top: auto;
}
}
<section class="section__intro">
<div class="section__intro__title">
This is
<span class="section__intro__title--big">
The Title of the page
</span>
</div>
<a href="#" class=" section__intro__button">Join Us Now</a
href="#">
<button class="section__intro__scroll"></button>
</section>
I want the button at the bottom of the container with class section__intro__scroll to be at the bottom.
Also, I do not want to use position: absolute for this.
If I understand it correctly you are trying something like this using the same markup?
body {
margin: 0;
}
.section__intro {
display: flex;
justify-content: center;
flex-direction: column;
height: 100vh;
&__button {
align-self: left;
margin-bottom: auto;
}
&__scroll {
margin: 0 auto;
}
&__title {
margin-top: auto;
}
}
view in codepen
As stated in the comments, is not possible to do it with your current markup (it is in fact possible, as seen in the Yor's answer), one way to achieve what you want using only flexbox is split the problem in two.
You have to group in two boxes the items: the first box for the title and the caption, the second box for the button. With these two boxes, you can set the first box to grow and it will push the second box to the bottom.
Then you can center vertically the content of the first box usign the same technique you are using now.
.section__intro {
display: flex;
flex-direction: column;
/*
Force to make it tall
*/
height: 80vh;
}
.section__intro__title {
flex-grow: 1;
display: flex;
justify-content: center;
flex-direction: column;
}
.section__intro__caption {
display: block;
}
.section__intro__scroll {
align-self: center;
justify-self: end;
}
<section class="section__intro">
<div class="section__intro__title">
<span class="section__intro__title--big">
The Title of the page
</span>
Join Us Now
</div>
<button class="section__intro__scroll">Button</button>
</section>
This question already has answers here:
How to align groups of buttons on single row with Flex only?
(2 answers)
How to Center and Right-align on a row with CSS Flex only
(3 answers)
Closed 5 years ago.
I have a codepen of my header. How can I align the image to the right of my div?
I have tried justify-content: flex-end and align-items: flex-end
With the given code sample, and to right align the image in its parent, the align-items: flex-end is a flex container property and won't have any effect in the right rule.
The appropriate property for a flex item would be align-self, though as the direction is row, this will still not work since align-* properties affect the cross axis (vertically).
A simple solution is to remove align-items: flex-end from the right rule and instead make the div-container--right a flex container, use justify-content: flex-end to push its child, the image, to the right. That will work with the rest of the rules, and your original layout kept.
Stack snippet
.main-container{
background-color: white;
flex: 1;
display: flex;
flex-direction: row;
}
.left{
flex: 2;
background-color:white;
}
.right {
flex: 2;
/*align-items: flex-end; removed */
}
.div-container {
background-color: #90C3D4;
height: 100px;
}
.div-container--left {
border-bottom-left-radius: 10px;
padding-left: 10px;
margin-left: 10px;
}
.div-container--right {
border-bottom-right-radius: 10px;
padding-right: 10px;
margin-right: 10px;
display: flex; /* added */
justify-content: flex-end; /* changed */
align-items: flex-start; /* added, to avoid image to stretch */
}
<div class='main-container'>
<div class="left">
<div class='div-container div-container--left'>
<img src="http://www.mharrisweb.co.uk/images/calendarIcon.png" width="100" />
</div>
<div class='picker-container'>
</div>
</div>
<div class="right">
<div class='div-container div-container--right'>
<img src="http://www.mharrisweb.co.uk/images/logoGreen.png" width="100" />
</div>
<div class='picker-container'>
image above align right
</div>
</div>
</div>
Besides the above, here is a few more ways to align flex items:
How to align groups of buttons on single row with Flex only?
How to Center and Right-align on a row with CSS Flex only
Center and right align flexbox elements
Right align out the Float Property
The way I see it you have 2 options.
remove flex:2 from the .right class and add margin-left:auto;
to the .right class add display: flex, align-items: flex-end; flex-direction: column (you also have that text that would need to be moved inside a class wrapper as the immediate child of the .right class.
I prefer option 1.
An additional option to the good answer from Sten is to use absolute position. Example:
.right{
position:absolute;
right:0;
}