in this case i try to align span with own text but i can not do this with flex box.
i show inspect in image and you can see there that they are not align with each other.
note: vertical align not working!
you can acually see that right number is upper than left one.
<div class="slide-body">
<div class="body-price">
<span class="price">499000</span>
<span class="price-off">45%</span>
</div>
<p class="main-price">900000</p>
</div>
.slide-body {
display: flex;
flex-direction: column;
gap: 10px;
}
.body-price {
display: flex;
align-items: center;
justify-content: space-between;
padding-inline: .5rem;
}
Related
i have a simple question.
My code:
'''
<div class="container">
<div class="child_1">
</div>
<div class="child_2">
</div>
</div>
<div class="another_div">
</div>
'''
How to place 'another_div' next to 'child_2' ?
You have to wrap all your content in a new <div> with a class main-container (say).
Now, set the display of the main container to flex;
display: flex;
As another <div> is supposed to be added to the left of the elements of the <div> with class container, we set the flex-direction to row-reverse.
flex-direction: row-reverse;
The entire main container gets aligned to the right. As it's already in reverse, we set justify-content to flex-end.
justify-content: flex-end;
The another_div is added at the bottom and not on the top, which implies the items are vertically aligned to the bottom. For this, we align the items to the flex-end.
align-items: flex-end;
.main-container {
display: flex;
flex-direction: row-reverse;
justify-content: flex-end;
align-items: flex-end;
}
Link to codepen: https://codepen.io/geekyquentin/pen/wvyJOBX
.child_1,
.child_2,
.another_div {
width: 100px;
height: 100px;
}
.child_1,
.child_2 {
border: 1px solid red;
}
.another_div {
border: 1px solid black;
order: 1;
}
body {
display: flex;
flex-direction: row;
align-items: flex-end;
}
<div class="container">
<div class="child_1"> </div>
<div class="child_2"> </div>
</div>
<div class="another_div"></div>
I've been trying to get these objects to center and when I used an <a href> tag, I could see that I was able to click way away from the picture and still the link would activate. I am assuming this means that the child containers are taking up 50% of the width each, despite only a tiny portion of the container being full. Why is there blank space that is preventing me from aligning my objects?
RELEVANT HTML:
<div class="container">
<div class="previous">
<img class="containerimg" src="https://i.imgur.com/YgZ2GOl.png">
<p>Previous Project </p>
</div>
<div class="next">
<img class="containerimg" src="https://i.imgur.com/s11MTLc.png">
<p> Next Project</p>
</div>
</div>
RELEVANT CSS:
.container {
display: flex;
justify-content: center;
}
.containerimg {
width: 30%;
height: auto;
}
.next {
display: flex;
flex-direction: column;
}
.previous{
display: flex;
flex-direction: column;
}
CODEPEN: https://codepen.io/daniel-albano/pen/zYGKZEw?editors=1100
Your question is a little vague, but I'm assuming that you want to center the .previous and .next divs.
Since both of these are using display: flex already, you simply need to add align-items: center to the .previous and .next classes to make them center horizontally. If you also want the content (the image and text) to center vertically, you'll need to add justify-content: center. Here's the result:
.next {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.previous {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
If you're trying to make the images in those divs take up more space, you'll need to increase the width rule below. Since you commented that you need 100%, you'll need to change it to this:
.containerimg {
width: 100%;
height: auto;
}
I found the issue, I needed my images to contain 100% of the space and I needed to assign a width element to the child containers.
.container {
display: flex;
justify-content: center;
width:100vw;
}
.previous, .next{
width:30%;
display:flex;
flex-direction:column;
align-items:center;
}
img{
width:100%;
}
<div class="container">
<div class="previous">
<img class="containerimg" src="https://i.imgur.com/YgZ2GOl.png">
<p>caption 1</p>
</div>
<div class="next">
<img class="containerimg" src="https://i.imgur.com/s11MTLc.png">
<p>caption 2</p>
</div>
</div>
You should be able to solve this issue by adding "align-items: center" to your .next and .previous classes. The reason for this is that when you switch the flex-direction to column that also switches how align-items and justify-content work, essentially reversing them.
.next {
display: flex;
flex-direction: column;
align-items: center;
}
.previous{
display: flex;
flex-direction: column;
align-items: center;
}
I'm trying to make something similar to Bootstraps jumbotron class using flexbox. I want everything to be centered vertically and horizontally, but I want anything inside of the box to still respect standard HTML rules. That is, if I make an <h1> and then an <h4> I want them to be on separate lines; however, with my current flexbox properties, that's not happening. See the example below -- it looks like titlesubtitle instead of title\nsubtitle
.Jumbotron {
height: 300px;
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
}
<div class="Jumbotron">
<h1>title</h1>
<h4>subtitle</h4>
</div>
You can introduce a new, non-flex parent to wrap those elements, so that parent will be the centered flex-child, and it's children will just be normal, non-flex children
.Jumbotron {
height: 300px;
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
}
<div class="Jumbotron">
<div>
<h1>title</h1>
<h4>subtitle</h4>
</div>
</div>
Or for your example, if you just want the children of the flex parent to be on their own line, use flex-direction: column;
.Jumbotron {
height: 300px;
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
flex-direction: column;
}
<div class="Jumbotron">
<h1>title</h1>
<h4>subtitle</h4>
</div>
I have a simple block of text sharing a display: flex container with an <a> tag.
Unfortunately, the wrapping is a bit weird, almost as if the <a> tag's "true" width isn't being treated as such, or like it has a width of 0 (judging by how it is positioned).
Is there some styling I can apply to <a> tags to make it act more "text-like"?
JSFiddle
body {
font-size: 32px;
}
body > .container {
display: flex;
flex-flow: column nowrap;
justify-content: flex-start;
align-items: center;
}
body > .container > .foot {
flex: 1 0 100%;
background-color: grey;
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: center;
}
body > .container > .foot > .content {
flex: 1 0 70%;
width: 50%;
height: 350px;
display: flex;
flex-flow: row wrap;
justify-content: flex-start;
align-items: center;
align-content: center;
text-align: center;
}
<div class='container'>
<div class='foot'>
<div class='content'>
We'll be back up shortly. We are undergoing a scheduled maintenance. Apologies for the inconvenience. Check <a href='http://status.mywebsite.com'>http://status.mywebsite.com </a> for updates.
</div>
</div>
</div>
Answer
You have text-align: center which is applying to the text, but not the anchor element.
You have justify-content: flex-start which is applying to the anchor element, but not the text.
All you need is a switch to justify-content: center.
revised fiddle
body {
font-size: 32px;
}
body > .container {
display: flex;
flex-flow: column nowrap;
justify-content: flex-start;
align-items: center;
}
body > .container > .foot {
flex: 1 0 100%;
background-color: grey;
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: center;
}
body > .container > .foot > .content {
flex: 1 0 70%;
width: 50%;
height: 350px;
display: flex;
flex-flow: row wrap;
justify-content: center; /* ADJUSTED */
align-items: center;
align-content: center;
text-align: center;
}
<div class='container'>
<div class='foot'>
<div class='content'>
We'll be back up shortly. We are undergoing a scheduled maintenance. Apologies for the inconvenience. Check <a href='http://status.mywebsite.com'>http://status.mywebsite.com </a> for updates.
</div>
</div>
</div>
Explanation
You wrote:
I have a simple block of text sharing a display: flex container with an <a> tag.
Well, your block of text isn't as simple as you might think.
You're not dealing with a single string.
What you actually have is a flex container with three flex items:
An anonymous flex item wrapping the text before the anchor element
The anchor element
An anonymous flex item wrapping the text after the anchor element
From the spec:
4. Flex Items
Each in-flow child of a flex container becomes a flex item, and each
contiguous run of text that is directly contained inside a flex
container is wrapped in an anonymous flex item.
The behavior you're seeing is three flex items wrapping.
The anchor text itself will not wrap because it is equivalent to a single word. But if you add spaces and text in the anchor it will wrap like everything else.
Also see this post:
Why do I need "text-align: center" when the container has "justify-content: center"?
I have the following HTML:
<div class = "container">
<div class = "img">
<img src = "http://icons.iconarchive.com/icons/danieledesantis/playstation-flat/512/playstation-cross-icon.png">
</div>
<div class = "text">
<h1>
Click to close your window.
</h1>
</div>
</div>
and CSS:
.img {
width: 30%;
float: left;
}
.text {
width: 70%:
float: right;
}
I want to vertically align the text div with the img div. I want to keep flexible height so I cant use
display: table and display: table-cell;
I tried playing with padding-top on text but i couldn't get it right for all the devices.
How can I align the text div with the img div so that text always sits in the middle of the image?
Here is jsfiddle: https://jsfiddle.net/whqL4fot/1/
Start using Flexbox :)
.container {
-webkit-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: nowrap;
flex-wrap: nowrap;
-ms-flex-align: center;
-webkit-align-items: center;
-webkit-box-align: center;
align-items: center;
}
Updated jsfiddle
( https://jsfiddle.net/whqL4fot/2/ )