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/ )
Related
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;
}
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;
}
So basically, I am trying to center a div with an image inside of a div with left and right divs and the middle div won't center. I have tried positioning absolute and setting left:0 and right:0
here is the structure of the html logoLeft is float:left and logoRight is float:right.
Thank you.
First of all, I added an external div to align the items
<div class="flex">
<div class="logoLeft"></div>
<div></div>
<div class="logoRight"></div>
</div>
In css we do the magic
.flex{
display: flex;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
justify-content: space-between;
-webkit-justify-content: space-between;
}
You could also use display: table with a container :
<div class="table">
<div class="logoLeft"></div>
<div></div>
<div class="logoRight"></div>
</div>
and the CSS :
.table {
display: table;
}
.table > div {
display: table-cell;
text-align: 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 this HTML that is part of a grid using display: table-cell. The width of the div is wider than the contents:
<div>123</div>
<div><button>1</button></div>
How can I enter the text and the button inside the larger div?
flex-box is the best solution
.container{
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
height: 100vh;
background: brown;
}
<div class="container">
<p>Text at center</p>
<button>button</button>
</div>
You can remove align-items: center if you don't want horizontal center and can remove justify-content: center you don't want vertical center
.centeredFlex {
display: flex;
justify-content: center;
align-items: center;
height: 600px; /* whatever you want... */
width: 100%; /* whatever you want... */
}
<div class="centeredFlex">
<button>1</button>
</div>
Have a look at flexbox: http://www.w3schools.com/css/css3_flexbox.asp!