How do i position this hotspot element to be (0,0) at top left relative to the image whilst maintaining it in the centre of the container?
Ive tried several things but it keeps being positioned relative to the container because the image is displayed as block to be centered. But I want the button to be relative to the image not the blocked image..
--Update--
I can make it position correctly if i unblock the image but this uncenters it.
HTML
<div class= "img-container">
<img id ="img" src = "resources/images/androg.front.jpg">
<button id="hotspot-button" class="btn btn-fab"></button>
</img>
</div>
CSS
.img-container{
position: relative;
display: block;
height: 100%;
vertical-align: middle !important;
margin-left: auto;
margin-right: auto;
}
#img {
height: 100%;
//position: float;
position: relative;
display: block;
vertical-align: middle !important;
margin-left: auto;
margin-right: auto;
}
#hotspot-button {
position:absolute;
top:0%;
left:0%;
}
You are almost there. All you need to do is update your .img-container to include this:
.img-container{
display: table;
}
This will position the #hotspot-button over the top of the image with the coordinates 0,0 from the top, left.
Here is the link to the JSFiddle.
ok. i fixed it by manually positioning the container and having the image float and the hotspot absolute.
.img-container{
position: relative;
display: block;
height: 100%;
//vertical-align: middle !important;
//margin-left: auto;
//margin-right: auto;
left: 40%;
}
but this is a hack not really a fix imo - since most HTML5 resources i found said that block/margin method is the correct way to centre.
Related
I have an image inside of a div to put a button on the image. I've searched around the web but can't find any way to center the image.
I've tried making it it's own class and centering the img tag itself, but none of them seem to work.
<div class="container">
<img src="https://cdn.discordapp.com/avatars/543553627600584735/470015f633d8ae88462c3cf9fa7fd01f.png?size=256" alt="utili">
Utili
</div>
The image should be centered in the middle of the page, so I can line up 3.
In HTML:
<img src="paris.jpg" alt="Paris" class="center">
To center an image, set left and right margin to auto and make it into a block element:
.center {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
}
So, you can center any image while its inside a div. I hope this might help you.
You could position the .btn absolute to the relative container. If you know the size you want your image, even better.
How I would attempt to achieve it:
.container {
position: relative;
height: (the height of your image);
width: (the width of your image);
}
img {
position: relative;
width: 100%;
height: 100%;
z-index: 1;
}
.btn {
position: absolute;
bottom: (however far you want it from the bottom in pxs - so lets say 10px);
left: 50%;
transform: translateX(-50%);
z-index: 2;
}
I feel like this is an easy fix but my code isnt working and I'm not sure why.
I want to align the 'voip innovations:your premier wholesale voip carrier' image to the bottom of the div. I made the bottom green for reference.
I tried
#cityBackground{
position:relative;
display:table-cell;
vertical-align: bottom;
background-image:url(../images/city_background_line_vi.jpg);
background-repeat:repeat-x;
height:500px;
background-color:green;
}
#cityBackground img{
vertical-align:bottom;
display:block;
margin-left: auto;
margin-right: auto;
}
But it doesnt seem to work.
Here is a link to the site
Link
Is there something I'm missing here?
EDIT -
Sorry I didnt explain clear enough. I dont want the background-image moved down. I want the logo moved down.
Picture for reference
The CSS property background-position controls where the image sits, not vertical-align. Vertical-align is for content. A background image is not content.
You could absolutely position the img element relative to to #cityBackground.
#cityBackground img {
position: absolute;
bottom: 10px;
left: 50%;
margin-left: -174px;
}
Since the img width is fixed, you could use left:50% and margin-left:-174px to center it horizontally. The value -174px is half the img width.
Can try with adding margin-top to the image.
#cityBackground img {
display: block;
text-align: center;
width: 348px;
margin:436px auto 0 auto;
}
this is your code check this one
#cityBackground img {
position: absolute;
bottom: 0px;
left: 40%;
right: 50%;
}
I want to position an image into a center square and fill in the remaining space with colour. With the below code though, my image is on top and the text "test" is right below the image. I want the text to be outside the 120x120 square.
I tried the below code:
CSS (included in head):
.img-container {
width: 120px;
height: 120px;
display: inline-block;
overflow: hidden;
background-color:#000;
}
.img-container img {
width: 100%;
height: 100%;
}
HTML:
<a class="img-container" href="http://google.com"><img src="http://couponcoupon.biz/image/logo/landmsupply.com.jpg" /> Test </a>
Look at this article: http://coding.smashingmagazine.com/2013/08/09/absolute-horizontal-vertical-centering-css/
It has a great breakdown of absoulte center:
.Absolute-Center {
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
A fiddle with it applied to your example: http://jsfiddle.net/bhlaird/XgNXa/
I also moved the text down with a negative bottom: setting. I'm not wild about it, I'd add a wrapper div around the img-container a to have the text below it, but I didn't want to change your markup too much.
.img-container span {
position:absolute;
bottom: -20px;
left:0;right:0;
}
Wrap your text in a <span> then use CSS to move it around
Make sure your .img-container has position:relative; set and remove overflow:hidden;, then do this
.img-container span {
position:absolute;
left:125px;
your text will be wherever you want it.
As for the image being in the center. If it is a dynamic image (changing all the time) You will have to either experiment with display:table-cell or look into some javascript. If the image is the same one every time, you can just position it inside your img-container with position:absolute, top:45px or wherever center is.
First off, there's a typo in your example
height: 100%px;
this must be either 100% or 100px, but not both.
You can use background-image and background-position to center the image
CSS:
.img-container {
width: 120px;
height: 120px;
display: inline-block;
background-image: url(http://couponcoupon.biz/image/logo/landmsupply.com.jpg);
background-repeat: no-repeat;
background-position: center center;
background-color:#000;
}
To move the text below the square, remove overflow: hidden and add a margin to a wrapper around the text
HTML:
<a class="img-container" href="http://google.com">
<div class="center">Test</div>
</a>
CSS:
.img-container .center {
margin: 120px 45px;
}
Complete JSFiddle
My site has a 900px div #content that is centered with margin-left: auto and margin-right: auto. I have an image that I need to display behind the div which will partially overlap #content.
The image is set to display as block at present and I can get it to where it needs to be, but it doesn't allow #content to draw over the image. I can get #content to display over the image with position: absolute however this prevents the use of margin-left / margin-right auto to center.
My current positioning, which gets it where it needs to be is:
img#watermark
{
margin-left: auto;
margin-right: auto;
display: block;
padding-left: 900px;
}
#content just needs to appear over the watermark.
Help greatly appreciated.
html:
<img src="http://upload.wikimedia.org/wikipedia/en/2/24/Lenna.png" />
<div></div>
css:
div {
margin:auto;
width: 512px;
height: 512px;
background: rgba(0,0,0,.4);
position: relative;
}
img {
position: absolute;
left: 50%;
margin-left:-256px;
}
http://jsfiddle.net/Db2cw/
the solution is to have a surrounding div on the #content div, and that surroinding div positioned absolutely and with a defined width and height.
Ex:
html:
<div id="outter">
<div id="image"><img src="something.jpg" /></div>
<div id="contentOutter">
<div id="content">the content here</div>
</div>
</div>
CSS:
#outter {
width: 1000px;
height: 300px;
position: relative;
}
#image {
width: 1000px;
height: 300px;
position: absolute;
}
#contentOutter {
width: 1000px;
height: 300px;
position: absolute;
}
#content {
margin: 0 auto;
width: 900px;
}
Example here: http://jsfiddle.net/qwEhv/
"I can get #content to display over the image with position: absolute however this prevents the use of margin-left / margin-right auto to center."
What you might need to do here is to have an additional div - call it #contentWrapper for example and center it using margin-left and right, set position to relative. Put div #content inside the wrapper div and position absolute. This should allow you to make #content look centered.
check out the site wplayout.com. In home page I have a gallery. I would like to place a "premium" tag image on top of each image shown on home page gallery. Currently the premium image is shown on top right corner of the home page. how to achieve that?
so far i have
.ribbon {
background: url("images/premium.png") no-repeat top right;
width: 100px;
height: 102px;
overflow: hidden;
/*text-indent: -9000px;*/
position: absolute;
top: -3px;
right: -3px;
z-index:500;
display: block;
}
and in html I have
<span class="ribbon"></span>
Thanks in advance
i think that the position:relative has to be applied to ribbon and not the container div.
Try putting
.ribbon
{
background: url("images/premium.png") no-repeat top right;
width: 100px;
height: 102px;
overflow: hidden;
/*text-indent: -9000px;*/
position: relative; /*changed*/
right: -204px; /*changed*/
top: -230px; /*changed*/
z-index:500;
display: block;
}
tried this using firebug & it worked. Hope it works for you.
Make sure the div containing the 'premium' image has position: relative set on it, like so:
Markup:
<div class="my-image">
<img src="whatevs.jpg">
<span class="ribbon"></span>
</div>
CSS:
.my-image {
position: relative;
}
Divs with absolute positioning (your ribbon) are positioned relative the first parent that has position: relative, or relative to the body if no such parent exists.
Use the z-index selector in css
For your premium content add z-index:999; and on the image below use z-index:0;