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%;
}
Related
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.
I'm having an issue with horizontally centering a fluid image in a fluid div. From looking high and low, the solutions others have found are not working for me, either I'm trying to do something too hard (I doubt it) or I'm working with different medium.
HTML:
<body>
<div id="BackgroudDiv">
<img src="images/NumberTwo.png" alt="" id="FSBG"/>
</div>
</body>
CSS:
body {
margin: 0px
}
#FSBG {
width: auto;
height: 100%;
min-width: 1040px;
position: absolute;
min-height: 585px;
}
#BackgroudDiv {
width: 100%;
height: 1080px;
text-align: center;
display: block;
background-color: #BF2527;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
}
"Margin: auto" does nothing as the width of everything is variable. In the code as it is, the left edge of the image "NumberTwo" is centered on the page. I want the center of the image to be centered. It behaves just as it should scaling-wise, but not in the middle of the page!
Any help would be much appreciated, it's been driving me up the wall. Let me know if more information is needed.
H
You only need to remove the position: absolute; in the img:
#FSBG {
width: auto;
height: 100%;
min-width: 1040px;
min-height: 585px;
}
DEMO: https://jsfiddle.net/3w5rqg3d/1/
As you are using position absolute, you need to set the top, right and left to 0px; and then you can add margin-left and margin-right auto.
Example - https://jsfiddle.net/zvbn2fak/
top:0px;
left:0px;
right:0px;
margin-left:auto;
margin-right:auto;
Please note that this is not best practice using position absolute on an image when its not need. Please read the comment by lmgonzalves, below with a better fix.
You can use flexbox, but be wary that flexbox is not supported on older browsers.
#backgroundDiv {
display: flex;
justify-content: center;
}
And that's it. justify-content aligns the items inside in the flexbox along the direction of the flex. I'm not sure if it works on position: absolute items, but you can check it out.
Note: I've left vendor prefixes for the sake of brevity, but you'll likely have to add those to get the desired effect across browsers.
i have came across a problem, i am fairly new to CSS but how do i make one div go over the other? This is my code:
#left_box
{
margin-top: 0px;
min-width: 10%;
max-width: 10%;
height: 800px;
background: #C90;
border: thin 5px #33CCFF;
position: absolute;
z-index:1;
left: 16px;
top: 1px;
float:none;
}
#bar_outside
{
margin-top:75px;
min-width:10px;
max-width:2000px;
height:55px;
background:#ff69b4;
border:#ff69b4: 5px;
position:static;
z-index:2;
}
thanks for your help!
If you want one div to be on top of the other, you can change the position: static in your #bar_outside to position:relative as the z-index property just works for relative, absolute or fixed. See the fiddle.
If you want the divs to be positioned one to the side of the other, use the float CSS attribute accordingly in both your CSS classes. See the fiddle.
You don't need position: absolute. Float left and define width
I have a top div on my page, but above my navigation.
I want the company logo in the middle of this div. however, margin: 0 auto isn't working.
I've tried fiddling with the div positioning to be absolute and the image to be relevent, and vice versa.
I've tried the image to be center aligned, text aligned (silly enough), even left: 50%. left: 50% does actually work but because the width of the image is over 100px, then the logo isn't centered any more, even though the beginging of the image is at 50%.
I wanted to make it left 30% but that isn't fair on all screen sizes.
I just cant figure out how to make this image in the center of the div. Does anyone know how I can do this?
HTML
<div id="stripes">
<img src="JCC.gif" class="JClogo" />
</div>
<div id="navigation">
CSS
#stripes
{
width: 100%;
height: 185px;
background-image: url('stripes.png');
}
.JClogo
{
position: absolute;
margin: 0 auto;
height: 194px;
width: 389px;
}
if you positioned the element as absolute then margin 0 auto won't be work
Remove the position: absolute; and add display:block toJClogo css class.
.JClogo{
margin: 0 auto;
height: 194px;
width: 389px;
display:block;
}
JsFiddle Demo
I don't think margin:0 auto will work with absolute positioning. Either remove the position:absolute OR place left:50%; margin-left:-195px on .JClogo.
This should do what you're looking for:
#stripes
{
width: 100%;
height: 185px;
background-image: url('stripes.png');
text-align:center;
}
.JClogo
{
height: 194px;
width: 389px;
}
The issue is because of the code at:
position: absolute; // here
margin: 0 auto;
height: 194px;
width: 389px;
Position absolute makes it to float at the parameters provided.
So try out this, this will make the image float at the center of the element.
position: absolute;
top: 20%; // this
left: 20%; // and this
height: 194px;
width: 389px;
This way, you will change the parameters of the image and make it float where you want it to be. If you want to use position: absolute; otherwise, you can remove this and simply use margin: values.
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