I am trying to stack a div on top of a div and center those two divs horizontally in the page.
.sandBox{
position:relative;
}
.product-image, .option-image{
position:absolute;
margin-left:auto;
margin-right:auto;
}
.product-image{
z-index:-1;
}
<div class="sandBox">
<div class="product-image">
<img src="main-product-image.jpg" width="1440" height="560" alt=""/>
</div>
<div class="option-image">
<img src="overlay.png" width="1440" height="560" alt=""/>
</div>
</div>
This stack part works fine but I can not seem to get them centered no mater what I try.
This should make them centered.
.product-image, .option-image{
position:absolute;
margin-left:auto;
margin-right:auto;
left: 0; /*NEW*/
right: 0; /*NEW*/
}
DEMO: http://jsfiddle.net/hno8bxty/
Related
How do I keep the balloon image position stick to the grid image as you resize it?
Balloon1 and B2 are actually inside grid 5 and 7 but if you resize left right, the Balloons will offside.
Do I need a special calc or javascript / jquery library for that?
Thanks.
updated fiddle
.container{
max-width:600px;
max-height:400px;
}
.image-container{
width:70%;
float:left;
position:relative;
}
.img-grid{
max-width:100%;
max-height:100%;
}
.balloon{
position:absolute;
left:30%;
top:50%;
}
.balloon2{
position:absolute;
left:60%;
top:15%;
}
Resize this area
<div class= "container">
<div class="image-container">
<img class="img-grid" src="https://image.ibb.co/hFUHdz/example18.png" />
<img class="balloon" src="https://image.ibb.co/b445WK/tkp_5_balloonpop.png"/>
<img class="balloon2" src="https://image.ibb.co/b445WK/tkp_5_balloonpop.png"/>
</div>
<div class="text-container">
</div>
</div>
Use media queries at say four points throughout the resize, i.e.
#media only screen and (max-width: 600px) {
img{width:60%;height:auto;}
}
Just play about with the image width.
You have to decrease size of the balloons when image gets smaller.
In order to do that you can set ballons width in percentages.
.container{
max-width:600px;
max-height:400px;
}
.image-container{
width:70%;
float:left;
position:relative;
}
.img-grid{
max-width:100%;
max-height:100%;
}
.balloon{
position:absolute;
left:30%;
top:50%;
width: 6%;
}
.balloon2{
position:absolute;
left:60%;
top:15%;
width: 6%;
}
Resize this area
<div class= "container">
<div class="image-container">
<img class="img-grid" src="https://image.ibb.co/hFUHdz/example18.png" />
<img class="balloon" src="https://image.ibb.co/b445WK/tkp_5_balloonpop.png"/>
<img class="balloon2" src="https://image.ibb.co/b445WK/tkp_5_balloonpop.png"/>
</div>
<div class="text-container">
</div>
</div>
Here is updated fiddle.
Hope this is what you were looking for. I have set the image width to 8% so as to resize when screen is resized.
.container{
max-width:600px;
max-height:400px;
}
.image-container{
width:70%;
float:left;
position:relative;
}
.img-grid{
max-width:100%;
max-height:100%;
}
.balloon{
position:absolute;
left:30%;
top:50%;
width: 8%;
}
.balloon2{
position:absolute;
left:60%;
top:15%;
width: 8%;
}
Resize this area
<div class= "container">
<div class="image-container">
<img class="img-grid" src="https://image.ibb.co/hFUHdz/example18.png" />
<img class="balloon" src="https://image.ibb.co/b445WK/tkp_5_balloonpop.png"/>
<img class="balloon2" src="https://image.ibb.co/b445WK/tkp_5_balloonpop.png"/>
</div>
<div class="text-container">
</div>
</div>
How can I put a div with text, logo or any more stuff on the center of this banner, like the example?
<div class="banner">
<img src="img/banner2.jpg" width="100%" alt="Nasajon Sistemas">
</div>
Example :
My Page
Here there is an example you can fit to your needs:
.center{
text-align:center;
width:200px;
height:100px;
background-color:red;
position:absolute;
top: 50%;
left:50%;
margin-left:-100px;
margin-top:-50px;
}
.outter{
width:100%;
height: 500px;;
background-color:black;
}
<div class="outter">
<div class="center">
<h1>Mywebsite</h1>
</div>
</div>
https://jsfiddle.net/alexcuria/uunwbqyb/
So I have a div inside a div. The content in the child div needs to be text-aligned left and the child div itself needs to be centered within the parent div. My problem is, I can't get the child div to only be the width of its content so I can center it. It keeps stretching the length of the parent div. I've tried display:inline-block, inline, table. nothing is working. How do I get the child div to be centered within the parent, but have the child div content be aligned to the left?
Here is my code.
HTML:
<div class="gallery">
<div class="sub_gallery">
<a class="image" href="pic1.jpg"><img src="pic1.jpg"></a>
<a class="image" href="pic1.jpg"><img src="pic1.jpg"></a>
<a class="image" href="pic1.jpg"><img src="pic1.jpg"></a>
...
</div>
</div>
The CSS:
.gallery {
width:100%;
text-align:center;
}
.sub_gallery {
padding:6px;
overflow:auto;
text-align:left;
display:inline-block;
}
.image {
display:inline-block;
width:200px;
height:200px;
overflow:hidden;
position:relative;
margin:6px;
}
.image img {
position:absolute;
top:-10000px;
bottom:-10000px;
left:-10000px;
right:-10000px;
margin:auto;
width:100%;
}
EDIT:
Here is a simple diagram of what I want it to look like:
Diagram
This answer makes things quite different but try it. I am quite sure this will help because it centers the images perfectly on the page.
HTML:
<body>
<div class="gallery">
<div class="sub_gallery">
<center>
<img class="image" src="pic1.jpg">
<img class="image" src="pic1.jpg">
<img class="image" src="pic1.jpg">
...
</center>
</div>
</div>
</body>
CSS:
.gallery {
width:100%;
text-align:center;
}
.sub_gallery {
padding:6px;
overflow:auto;
text-align:left;
width:100%;
}
.image {
width:200px;
height:200px;
overflow:hidden;
position:relative;
margin:6px;
}
.image img {
position:absolute;
top:-10000px;
bottom:-10000px;
left:-10000px;
right:-10000px;
margin:auto;
width:100%;
}
I hope this was helpful.
I am trying to keep a div at the bottom of the screen always. And as the div width is smaller than the screen so it should be at the middle of the screen. The First thing is working but it if floating left always.
The code is
<div id="catfish" style="position:fixed; bottom:0; z-index:5000; width: 468px; margin: 0px auto;">
<div style="position:absolute; margin-bottom:0px; z-index:15;">
<img src="http://secretdiarybd.com/wp-content/uploads/2015/05/close.gif.png" alt="close" height="20"></img>
</div>
<div>
Some elemnt here
</div>
</div>
jsfiddle example
Please help me.
You have to add left and right to your div with value 0.
If you also want the your text in the middle you have to add text-align: center;
<div id="catfish" style="position:fixed; bottom:0; left:0; right:0; text-align:center; z-index:5000; width: 468px; margin: 0px auto;">
<div style="position:absolute; margin-bottom:0px; z-index:15;">
<img src="http://secretdiarybd.com/wp-content/uploads/2015/05/close.gif.png" alt="close" height="20"></img>
</div>
<div>
Some elemnt here
</div
</div>
Hope that helps!
Add a margin-left with the half of the width. Now you can move the container 50% from left. Here you can find a working example:
#catfish {
position:fixed;
bottom:0;
z-index:5000;
background-color:#f00;
left:50%;
margin-left:-234px; /* Half of the width */
width: 468px;
}
<div id="catfish">
<div style="position:absolute; margin-bottom:0px; z-index:15;">
<a href="Javascript:void(0);" onclick="document.getElementById('catfish').style.display='none'">
<img src="http://secretdiarybd.com/wp-content/uploads/2015/05/close.gif.png" alt="close" height="20"/>
</a>
</div>
<div>Some elemnt here</div>
</div>
<div id="catfish" style="position:fixed; bottom:0; z-index:5000; margin: 0px auto;left: 50%; transform: translateX(-50%); padding-left: 30px;">
<div style="position:absolute; margin-bottom:0px; z-index:15;left: 0;">
<img src="http://secretdiarybd.com/wp-content/uploads/2015/05/close.gif.png" alt="close" height="20"></img>
</div>
<div>
Some elemnt here
</div
</div>
I want to center these 4 images. Horizontally it is working but vertically it won't work. Does anybody knows how to solve this problem? At the moment I've got a black header/footer section with 4 images centered horizontally. Everything is scalable but not the height of the images.
Am doing it right?
HTML:
<section>
<div class="pic">
<img src="img.png" alt="Pic" />
</div>
<div class="pic">
<img src="img.png" alt="Pic" />
</div>
<div class="pic">
<img src="img.png" alt="Pic" />
</div>
<div class="pic">
<img src="img.png" alt="Pic" />
</div>
</section>
CSS:
body {
margin:0;
padding:0;
max-width: 100%;
max-height:100%;
}
section {
position:absolute;
top:5%;
bottom:5%;
left:0;
width:100%;
height:90%;
}
section img {
width:12.5%;
float:left;
margin-left:10%;
}
Assuming the width of the image equals the height of the image (like the code you gave has), you can just use margin-top of 50% - imageHeight. That would look like
section img {
width:12.5%;
margin-top:32.5%;
float:left;
margin-left:10%;
}
Demo
If they're not, you can use this pure CSS approach
I think its easier to wrap the images in a container and then center the container in the container's parent, in this case you could use an Article tag to wrap the images an then center that article in the section like this
HTML
<section>
<article>
<div class="pic">
<img src="img.png" alt="Pic" />
</div>
<div class="pic">
<img src="img.png" alt="Pic" />
</div>
<div class="pic">
<img src="img.png" alt="Pic" />
</div>
<div class="pic">
<img src="img.png" alt="Pic" />
</div>
</article>
</section>
CSS
html, body {
height: 100%;
width: 100%;
}
section {
top: 5%;
left: 0%;
width: 100%;
height: 90%;
/* strech */
overflow: hidden;
}
article {
width:80%;
height:40%; /* change this to set height */
/* CSS absolute center begin */
border: 2px solid #0000ff;
margin: auto;
position: absolute;
display: inline-block;
top: 0;
bottom: 0;
left:0;
right:0;
/* CSS absolute center end*/
}
.pic {
position: relative;
float: left;
width: 12.5%;
height: 100%;
margin-left: 10%;
}
.pic img{
position: relative;
width:100%;
height:100%;
}
Hope it help you
You can give the section position:relative; and then do a trick with the images.
The sample below makes them centered of the section, if you want to have the images spread out, but vertically aligned, you need to do this trick on the containing element (like a dive around the images in the section:
section {
position:relative;
top:5%;
bottom:5%;
left:0;
width:100%;
height:90%;
}
section img {
/*width:12.5%;
float:left;
margin-left:10%;*/
position:absolute;
top:50%;
margin-top:-25%;/* should be half the height of the image */
left:50%;
margin-left:-25%;/* should be half the width of the image */
}