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
Related
I am trying to move the "A short summary of Erik Spikemann" along with the under it. I want to place it next to the large photo of him as seen on the left side. I've tried doing a float left but for some reason that isn't working at all. I've attached my code.Full photo of the page
Use Flexbox or Grid. I'll give you an example for Flexbox that you can reflect on your own case and you can search for the other.
.container {
display:flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
img {
width: 400px;
height: 400px;
margin-right: 10px;
}
<div class = "container">
<img src = "https://www.w3schools.com/howto/img_avatar.png" alt = "Image" />
<p>Some text</p>
</div>
The idea here is you need to wrap your image and text with a parent div and make it a Flexbox.
flex-direction: row; => Place the items side by side
justify-content: center; => Center the items horizontally
align-items: center; => Center the items vertically
I encourage you to checkout this guide about Flexbox
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;
}
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>
I have three columns within the flex box container, two visible and one hidden. The first two have very little content; the third one has several pages of content. I want all three to be initially vertically centered, but since the third one will overflow off the page, I want it (when made visible) to end up filling to the top of the page and then scrolling down. How can I have centred items in the flex box that overflow naturally in this way?
What's happening now in my code below is that when the third column is made visible, it overflows off the top and bottom of the page, without scroll, so that its impossible to read the first part of the content.
HTML:
<div class="flex-container">
<div class="column column-left">
column one
</div>
<div class="column column-right">
column two
</div>
<div class="column-hidden column" data-id="1">
column three
</div>
</div>
CSS:
body{
margin:0;
}
html, body{
height: 100%;
}
.flex-container{
height: 100%;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
flex-direction: row;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
}
.column{
padding: 0 1em 0 1em;
}
.column-left{
display: visible;
}
.column-right{
display: visible;
border: none;
text-align: left;
}
.column-hidden{
display: none;
}
Javascript:
//clicking on button does the following to show hidden column
$('.column-left').removeClass('column-left').addClass('column-hidden');
$('.column-right').removeClass('column-right').addClass('column-left');
$(".column[data-id='" + id + "']").addClass('column-right').removeClass('column-hidden');
Played a bit with your code. I rearranged align-items from .flex-container to .column, which is also display: flex;. For scrolling I think you should have additional absolutely positioned container for the content.. I used P.
Sample here http://codepen.io/vkjgr/pen/gpqLLZ
p.s. Some hints about your code. flex-direction's initial value is row, so you don't have to write it. And visible is not a property of display ;)