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>
Related
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/
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/
I can't understand why the following code does not make the image centered. Can you help me?
<div align="center" style="position:relative;">
<div style="position: absolute">
<img src="a.png"/>
</div>
</div>
You need to use auto margins and set left and right values if you want to center an absolutely positioned element.
#absolute-element{
left: 0;
right: 0;
margin: 0 auto;
}
Example
You have to set top and left attributes when using absolute
To center the image horizontally and vertically add left:0; right:0; top:0; bottom:0; margin: auto;
Demo
<div style="position:relative; height: 100%; background: #eee;">
<div >
<img style="position: absolute; left:0; right:0; top:0; bottom:0; margin: auto;" src="http://placehold.it/350x150"/>
</div>
</div>
If you want horizontally center then you have to define left and right property.
Have a look the DEMO.
<div style="position:relative; border-top:1px solid red;">
<div style="position: absolute; left:50%; right:50%;">
<img src="http://placehold.it/100x100" />
</div>
</div>
I have an image with three lines of text to the right. The text is centering on the remaining space on the line, but I would like to center it on the page so that all of the text is centered (the text below the image looks good). Is this possible?
<div style="position:relative">
<img src="RGB2748.jpg" style="float:left;" width="70" />
</div>
<div style=" height:10px; font-size:22px; text-align:center;">Text</div>
<div style="height:10px; font-size:20px; text-align:center;">Text</div>
<div style="height:10px; font-size:16px; text-align:center;">Text</div>
...
...
More text
Thanks
what do you mean by 'center'? vertically? so use e.g. 'line-height:100px' and 'vertical-align: middle'.
the position:relative doesn't make sense in this context. use float:left to position e.g. two divs side by side (beginning on the left side) and clear:both (as said), to continue positioning divs under these two.
edit:
one solution:
<div style="height:50px; font-size:22px; text-align:center; position:relative; width: 100%;">
<img src="RGB2748.jpg" style="position:absolute; top:0; left:0; width: 70px" />
Text
</div>
<div style="height:50px; font-size:20px; text-align:center; width: 100%;">Text</div>
<div style="height:50px; font-size:16px; text-align:center; width: 100%;">Text</div>
pro: text is centered to page
contra: if text is too wide it would be hidden in parts under the img
modified first solution (if you better like it this way):
<div style="height:50px; font-size:22px; text-align:center; position:relative; width: 100%;">
<img src="RGB2748.jpg" style="position:absolute; top:0; left:0; width: 70px" />
<div style="height:50px; font-size:22px; text-align:center; width: 100%;">Text</div>
<div style="height:50px; font-size:20px; text-align:center; width: 100%;">Text</div>
<div style="height:50px; font-size:16px; text-align:center; width: 100%;">Text</div>
</div>
another solution:
<div style="background: lightblue; width: 10%; float:left;">
<img src="RGB2748.jpg" style="float: left; width: 70px;" />
</div>
<div style="background: lightgray; width: 90%; float:left;">
<div style="line-height:50px; font-size:22px; text-align:center; width: 100%;">Text</div>
<div style="line-height:100px; font-size:20px; text-align:center; width: 100%;">Text</div>
<div style="line-height:10px; font-size:16px; text-align:center; width: 100%;">Text</div>
</div>
<div style="clear:both;">following text</div>
pro: text will be displayed not matter how long it is
contra: text isn't centered to the page, but only to the surrounding div
Add clear:both to the style of the first text block/div.
given the following code
<!DOCTYPE html>
<html>
<head>
<title>show stats</title>
<style>
span.main {
position:relative;
display:inline-block;
}
div.stats {
position:absolute;
bottom:50px;
background:black;
color:white;
padding:0px 15px 0px 15px;
font-weight:500;
}
</style>
</head>
<body>
<span class="main">
<img src="http://i.imgur.com/o2udo.jpg" alt="test" title="testpic"/>
<div class="stats">
<p>this is a caption</p>
</div>
</span>
<span class="main">
<img src="http://i.imgur.com/o2udo.jpg" alt="test" title="testpic"/>
<div class="stats">
<p>this is a caption</p>
</div>
</span>
<span class="main">
<img src="http://i.imgur.com/o2udo.jpg" alt="test" title="testpic"/>
<div class="stats">
<p>this is a caption</p>
</div>
</span>
</body>
</html>
I want to make div.stats the width of the containing span.main. Setting the width to 100% doesn't work, because the resulting width exceeds the width of the container by the amount of the padding (30px).
I can fix it by setting the padding of div.stats to 0 and then padding the paragraph inside this div. This seems to work, but I suspect the way I'm doing it is dumb. Is there a cleaner way to position this div across the width of its container, while maintaining its vertical position?
Add left:0 and right: 0 to div.stats:
div.stats {
position:absolute;
bottom:50px;
background:black;
color:white;
padding:0px 15px 0px 15px;
font-weight:500;
left: 0; /*Add this*/
right: 0; /*Add this*/
}
JSFiddle: http://jsfiddle.net/sT9vA/1/