I would like to add to my header on the right an additional small element that is aligned to to right as follwed:
<h1>Header<small>subheader<span class="pull-right">subheader right</span></small></h1>
However the span element on the right is placed higher/ not in line with the first small element. What am I doing wrong?
I do not want to use the css grid.
This is what you can do.
h1{
display: flex;
width: 100%;
align-items: center;
}
small{
display: flex;
width: 100%;
}
span{
display: flex;
width: 100%;
justify-content: flex-end;
}
You can remove pull right class from span.
Related
Does anyone know how I can get all the h4s in this pen to align? I'd like all the icons to be on the same line, and also the h4s to start on the same line as well. I've tried messing with the flex baseline property but no luck.
Each flex item has this css:
.grid-item {
flex-basis: 25%;
display: inline-block;
padding: 0;
width: 100%;
text-align: center;
}
https://codepen.io/jpaul1982/pen/RwBypMj
In your codepen , you need to change the block-grid to
.block-grid {
display: flex;
align-items: baseline;
gap: 5%;
}
I am trying to build out a component in React.
It kinda works. The only issue is that the text next to each boxicon is slightly below what I would want it to be. I've tried doing margin-bottom and padding-bottom to bring them up but it does not seem to be budging. Anything else I can try?
you should give the direct parent that wrap all these spans which is AudioFileListElements the display: flex; flex-direction: row, and to center all children vertically add align-items: center.
so the css for it will be:
.AudioFileListElements {
background: #392F5A;
height: 7%;
width: 90%;
margin: 5%;
border-radius: 25px;
color: #fff;
font-family: 'Poppins';
display: flex;
flex-direction: row;
align-items: center;
}
and I said vertically, because with flex-direction: row the cross-axis will be the vertical, but with flex-direction: column it will horizontal.. see reference
I am having a problem moving my h2 header to the right side of the screen while maintaining a given width. I have tried display: flex and float: right but I can't seem to figure out how to effectively align the h2 div to the right side of the screen. My code is here: http://jsfiddle.net/b62tg9un/19/
<div class="container">
<h1>Example Title</h1>
<h2>This is a test sentence to work on my html and css code.</h2>
</div
h2 {
width: 60%;
float: right;
}
.highlight {
display: inline-block;
}
.container {
display: flex;
flex-direction: column;
text-align: right;
justify-items: right;
}
Thanks
If you want the items in the flex container to align to the right side of the container, you should use align-items: flex-end
h2 {
width: 60%;
}
.container {
align-items: flex-end;
display: flex;
flex-direction: column;
}
this will still have the h1 and h2 layed out in a column, but the h2 only takes 60% of the width and is aligned to the right.
You just have to change to flex-direction to row , because you want both of these items to be in a row
If you cant get a good mental model of flexbox try this link. it is well described there.
Flexbox
h2 {
margin: 0px;
width: 60%;
float: right;
}
.highlight {
display: inline-block;
}
.container {
display: flex;
flex-direction: row;
justify-content : space-between;
}
you are missing a bracket at the end. The last Div is not closed. Thats all.
You should use jsutify-content instead of justify-items tho for flex, and end instead of right
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 have a flex container with some text (an h1, for example) that has a line break due to the width of the container. I'm trying to keep the text inline so that it doesn't automatically take up 100% of the width of the container, so that it stays centered horizontally, but having Flex on the container breaks this. I've tried using align-self: center on the h1 and a number of other things with no luck. Any help would be much appreciated.
Edit: I want to keep the text itself left-aligned, but have the h1 element centered within the container.
.container {
width: 250px;
background-color: tomato;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
h1 {
display: inline; /* should only take as much space as it needs */
align-self: center;
}
<div class="container">
<h1>Text text sdfsdlfkjs</h1>
</div>
Is this what are you looking for?
.container {
width: 250px;
background-color:tomato;
display: flex;
flex-direction: column;
justify-content: center;
}
h1 {
width: 90%;
margin-left: auto;
margin-right: auto;
border: 1px solid white;
}