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
Related
So, I have centred the content within the flex item like so. (the flex items just have a h3 and a paragraph within, in the mark-up.)
.flex-container {
margin-top: 80px;
display: flex;
height: 90vh;
align-items: center;
justify-content: center;
}
.item {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
border: 2px black solid;
margin: 20px;
padding: 20px;
height: 200px;
}
So, rather than when I re-size the page and the h3 and the paragraph flowing out of the border, how do I contain it within the border no matter what when I resize the page? The reason I've made the flex items display: flex too is so i could centre the content inside both vertically and horizontally. But, obviously when I resize to a smaller screen, the h3 and paragraph go outside the border :S
I use flexbox to deal with horizontal and vertical alignment of a text in a div.
I want to use mark tag to highlight searched text in it but the behaviour is not what i expect : the text in the mark tag is detached from the word it belongs to.
Here is the sample code and picture :
<div class="cell">Bouclage de ceinture conducteur et p<mark>ass</mark>agers</div>
.cell {
display: flex;
align-items: center;
justify-content: left;
background-color: #ddd;
width: 15em;
}
Result and expected
I want to keep flex display, do you have any idea how to solve this issue ? Thanks for your advices.
align-items should be 'start' instead of 'left' and add flex-wrap: wrap;
.cell {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: start;
background-color: #ddd;
width: 15em;
}
Stackblitz link for working solution
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 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.
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;
}