I tried vertically centering a div with flexbox:
Oddly align-items: center didn't change anything. After playing around for some time I realized that I need to set body and html to height:100%;.
HTML:
<div id="login_container">
<div class="login"></div>
<div class="login"></div>
<div class="login"></div>
</div>
CSS:
#login_container {
display: flex;
align-items: center;
justify-content: center;
height:100%;
}
.login {
background-color: #008000;
width: 100px;
height: 100px;
margin: 2px;
}
For comparison: This fiddle is working while this one isn't.
Why do I have to add
body,html {
height:100%;
}
so that the div is vertically aligned? Am I missing something?
Default value of height is auto, this means your html/body will not be full screen.
To get full screen content you have specify height to 100% or 100vh.
so that the div is vertically aligned? Am I missing something?
Yes, your content is vertically centred of parent (in this case vertically center to content of html/body). You have just missed to set height of html/body to 100% (full screen).
Related
I have a full viewport width, full viewport height "hero image" on a homepage. I've made this a Flex container. Inside the flex container is one child div (containing a heading). This flex item should be aligned to the bottom of the flex container. It has a max-width and should be horizontally centered inside the parent.
However, the max-width is being ignored. The div is taking the width of its content - the heading. Please see JS Fiddle: https://jsfiddle.net/4h7q6d5x/
As you can see the .main div inside the hero image is taking the width of its content - unlike the .main div below the hero image.
I have looked at various questions, including this one max-width not working on flex item
But adding width:100% to the flex item doesn't work. At smaller viewport sizes the the width and padding don't play nicely and the heading is cropped off the right hand edge.
How do I get max-width to work with Flexbox?
.hero_image {
min-height: 100vh;
background-color:yellow;
display: flex;
flex-direction: column;
justify-content: flex-end;
}
.main {
max-width:500px;
margin:0 auto;
padding:0 50px;
background-color:pink;
}
<div class="hero_image">
<div class="main">
<h1>Heading <br>couple of words</h1>
</div>
</div>
<div class="main">
<p>Lots of content</p>
</div>
The default "width" (actually flex-basis) inside flex-containers is auto which makes it only as wide as it's content.
But adding width:100% to the flex item doesn't work. At smaller viewport sizes the the width and padding don't play nicely and the heading is cropped off the right hand edge.
Then I'd suggest a couple of changes. Don't use a flex-column but position your .main div using align-items:flex-end.
Then set the default "width" (actually flex-grow) with flex: 1.
.hero_image {
min-height: 50vh;
/* for example */
background-color: yellow;
display: flex;
align-items: flex-end;
justify-content: center;
}
.main {
flex: 1;
max-width: 50%;
/* for example */
margin: 0 auto;
padding: 0 50px;
background-color: pink;
}
<div class="hero_image">
<div class="main">
<h1>Heading <br>couple of words</h1>
</div>
</div>
<div class="main">
<p>Lots of text</p>
</div>
how do I position a title on top of a gallery , like in the picture below.
I'm using a shortcode for the gallery, which comes with my theme.
I was able to do it using position:absolute; and top and bottom values, then center it with display:block; and margin:0 auto;. However, when I change the size of the screen it get's all out of whack.
the html is
<div class="gallery-column">
[shortcode goes here]
<h2>Title goes here</h2>
</div>
The easiest way to keep an element centered both horizontally and vertically is with flexbox.
All you need on the parent element is:
display: flex to treat the element as a flexbox
align-items: center for vertical alignment
justify-content: center for horizontal alignment
a fixed height (to create the padding) - 100vh for a full screen
This can be seen in the following:
body {
margin: 0;
}
.gallery-column {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
<div class="gallery-column">
<div class="centered">
<h2>Centered Element</h2>
</div>
</div>
The element in question will remain at the exact center of the page, regardless of screen resizes.
In your case you'll also want a z-index to ensure that the element stays on top.z-index: 1 should suffice.
Here's a CSS puzzle for you all.
I'm using flexbox in my layout. I have a header with a few buttons on the left side, some text in the center, and another button on the right. Here's an ascii drawing:
[btn][btn2][btn3][ text ][btn4]
Unfortunately, this looks weird because the text isn't centered in the header. What I really want is this:
[btn][btn2][btn3][ text ][btn4]
Ideally, I'd like to continue using flexbox to achieve this because it makes most of the horizontal layout really easy, but I'm willing to fall back to floats and/or positioning if need be.
One problem with positioning the text element absolutely is that long text will under/overlap the buttons on the side. I currently use text-overflow: ellipsis and as a bonus, I would love to continue to if possible:
[btn][btn2][btn3][ long text causes elli... ][btn4]
I'm also okay with adding extra container elements if that helps. Perhaps there's a way to solve this by adding left buttons and right buttons in containers and then ensuring those containers are always the same width?
Edit: I think I took a step in the right direction with this CodePen. It properly centers the text. The only downside is that the h1 needs a fixed or percentage width, and if that width is wider than the space available, it seems to just overlap the neighboring elements.
You came very close to a working sample. I forked your CodePen with a solution that don't require widths of any kind. It's using the power of flex to position elements.
The H1 will always be in the middle, with a width of the same size as the surrounding left-btnsand right-btns, using flex: 1;
You can, of course, specify your H1 to a fixed width as you did, or make it for example flex: 2; to have it take up 50% space instead of 33%.
Here's the fork on CodePen. I've removed unnecessary code.
And the code:
HTML
<div class="wrapper">
<div class="left-btns">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
<h1>center me! center me! center me! test woah asdf veasdf veasdf veasdf veasdf ve</h1>
<div class="right-btns">
<div class="box"></div>
</div>
</div>
<h1>center me!</h1>
CSS
.wrapper {
background: green;
display: flex;
margin: 5px;
}
h1 {
flex: 1;
text-align: center;
margin: 5px;
background: yellow;
overflow: hidden;
text-overflow: ellipsis;
white-space: noWrap;
}
.box {
width: 50px;
height: 50px;
margin: 1px;
background: red;
}
.left-btns,
.right-btns {
margin: 5px;
display: flex;
flex: 1;
background: blue;
}
.right-btns {
justify-content: flex-end;
}
I am trying now since hours, nothing helps.
Just simple:
I have two divs with variable (dynamic) width.
Both should be side by side in a wrapper div, that has a fixed width.
Everything I try: I see leftDiv and rightDiv either floating to the left or centered, but div2 under div1.... Thanks a lot.
<div class='wrapper'>
<div class='innerWrapper'>
<div class='leftDiv'>
</div>
<div class='rightDiv'>
</div>
</div>
</div>
What is the correct css? The problem is, that it does not work to give the innerWrapper automatically the width of both divs (leftDiv and rightDiv...)...
I tried:
.wrapper {
width: 600px;
text-align: center;
}
.innerWrapper {
width: auto;
}
.leftDiv {
display: inline-block;
}
.rightDiv {
display: inline-block;
}
Use display: inline-block; on those divs ..
http://jsfiddle.net/RK6R4/
I’ve got an online photo gallery. The thumbnail page is a grid of 150px x 150px divs, the thumbnail images are set inside them.
Since the thumbnail images are rectangular, the ideal thing would be to auto-center them inside the divs.
Reading here, I’ve figured out how to center them horizontally. I’ve also been reading that auto-centering vertically isn’t possible until CSS3 takes off. Is this true?
I've gotten the horizontal images to auto center with this:
.portrait_t {
width: auto;
height: 150px;
text-align: center;
display: block;
margin: 0 auto 0 auto;
}
But, the vertical centering doesn't work with this:
.landscape_t {
width: 150px;
height: auto;
display: block;
margin: auto 0 auto 0;
}
If there's just no way to do this until CSS3 then I'll have to come up with a workaround, but if I'm missing something, please let me know.
Thank you all in advance for your help!
You have an inline element (the <img>) that is inside a sized parent <div> element:
<div>
<img />
</div>
All you need to do is to make it center and middle aligned. You center it with text-align:center; in the parent <div> and you middle align it by giving the <div> the line-height of it's full height. Additionally, as it's an <img> tag you give that image tag the vertical-align:middle; that done it's in there, regardless of it's own size:
Example/Demo:
<style>
div {width:350px; height:350px; line-height:350px; text-align:center;}
div img {vertical-align:middle;}
</style>
<div>
<img src="http://i.imgur.com/PKnWs.jpg">
</div>
<div>
<img src="http://i.imgur.com/Az6NUl.jpg">
</div>