I want to put the play button (first img) centered to the second images. I can do it with position absolute and margin but how can that be dynamic? What if I'm in a loop and the height of the second images is not always the same?
DEMO http://jsfiddle.net/yusuuqck/
<div>
<img class="ply" src="http://maxcdn.clubcooee.com/img/icons/play-button2.png"/>
<img src="http://www.howtorecordpodcasts.com/wp-content/uploads/2012/10/YouTube-Background-Pop-4.jpg"/>
</div>
Could you set the second image like a background and the containing div dislpayed as flex, and the play button with margin auto. So, that button always be centered in the box.
Here better explained:
http://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/
this might help
<div class="bg_img">
<img src="http://www.howtorecordpodcasts.com/wp-content/uploads/2012/10/YouTube-Background-Pop-4.jpg">
<span></span>
</div>
css
.bg_img { position: relative; }
.bg_img span {
display: block;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: 1;
background: url(http://maxcdn.clubcooee.com/img/icons/play-button2.png) no-repeat center center;
}
Use div display as table cell.
http://jsfiddle.net/yusuuqck/2/
HTML
<div>
<img class="ply" src="http://maxcdn.clubcooee.com/img/icons/play-button2.png"/>
<img src="http://www.howtorecordpodcasts.com/wp-content/uploads/2012/10/YouTube-Background-Pop-4.jpg"/>
</div>
CSS
div {
position:relative;
width:100%;
height:100%;
display: table-cell;
}
.ply{
position:absolute;
top: 50%;
left: 50%;
width: 50px;
height: 50px;
margin-top: -25px; /* Half the height */
margin-left: -25px; /* Half the width */
}
Check this code.
div{
position:relative;
display:flex;
img{
width:100%;
height:auto;
}
}
.ply{
position:absolute;
top: 50%;
left: 50%;
width: 50px;
height: 50px;
margin-top: -25px; /* Half the height */
margin-left: -25px; /* Half the width */
}
<div>
<img class="ply" src="http://maxcdn.clubcooee.com/img/icons/play-button2.png"/>
<img src="http://www.howtorecordpodcasts.com/wp-content/uploads/2012/10/YouTube-Background-Pop-4.jpg"/>
</div>
Related
I'm trying to place two images on top of each other, with both of the images horizontally and vertically centered inside their container.
One of the images will be have its opacity animated to reveal the image underneath.
The images are both the same size, but I don't know the size of the images beforehand. I also would like to do this in just pure CSS and HTML.
Here is what I ended up with.
.data-box{
border: 2px solid #d4d4d4;
border-radius: 3px;
display: flex;
height: 120px;
margin: 5px;
margin-bottom: 10px;
margin-right: 10px;
padding: 0;
position: relative;
width: 120px;
}
.logo {
align-items: center;
display: flex;
justify-content: center;
margin: auto;
position: relative;
}
.data-name {
position: absolute;
width: 100%;
height: 23px;
bottom: 0px;
right: 0px;
background: rgba(200, 200, 200, 0.3);
}
span {
position: absolute;
width: 100%;
bottom: 2px;
text-align: center;
}
img {
position: absolute;
}
<div class="data-box">
<div class="logo">
<img class="grayscale-image" src="https://placeholdit.imgix.net/~text?txtsize=8&txt=65%C3%9765&w=65&h=65" alt="">
<img class="color-image" src="https://placeholdit.imgix.net/~text?txtsize=8&txt=65%C3%9765&w=65&h=65" alt="">
</div>
<div class="data-name"><span>Flickr</span></div>
</div>
I made the images position: absolute so they would leave the normal flow of the browser and render directly on top of each other instead of next to each other.
This works correctly in Chrome, but in Firefox and Safari the image's top left corner is horizontally and vertically centered:
How can I horizontally and vertically center these images while still having them render directly on top of each other?
Solution
Add this to your code:
img {
position: absolute;
top: 0;
left: 0;
transform: translate(-50%, -50%);
}
.data-box {
border: 2px solid #d4d4d4;
border-radius: 3px;
display: flex;
height: 120px;
margin: 5px;
margin-bottom: 10px;
margin-right: 10px;
padding: 0;
position: relative;
width: 120px;
}
.logo {
align-items: center;
display: flex;
justify-content: center;
margin: auto;
position: relative;
}
.data-name {
position: absolute;
width: 100%;
height: 23px;
bottom: 0px;
right: 0px;
background: rgba(200, 200, 200, 0.3);
}
span {
position: absolute;
width: 100%;
bottom: 2px;
text-align: center;
}
img {
position: absolute;
top: 0;
left: 0;
transform: translate(-50%, -50%);
}
<div class="data-box">
<div class="logo">
<img class="grayscale-image" src="https://placeholdit.imgix.net/~text?txtsize=8&txt=65%C3%9765&w=65&h=65" alt="">
<img class="color-image" src="https://placeholdit.imgix.net/~text?txtsize=8&txt=65%C3%9765&w=65&h=65" alt="">
</div>
<div class="data-name"><span>Flickr</span>
</div>
</div>
Explanation
Although setting an element to position: absolute removes it from the normal flow, it doesn't actually position it anywhere.
The CSS offset properties (top, bottom, left and right) have an initial value of auto, which keeps an absolutely positioned element where it normally would be if it were in the document flow. As you can see, browser behavior will vary when the offsets aren't defined.
For an explanation of how the code above works, see this post: Element will not stay centered, especially when re-sizing screen
I don't think you need flexbox at all:
.data-box {position:relative; display:inline-block;}
.logo {position:relative;}
.color-image {position:absolute; top:0; left:0; bottom:0; right:0; opacity:0.5;}
.data-name {position:absolute; left:0; right:0; bottom:5px; text-align:center;}
<div class="data-box">
<div class="logo">
<img class="grayscale-image" src="https://placeholdit.imgix.net/~text?txtsize=8&txt=65%C3%9765&w=65&h=65" alt="">
<img class="color-image" src="https://placeholdit.imgix.net/~text?txtsize=8&txt=65%C3%9765&w=65&h=65" alt="">
</div>
<div class="data-name"><span>Flickr</span></div>
</div>
Could you set the img in a div, and have the behind image set as the background of the div?
It's not the most elegant solution but this works:
img {
position: absolute;
transform: translate(-50%, -50%);
}
I'll try to get straight to the point.
Here's an example that centralizes two images inside a parent.
<html>
<head>
<title>Exemple</title>
<style type="text/css">
.parent{
margin: auto auto;
width: 500px;
height: 500px;
border: 3px solid #ccc;
}
.child1, .child2{
width: 50%;
height: 50%;
margin: 25%;
background-color: rgb(226,26,60);
}
.child1{
opacity:0.5;
}
</style>
</head>
<body>
<div class="parent">
<img class="child1" src="https://placeholdit.imgix.net/~text?txtsize=8&txt=65%C3%9765&w=65&h=65" alt="">
<img class="child2" src="https://placeholdit.imgix.net/~text?txtsize=8&txt=65%C3%9765&w=65&h=65" alt="">
</div>
</body>
</html>
Use margin with percentage to align both images in the middle of the
parent div. Here I set the with and height to 50%, which means there's
50% left. That's why you set the margin to 25%, so he puts it in the
middle of the parent.
Good luck
Here is my fiddle:
JSFiddle
You can find the sources here in a JSFiddle.
CSS
.container {
width: 100%;
height: 350px;
float: right;
}
.box {
margin-top: -350px;
float: right;
width: 100%;
}
.box:first-child {
margin-top: 0;
}
img {
width: 50%;
height: 350px;
float:right;
}
.top-section {
width: 50%;
background-color: red;
height: 175px;
}
.bottom-section {
width: 50%;
background-color: blue;
height: 175px;
}
HTML
<div class="container">
<div class="box">
<img src="http://st.hzcdn.com/simgs/7d0137b70f7848d3_3-3892/modern-futons.jpg">
<div class="top-section">
some text.......
</div>
<div class="bottom-section">
some other text.....
</div>
</div>
<div class="box">
<img src="http://i.ebayimg.com/00/s/MzAwWDMwMA==/z/JLYAAOSwxH1UBi1~/$_35.JPG?set_id=2">
<div class="top-section">
some text.......
</div>
<div class="bottom-section">
some other text.....
</div>
</div>
</div>
I have two divs stacked on top of each other (div.box) using margin-top. each div.box is divided into 3 section: a section for a picture, one for some text and another for some other text.
I'm trying to make div.top-section and div.bottom-section the same height and my problem is this:
I want my pictures to be responsive using width:100%;height:auto but I want at the same time, whenever a user resize the window, div.top-section and div.bottom-section don't loose their height relevant to the picture. I mean I want div.top-section and div.bottom-section, each have 1/2 image height and using % unit and not pixel.
How can I achieve this? Thanks in advance.
You can do this with absolute positioning. You can position the container your holding this all in to relative and then posiiton all of your inner content to absolute. Then give your container a padding-bottom of a percentage and play with this percentage until you get your desired height. Then give your text section absolute positioning and a height of 50% and your image a height of 100% and width of 50% and position this to the right.
This can be acheived one of 2 ways. You can use just the image and position that absolutely like so:
html:
<div class="container">
<div class="text-1">
Text 1
</div>
<div class="text-2">
Text 2
</div>
<img src="http://st.hzcdn.com/simgs/7d0137b70f7848d3_3-3892/modern-futons.jpg"/>
</div>
Css:
.container{
position: relative;
padding-bottom: 60%;
}
.text-1{
position: absolute;
left: 0;
top: 0;
height: 50%;
width: 50%;
background: red;
}
.text-2{
position: absolute;
left: 0;
top: 50%;
height: 50%;
width: 50%;
background: blue;
}
.container img{
position: absolute;
top: 0;
right: 0;
width: 50%;
height: 100%;
}
Here is a working fiddle of that method Fiddle
Next if you don't want to lose the aspect ratio of the image. Say you have a tall image and a short image and you want to use this multiple times on your page. You can put another div in the container and position this to the right and place your image as the background of this div like so:
Html:
<div class="container">
<div class="text-1">
Text 1
</div>
<div class="text-2">
Text 2
</div>
<div class="image-section" style="background:url('http://st.hzcdn.com/simgs/7d0137b70f7848d3_3-3892/modern-futons.jpg')"></div>
</div>
Css:
.container{
position: relative;
padding-bottom: 60%;
}
.text-1{
position: absolute;
left: 0;
top: 0;
height: 50%;
width: 50%;
background: red;
}
.text-2{
position: absolute;
left: 0;
top: 50%;
height: 50%;
width: 50%;
background: blue;
}
.image-section{
position: absolute;
right: 0;
top: 0;
background-size:cover !Important;
background-position:center !Important;
backgroung-repeat:no-repeat !Important;
height: 100%;
width: 50%;
}
Here is a working fiddle of that Fiddle
A similar question has been asked many times (how to place text over an image) but every solution says make a relative positioned container and place image and text inside.
But what if the container needs to be absolute??
I want the image to be absolute in order to span the full width of the page, without being limited by the wrapper's width: Wrapper has set width, the image container should ignore this and be full screen, and the text should float above the image.
Here is a fiddle in which the image isn't ignoring the wrapper's width
.splash_image {
position: relative;
left: 0;
top: 2%;
height: 600px;
overflow: hidden;
z-index: 1;
}
.splash_image img {
width: 100%;
position: absolute;
}
.splash_title {
color: red;
position: absolute;
}
.wrapper {
width: 50%;
}
<div class="wrapper">
<div class="splash_image">
<img src="http://fc07.deviantart.net/fs34/f/2008/290/6/4/Large_Tree_Stock_by_HauntingVisionsStock.jpg" alt="test image">
<div class="splash_title">Test title to go here on image</div>
</div>
</div>
You set relative positioning on the image container, so even though you've positioned the image absolutely, it's being positioned absolutely within a relative positioned container. The container should be positioned absolutely if I am understanding what you're looking for:
.splash_image{
position:absolute;
left:0;
top:2%;
height:600px;
width:100%;
overflow: hidden;
z-index: 1;
}
.splash_image img{
width:100%;
}
.splash_title{
color:red;
z-index: 88;
position:absolute;
top:0;
left:0;
}
Updated Fiddle
There are multiple ways to accomplish this. Here is a simple answer:
.splash_image {
position: absolute;
left: 0;
top: 2%;
height: 600px;
overflow: hidden;
z-index: 1;
}
.splash_image img {
width: 100%;
}
.splash_title {
color: red;
position: absolute;
z-index: 2;
}
.wrapper {
width: 50%;
}
<div class="splash_image">
<img src="http://fc07.deviantart.net/fs34/f/2008/290/6/4/Large_Tree_Stock_by_HauntingVisionsStock.jpg" alt="test image" />
</div>
<div class="wrapper">
<div class="splash_title">Test title to go here on image</div>
</div>
https://jsfiddle.net/jonnysynthetic/2vqgab7t/
However, you could also try setting the image as a background to the parent element as well. I wasn't sure of the scope of what this is in or a part of, so I wanted to give you the simple answer first.
.splash_image{
left: 0;
top: 2%;
overflow: hidden;
width: 100%;
z-index: 1;
height: 100%;
}
.splash_image img{
width:100%;
position:absolute;
}
.splash_title{
color: red;
z-index: 88;
position: absolute;
top: 50%;
left: 50px;
right: 0;
bottom: 0;
margin: auto;
}
.wrapper{
width: 50%;
height: 150px;
position: relative;
}
https://jsfiddle.net/2tpbx12x/5/
try this:
.splash_image img{
width:100%;
position:fixed;
}
I'm fiddling with Jquery Cycle slideshow and trying to add a couple of buttons. I can't seem to align them veritcally without top: #px; tomfoolery; I'd love to just align it to middle of the div vertically.
CSS
#slidecontainer {
margin-left: auto;
margin-right: auto;
position: relative;
width: 800px;
height: 200px;
}
.slidecontrols {
top: 50px;
position: absolute;
z-index: 100;
width: 100%;
}
.slidecontrols a {
background-color: white;
}
.slidecontrols a.next {
position: absolute;
right: 0;
}
.slideshow {
width: 100%;
height: 100%;
}
.bannered {
height: 200px;
width: 800px;
}
HTML
<div id="slidecontainer">
<div class="slideshow" id="slideoptions">
<img src="http://i.imgur.com/ufZ0cxL.jpg" class="bannered" alt="" /></a>
<img src="http://i.imgur.com/RZTrFy4.jpg" class="bannered" alt="" /></a>
</div>
<div class="slidecontrols">
right
left
</div>
</div>
Here's a Fiddle. Adding vertical-align: middle; to .slidecontrols does absolutely nothing.
Here's another option if you don't want to guess or set any pixels:
.slidecontrols {
top: 50%;
position: absolute;
z-index: 100;
width: 100%;
-webkit-transform: translate(0, -50%);
transform: translate(0, -50%);
}
Assuming the height of the controls will be 20px, you could use a top value of 50% and then a negative margin-top value of half the element's height. In this case, -10px.
Example Here
.slidecontrols {
top: 50%;
margin-top: -10px;
position: absolute;
z-index: 100;
width: 100%;
}
Alternatively, if you need a solution for dynamic heights:
Example Here
.slidecontrols {
position:absolute;
top:0; right:0;
bottom:0; left:0;
z-index: 100;
width: 100%;
height:100%;
display:table;
}
.slidecontrols a {
display:table-cell;
vertical-align:middle;
}
Make top : 50% to slidecontrols which will align the links exactly at the center.
.slidecontrols {
top: 50%;
position: absolute;
z-index: 100;
width: 100%;
}
Another posibility if you consider the buttons has 20px height,
top: calc(50% - 10px); // 10px is half of buttons height
This will align it exactly at the center
When you have position: absolute, the vertical align will not work.
I would like to align a image in the middle. Very easy by giving the div a width and a margin: auto;. But the div should also carry the position: fixed; property, which doesn't go together as it turns out.
Here is my HTML:
<div class="header_container">
<div class="header">
<div class="header_links_icon">
<a href="https://www.facebook.com target="_blank" class="header_facebook">
<div class="header_facebook_icon"> </div>
</a>
<a href="https://twitter.com/" target="_blank" class="header_facebook">
<div class="header_twitter_icon"> </div>
</a>
</div>
</div>
</div>
And here is the CSS I'm using:
.header_container {
background-color: black;
padding-top: 35px;
}
.header {
background-image: url('../images/css/header.png');
background-repeat: no-repeat;
height: 605px;
margin: auto;
width: 1440px;
position: fixed
}
And it's the header.png image that should be aligned in the middle of the screen AND being positioned fixed... How can I manage to do this?
You could make your header container fixed, then your .header would work:
.header_container {
background-color: black;
padding-top: 35px;
position: fixed;
top:0;
left:0;
right:0;
}
.header {
background-image: url('../images/css/header.png');
background-repeat: no-repeat;
height: 605px;
width: 1440px;
margin: auto;
}
The other way would be with negative margins:
.header {
background-image: url('../images/css/header.png');
background-repeat: no-repeat;
height: 605px;
width: 1440px;
position: fixed;
left: 50%;
margin-left: -720px;
}
You have to set the left position to fifty percent and the margin-left to one half the element's width. This only works for items that have a set width.
http://jsfiddle.net/W9ZcY/
.header_container {
background-color: black;
padding-top: 35px;
border: 1px solid red;
}
.header {
border: 1px solid blue;
background: gray;
height: 105px;
left: 50%;
margin-left: -70px;
width: 140px;
position: fixed
}
The issue is that you can either position a fixed element with percentages or pixels. Neither of them will do the proper offset calculation to make it truly centered. So you must sortof hack the placement to make it behave properly.
Positioning by percentage and offsetting with negative margins:
//assuming the block is 200px wide and 100px tall
.centered {
position: fixed;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -100px;
}
Alternatively, you can center it by fixing placement of a container then center your object within that container (as mentioned by #rgthree), this also works.
This will probably work:
.center {width:1440px;margin:0 auto;}
.header {width:1440px;position:fixed;etc...} // don't use margin:auto here
where
<div class='header_container>
<div class='center'>
<div class='header'>
<!-- contents -->
</div>
</div>
<div>
Hi you can give the fixed position to the main header_container class so that will work.
.header_container {
background-color: black;
position: fixed;
top:0;
left:0;
right:0;
}
.header {
background:green;
height: 100px;
width: 500px;
margin: auto;
}
please see the demo:- http://jsfiddle.net/rohitazad/W9ZcY/17/
Give position fixed in your parent header class rather than using fixed position in header child class...
.header_container {
position: fixed;
top:0;
left:0;
right:0;
}