I have the following HTML
<div class="parent">
<div class="left-colum">Some paragraphs of text</div>
<div class="right-column"><img src="image.jpg"></div>
</div>
The right-column has the width of the image, but since it holds different size images its width is unknown. I want the left-column to take whatever is needed but with a max-width of 150px. I also want the image in the right-column centered vertically.
In the end it should look like the example below, but I have a hard time time getting this together. How would I do this?
edit: I have the following CSS, but the right-column isn't at 100% height so I can't start trying to vertically center the image yet:
.parent{
position: relative;
height: 100%;
}
.left-colum{
float: left;
max-width: 150px;
}
.right-column{
float: right;
height: 100%;
}
You could use nested flexbox see the comments inline.
body {
margin: 0;
}
.parent {
display: flex;
height: 100vh; /*viewport height*/
}
.left-column {
background: pink;
max-width: 150px;
}
.right-column {
background: gold;
flex: 1; /*expand*/
display: flex;
justify-content: center; /*center x*/
align-items: center; /*center y*/
}
<div class="parent">
<div class="left-column">Some paragraphs of text</div>
<div class="right-column">
<img src="//dummyimage.com/100">
</div>
</div>
Use flex display on columns and set display:flex; align-items:center; justify-content: center on right div and max-width: 150px; on left div. Also be aware of vendor prefixes for browsers in order to properly use flex property.
.parent {
display: flex;
align-items: center;
justify-content: space-between;
}
.left-column {
max-width: 150px;
display: flex;
}
.right-column {
display: flex;
justify-content: center;
align-items: center;
display:center;
}
Related
This question already has answers here:
Flexbox: center horizontally and vertically
(14 answers)
How can I vertically center a div element for all browsers using CSS?
(48 answers)
Closed 1 year ago.
I just can't center the div(Horizontal-Container)both vertically and horizontally and I can't figure out why it's not working...
I've try all the methods by w3school, but either it's not horizontally or vertically center, it can't be both achieved...
Below is my code:
body {
background-color: #62306D;
}
.Horizontal-Container {
width: 100%;
height: auto;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
text-align: center;
}
.Yellow {
background-color: #F7EC7D;
width: 90px;
height: 180px;
}
<div class="Horizontal-Container">
<div class="Yellow"></div>
<div class="Yellow"></div>
<div class="Yellow"></div>
</div>
Your issue arises from .Horizontal-Container not being full height so it is technically vertically centered, just it hasn't moved. To fix this, you need to set the height of body and html to 100% which then allows the container to have the height you desire. It may seem off centre now, but that is down to padding and margin on the elements which you can easily remove.
html, body {
background-color: #62306D;
height: 100%;
margin: 0;
padding: 0;
}
.Horizontal-Container {
width: 100%;
height: 100%;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
text-align: center;
}
.Yellow {
background-color: #F7EC7D;
width: 90px;
height: 180px;
}
<div class="Horizontal-Container">
<div class="Yellow"></div>
<div class="Yellow"></div>
<div class="Yellow"></div>
</div>
It's not working because your .Horizontal-Container does not have a specific height. If you set the height to auto it will consume as much space as its children need. Thus you have to add a height either to your container or simply to your body in order to center your elements over the whole page.
body {
background-color: #62306D;
}
.Horizontal-Container {
width: 100%;
height: 100vh; /* <-- set a specific height */
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
text-align: center;
}
.Yellow {
background-color: #F7EC7D;
width: 90px;
height: 180px;
}
<div class="Horizontal-Container">
<div class="Yellow"></div>
<div class="Yellow"></div>
<div class="Yellow"></div>
</div>
I am trying to create a 2x2 grid where the height of the four individual boxes (red, blue, green, yellow) are all equal despite how much content they contain.
#rowTwo {
background-color: pink;
min-height: 25%;
display: flex;
flex-direction: column;
align-items: center;
}
#grid2x2 {
display: flex;
flex-direction: row;
flex-wrap: wrap;
background-color: orange;
width: 80%;
justify-content: center;
}
.box {
display: flex;
flex-basis: calc(50% - 20px);
margin: 5px;
justify-content: center;
padding-top: 5%;
overflow: hidden;
}
<div id={styles.rowTwo}>
<Heading title="My Title"/>
<div id={styles.grid2x2}>
<div id={styles.boxOne} className={styles.box}>
<DescriptionBoxItemWithHeading item={this.state.sectionTwoItems[0]}/>
</div>
<div id={styles.boxTwo} className={styles.box}>
<DescriptionBoxItemWithHeading item={this.state.sectionTwoItems[1]}/>
</div>
<div id={styles.boxThree} className={styles.box}>
<DescriptionBoxItemWithHeading item={this.state.sectionTwoItems[2]}/>
</div>
<div id={styles.boxFour} className={styles.box}>
<DescriptionBoxItemWithHeading item={this.state.sectionTwoItems[3]}/>
</div>
</div>
</div>
The issue I face is that a box expands to the height of the largest content in a row.
Here is an image outlining my problem:
Would anyone know how I could achieve this?
You can do this in CSS by using padding-top to add the height and then absolute positioning to draw your content on top of this padding.
Here is an example: https://codepen.io/anon/pen/xpwooz
#grid2x2 {
display: flex;
flex-wrap: wrap;
background-color: orange;
}
.box {
display: flex;
flex-basis: calc(50% - 20px);
margin: 5px;
justify-content: center;
overflow: hidden;
background: red;
padding-top: 100px;
position: relative;
}
.content {
position: absolute;
background: green;
top: 0;
width: 100%;
}
The problem is you can't change this height dynamically based on the content height. You can either set it to a fixed size or set it to a percentage and have it change size based on it's parents width. I think you'll need to use javascript if you want the height to change based on the largest content element.
Is it possible to use flexbox to center vertically and horizontally for background color purposes?
.wrapper {
display: flex;
width: 100vw;
height: 100vh;
text-align: center;
}
.item {
flex: 1;
background-color: green;
align-self: center;
justify-content: center;
}
<div class='wrapper'>
<div class='item'>
sdafsdfs
</div>
</div>
If I add a height: 100% the text moves back to the top.
Add display: flex for your items. Then only it can align items inside it as per your requirements. Please have a look at the updated code.
.wrapper {
display: flex;
width: 100vw;
height: 100vh;
text-align: center;
}
.item {
display: flex;
background-color: green;
align-items: center;
justify-content: center;
height: 100%;
width: 100%;
}
<div class='wrapper'>
<div class='item'>
sdafsdfs
</div>
</div>
Hope this help
I'm trying to fit an image vertically in a flex container which has a specific height.
The flex-direction is column, and the image is contained in a flex-item with flex-basis: 100%.
In addition, the image's max-height is 100%.
As you can see in the example, the image does not fit into the red container.
#container {
background-color: red;
display: flex;
flex-direction: column;
flex-wrap: wrap;
height: 200px;
width: 320px;
justify-content: space-between;
}
#container > * {
padding: 5px;
}
#img {
flex: 0 1 100%;
/* height: 100%; */
}
img {
max-height: 100%;
max-width: 100%;
}
<div id="container">
<div id="img">
<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=img&w=340&h=500">
</div>
<div>
Something else
</div>
</div>
Shouldn't the image shrink to fit vertically into the flex container, according to the specification?
The workaround I found is to set the height of #img to 100%, but I have the sensation that it's not the way it should be done.
As an additional note, if I set flex-direction: row to the container, it fits the image horizontally (which is the behaviour I would expect).
You wrote:
The workaround I found is to set the height of #img to 100%, but I have the sensation that it's not the way it should be done.
Actually, it is the way it should be done. The predominant implementation of the spec requires that the height property be applied to the parent when using percentage heights on the child. (Although this is slowly evolving. See my second reference below.)
References:
Working with the CSS height property and percentage values
Heights rendering differently in Chrome and Firefox (includes alternative solutions)
CSS height property definition (W3C)
For some reason, I couldn't get the <img> to behave (probably because it's a replaced element). So I removed it, and used the .img div with an image as background.
Relevant Changes
.container {
...
justify-content: center;
align-items: center;
}
.img {
flex: 1 0 auto;
background: url(https://upload.wikimedia.org/wikipedia/en/2/24/Lenna.png) no-repeat;
background-size: contain;
background-position: center;
width: 100%;
}
SNIPPET
.container {
background-color: red;
display: flex;
flex-direction: column;
flex-wrap: wrap;
height: 200px;
width: 320px;
justify-content: center;
align-items: center;
}
.container > * {
padding: 5px;
}
.somethingElse {
outline: 1px dashed yellow;
background: rgba(128,0,255,.3);
color: white;
}
.img {
flex: 1 0 auto;
background: url(https://upload.wikimedia.org/wikipedia/en/2/24/Lenna.png) no-repeat;
background-size: contain;
background-position: center;
width: 100%;
}
<figure class="container">
<div class="img">
</div>
<figcaption class="somethingElse">
True Dimentions: 512 x 512 px
</figcaption>
</figure>
try this css. its works fine.
#container {
background-color: red;
/*display: flex;*/
flex-direction: column;
flex-wrap: wrap;
height: 200px;
width: 320px;
justify-content: space-between;
}
#img {
height: 85%;
width: 100%;
}
I have 2 divs next to each other that I center vertically and horizontally using flex and justify-content/align-items.
Example
HTML:
<div class="inner">
<div class="section green">
<img src="http://i.imgur.com/hEOMgVf.png">
</div>
<div class="section red">
<img src="http://i.imgur.com/nEybO1g.png">
</div>
</div>
CSS:
.inner {
float: left;
width: 500px;
display: flex;
justify-content: center;
align-items: center;
background-color: #343434;
text-align: center;
}
.section {
float: left;
flex: 1;
}
.green { background-color: #7dc242; }
.red { background-color: #ed1c24; }
My issue is that I need to set the height of both 'section' divs to the same as well as centering them vertically and horizontally. You can see in the JSFiddle below that the green background isn't the same height as the red. How can I make both divs the full height of the container div?
Here's a simplified JSFiddle of what I have:
http://jsfiddle.net/beK28/1/
To achieve the effect you want, you shouldn't try to do any of the alignment in the container element and instead should set .section to also be display:flex. Then you can justify and center the images correctly within the children elements.
.section {
align-items: center;
display: flex;
flex: 1;
justify-content:center;
text-align: center;
}
http://jsfiddle.net/beK28/8/
You also don't need to use float, that's the whole point of using flexible containers.
Your elements aren't stretching vertically anymore because you've set align-items: center. If you want them to be equal height, it has to be the default value of stretch. If your elements were multi-line, then you could use align-content: center instead, which will give you the effect you're looking for. For single-line flex items, it does not appear that you can have vertical centering + equal height through Flexbox alone.
http://jsfiddle.net/beK28/6/
.inner {
float: left;
width: 400px;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-content: center;
background-color: #343434;
text-align: center;
height: 500px;
}
Note, however, that you can have flex items with the display property of table-cell.
http://jsfiddle.net/beK28/7/
.inner {
float: left;
width: 400px;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
background-color: #343434;
text-align: center;
height: 500px;
}
.section {
display: table-cell;
flex: 1;
}
I've had problems with stretch/centering before, and ended up formatting as display: table-cell:
.inner {
float: left;
width: 500px;
display: table;
background-color: #343434;
text-align: center;
}
.section {
display: table-cell;
width: 50%;
vertical-align: middle;
}