How do I vertically center divs inside their container using flexbox if those divs have background images attached to their :after pseudo-element?
On Chrome 33 these divs align to the top: http://jsfiddle.net/6SQ6W/
HTML:
<div id="container">
<div id="left_and_right">
<div>Left</div>
<div>Right</div>
</div>
</div>
CSS:
#container {
height: 300px;
width: 300px;
background: blue;
color: white;
position: relative;
}
#container #left_and_right {
position: absolute;
height: 100%;
width: 100%;
display: -webkit-box;
display: -webkit-flex;
display: flex;
align-items: center;
}
#container #left_and_right div, #container #left_and_right div:after {
height: 50px;
width: 100px;
}
#container #left_and_right div {
background: green;
/* THIS PREVENTS VERTICAL CENTERING BUT SEEMS NEEDED FOR THE REST OF THE STUFF */
position: absolute;
}
#container #left_and_right div:after {
content:"";
position: absolute;
background-image: url(http://www.animatedgif.net/lipsmouth/kissing_e0.gif);
text-indent: -9999px;
left: 0;
}
#container #left_and_right div:nth-of-type(2) {
right: 0;
}
Related
Following code works as expected (block is centered) in Chrome and Firefox but in Safari child container is slightly off:
#container {
width: 100%;
background: yellow;
height: 20px;
position: absolute;
top: 0;
left: 0;
display: flex;
justify-content: center;
}
#content {
padding: 0px;
background: linen;
position: fixed;
}
My question would be - how to center "position: fixed" element in a "display: flexbox" parent in Safari?
Element with position: fixed (or position: absolute) won't behave in the same way in Safari as they do in Chrome/Firefox.
To center a flex item in Safari you need to use transform: translate
Updated codepen
Stack snippet
#container {
width: 100%;
background: yellow;
height: 20px;
position: absolute;
top: 0;
left: 0;
display: flex;
justify-content: center;
}
#content {
padding: 0px;
background: linen;
position: fixed;
left: 50%;
transform: translateX(-50%);
}
<div id="container">
<div id="content">THIS CONTENT IS NOT CENTERED IN SAFARI</div>
</div>
I am trying to create this layout:
LINK
I need to create 3 containers and each container will have an image as a background. Tried to do it with SVG, but it's not an option, because in future images will be changed via CMS, so I need a shape, that images can fill in. Also tried to play with the border, so I can create a shape, but it's also not working the way it looks on the image above. Is there an easier way to achieve this? Let's say using bootstrap classes?
You can do it in two ways 1)using bootstrap classes 2)using #media and for showing proper image according to div size you can use .className{background-size:contain;background-repeat:no-repeat}
You may use flex, transform and pseudo to hold backgrounds:
/* http://codepen.io/gc-nomade/pen/vGvRPZ */
html,
body {
height: 100%;
width:100%;
margin: 0;
overflow: hidden;
}
body > div {
position:relative;
min-height: 100%;
width:100%;
display: flex;
width: 160%;
margin: 0;
margin-left: -30%;
}
div div {
display: flex;
align-items: center;
transform: skew(-30deg);
overflow: hidden;
border-left: solid;
flex: 4;
position: relative;
}
div div h2 {
font-size: 5vw;
color: turquoise;
text-shadow: 0 0 1px black;
position: relative;
text-align: center;
width: 100%;
transform: skew(30deg);
}
div div:nth-child(1) h2 {
padding-left: 50%;
}
div div:nth-child(3) h2 {
padding-right: 50%;
}
div div:before {
transform: skew(30deg);
content: '';
top: 0;
bottom: 0;
right: -50%;
left: -50%;
position: absolute;
background: url(http://hd.wallpaperswide.com/thumbs/grungy_background-t2.jpg ) center tomato;
background-size: 100vw auto;
}
div div:nth-child(2):before {
background: url(http://www.intrawallpaper.com/static/images/desktop-backgrounds-8656-8993-hd-wallpapers_js7gwWA.jpg) center right gray;
background-size: 100vw auto;
}
div div:nth-child(3):before {
background: url(https://wallpaperscraft.com/image/dark_background_colorful_paint_47176_300x188.jpg) center right turquoise;
background-size: 100vw auto;
}
div div:nth-child(2) {
flex: 2.5;
}
<div>
<div>
<h2>title 1</h2>
</div>
<div>
<h2>title 1</h2>
</div>
<div>
<h2>title 1</h2>
</div>
</div>
I have a parent div, and inside there are multiple divs that I want centered vertically.
<div id="main">
<div id="picBox">
<img src="imageurl">
</div>
<div id="lines">
Line 1<br> Line2
</div>
<div id="other">
Right side text
</div>
</div>
The CSS I have set to
#main {
border: 1px solid #FF0000;
height: 100px;
width: 500px;
vertical-align: middle;
display: table-cell;
}
#picBox {
height: 90px;
width: 75px;
background-color: #000;
float: left;
position: relative;
margin-right: 3px;
display: inline-block;
}
#picBox img {
position: relative;
top: 50%;
left: 50%;
margin-top: -15px;
margin-left: -15px;
display: inline-block;
}
#lines {
font-size: 20px;
float: left;
background-color: #999;
display: inline-block;
}
#other {
float: right;
margin-right: 3px;
background-color: #6666DD;
display: inline-block;
}
I can't seem to get the divs within the main div to center vertically, with the exception of the first 'picBox' div.
Is there a way to vertically center the other divs as well?
Here's my jfiddle example:
http://jsfiddle.net/3ffda7ua/2/
Do something like:
#main {
... //Keep your other rules
position: relative;
}
#main div {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
And handle your other positioning with left: whatever.
JSFiddle example
why don't you use flex-box to align it, using a class like this one on the parent:
.flex-center-center{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
I have a situation where the 'bar' div, display some information about the 'foo' element, when the 'foo' element is hovered. But the scroll bar conflict with that, and hide the rest of my div. Can I get it to display the full 'bar' div somehow?
HTML
<div class="box">
<div class="foo">
xxx
<div class="bar">Info text, info text</div>
</div>
</div>
CSS
.box {
height: 80px;
width: 80px;
background: blue;
position: absolute;
overflow-y: scroll;
overflow-x: hidden;
}
.foo {
float: left;
background: red;
height: 50px;
width: 50px;
position: relative;
}
.bar {
float: left;
height: 20px;
width: 125px;
background: orange;
position: relative;
top: -10px;
right: -30px;
display: none;
}
.foo:hover > .bar {
display: block;
}
You could set the .bar div to position:fixed
JSfiddle Demo
CSS
.box {
height: 80px;
width: 80px;
background: blue;
position: absolute;
overflow-y: scroll;
overflow-x: hidden;
}
.foo {
float: left;
background: red;
height: 50px;
width: 50px;
}
.bar {
height: 20px;
width: 125px;
background: orange;
position: fixed;
display: none;
}
.foo:hover > .bar {
display: block;
}
I have a layout wherein the container has a fixed height and width of 640px x 480px. Inside this container are 3 divs, top, mid and bot. I want this 3 divs to fit inside the container provided that they will not overflow the container. The top and bot div doesn't have fixed height while the mid should fit the space between and push top and bot.
What I've already tried was like this:
HTML
<div class="main">
<div class="top">
</div>
<div class="mid">
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/b/bf/Chestnut-breasted_Malkoha2.jpg/593px-Chestnut-breasted_Malkoha2.jpg" />
</div>
<div class="bot">
</div>
</div>
CSS
.main {
padding: 10px;
width: 640px;
height: 480px;
display: inline-block;
background: #000;
position: relative;
}
.top {
width: 100%;
height: 50px;
display: block;
background: #eee;
}
.mid {
width: 100%;
height: 100%;
display: block;
background: #333;
}
img {
max-width: 100%;
max-height: 100%;
margin: 0 auto;
display: block;
}
.bot {
width: 100%;
height: 50px;
display: block;
background: #ccc;
}
FIDDLE HERE
Now my problem is the mid push the bot outside the container. How can i make them fit inside the container without using overflow: hidden? Thanks in advance.
NOTE : the image should fit inside the mid container.
UPDATE top and bot div can contain paragraphs so it's not fixed height.
Check this sample:
http://jsfiddle.net/J6QTg/8/
.main {
padding: 50px 0px;
width: 640px;
height: 480px;
display: block;
background: #000;
position: relative;
box-sizing: border-box;
-moz-box-sizing: border-box;
}
.top {
width: 100%;
height: 50px;
display: block;
background: #eee;
position: absolute;
top : 0;
left : 0;
}
.mid {
width: 100%;
height: 100%;
display: block;
background: #333;
}
img {
max-width: 100%;
max-height: 100%;
margin: 0 auto;
display: block;
}
.bot {
width: 100%;
height: 50px;
display: block;
background: #ccc;
position: absolute;
bottom : 0;
left : 0;
}
Update:
It is also possible to use tables, to have more flexible boxes.
http://jsfiddle.net/jslayer/U3EaZ/
HTML:
<div class="box">
<div class="h"> Hello<br/>Cruel<br/>World </div>
<div class="m">
<img src="http://goo.gl/a1smCR" alt="" />
</div>
<div class="b"> Omg </div>
</div>
CSS:
.box {
display: table;
width: 640px;
height: 480px;
background: red;
}
.h, .m, .b {
display: table-row;
}
.h {
background: yellow;
height: 0;
}
.m {
background: green;
}
.m img {
max-width: 100%;
height: 100%;
max-height: 100%;
margin: 0 auto;
display: block;
}
.b {
background: blue;
height: 0;
}
I would use JavaScript/JQuery: FIDDLE
I've used JQuery for simplicity, but it can probably be done with just JavaScript...
var totalheight = eval($('.main').height() - $('.top').outerHeight(true) - $('.bot').outerHeight(true))
$('.mid').outerHeight(totalheight);
Try to set the height of mid based on the container.
.mid {
width: 100%;
height: 383px;
display: block;
background: #333;
}
FIDDLE
If the container has a fixed height and width, then you can set the height to 79.25% like this:
.mid {
max-width: 100%;
height: 79.25%;
display: block;
background: #333;
}
demo