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.
Related
Im trying to move a div inside another div down a bit, but when I use
margin-top: 10px;
It makes a white gap at the top. Heres the html:
<div id="topb">
<div id="selection">
</div>
</div>
And heres the CSS:
#topb {
background: url(images/tomato-background.jpg) no-repeat fixed;
background-size: cover;
height: 100%;
width: 101%;
margin-left: -10px;
}
#selection {
background-color: #4d4d4d;
width: 60%;
height: 500px;
margin: auto;
margin-top: 40px;
}
And heres a screenshot of the website:
For this, you can use position: absolute. Here is the code:
#topb {
background: url(images/tomato-background.jpg) no-repeat fixed;
background-size: cover;
height: 100%;
width: 101%;
margin-left: -10px;
}
#selection {
background-color: #4d4d4d;
width: 60%;
height: 500px;
margin: auto;
position: absolute;
top: 40px; /*This is where it is changed as well as the line above*/
}
Hope it helps! I think padding would still leave a background, so this is a better idea.
maybe you can modify the parent element by adding padding-top:10px; instead of modifying the child.
This is a "collapsed margin" problem.
It has been answered in this question :
Why would margin not be contained by parent element?
You would have to change the parent div to either (1) add a border, (2) position absolute, (3) display as inline-block, (4) overflow auto.
Refer to the posted link for more detail.
Here is the working fiddle Hope it may help.
position:absolute;
position:relative;
This is because when you have a block element (display: block) inside another block element, the margins will collapse. It will only be considered the largest margin.
So, in your example it will only consider one of the margins (40px).
See reference about collapsing margins.
There are a few workarounds. Choose any:
using padding instead of marginfor the component inside.
Change display type. e.g. display: inline-block.
Use absolute positioning.
Remove margin-top style in #selection, and apply padding-top to #topb
Hi!
This seems like a stupidly simple question, but I cannot seem to horizontally center the header DIV.
http://jsfiddle.net/1ucwafx6/
as you can see, the light blue rounded square is almost centered, but not quite. I've tried on multiple systems, browsers, and screen resolutions and the outcome is always the same. It is slightly further to the right. I really don't understand what is wrong here. I have also tried margin: 0 auto; however then it just doesn't do anything and just stays on the very left hand side.
It's due to the default margin on the body. Just set
body { margin:0; }
and you'll see the fix.
This should help you center it, assuming you want the position to stay fixed with your current HTML markup.
JS FIDDLE
#header {
position: fixed;
width: 90%;
background-color: #3498db;
left: 50%;
transform: translate(-50%, 0);
margin-top: 25px;
border-radius: 10px;
}
I removed the position fixed and set left and right margins to auto and it centers just fine.
http://jsfiddle.net/1ucwafx6/3/
CSS:
#header {
/* position: fixed; */
width: 90%;
background-color: #3498db;
margin-left:auto;
margin-right: auto;
margin-top: 25px;
border-radius: 10px;
}
Just add
#header {
left:0;
}
http://jsfiddle.net/1ucwafx6/4/
I'm currently trying to set a div at 50% of the page's height using
.vertical-align-form-control {
min-height: 75%;
min-height: 75vh;
align-items: center;
}
My current code can be seen here: http://pastebin.com/AjfUA26n
More at: http://infenterprises.com/contact/
I was able to apply this method to my About page without any problems. However, it appears that there is some sort of conflicting CSS that isn't allowing me to do the same with my Contact form.
I think i have understood correctly what you want to achieve.
If not then just answer.
Here is my CSS code to resolve your problem:
.vertical-align-form-control {
min-height: 75vh;
align-items: center;
position: absolute;
top: 25%;
margin: 0 auto;
width: 100%;
}
If you want to set an element to be positioned at x position of screen that i dont see how min-height can be used to do that.
Normaly if you want for example to position an element to the bottom-right corner of the screen like a footer image for example then you could use:
.footer-img {
position: absolute;
bottom: 1%;
right: 1%;
width: 200px;
height: auto;
}
and so on.
Hope this helps to resolve your problem.
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%;
}
Things i want achieve is quite simple
just at top a fixed position element that do not move while scrolling
down the document.
and after is a div#content have some margin-top from the top edge
and center in the window.
so the code is:
html
<div class='head-container' id="headerCom">
<header id="a"></header>
</div>
<div id="content" role="main"></div>
CSS
* {
margin: 0;
padding: 0
}
body {
width: 100%;
height: 100%;
position: relative;
}
.head-container {
position: fixed;
top:0;
left:0;
width: 100%;
height: 100px;
background: red;
_position:absolute; // make the ie6 support the fixed position
_top: expression(eval(document.documentElement.scrollTop)); // make the ie6 support the fixed position
}
header {
display: block;
width: 960px;
height: 100px;
margin: 0 auto;
position: relative;
zoom: 1;
background: blue;
}
#content {
border: 1px solid black;
margin: 130px auto 0 auto;
width: 960px;
height: 1000px;
background: #999;
margin-top: 150px;
}
all the modern browser is well support,but in ie(ie7,ie8,ie10) do not work correctly,things is just like it ignore the margin-top i set to the div#content;
so far i have checkout the other question on stackoverflow,and i try almost everthing i could.
when i change the margin-top of the div#content to the padding-top,things okay.
When i put a div.clear(clear:both)in between the div.header-container and the div#conetent,the things goes okay;
Or i follow other questions' solution that it caused by the hasLayout, and then take out the width and height of the div#content, the things is also okay, but in this way, i will need to put another div#inner-content inside the div#content, and set width and height to it to see the result.
so i am quite confused by the hasLayout, and i am not quite sure i am completely understand what it is and not quite sure what is happening in here in my code.
So actually can all you help me with this, is there any other solution could fix this problem, and explain this wired things to me?
Thank you anyway.
It works fine for me once I get rid of the last margin-top attribute. Do you know you have set it twice? Once with margin and them again with margin-top. If you edit just margins first value it wouldn't work because the last one will override the first one.