This is a cut down version of my code: http://jsfiddle.net/f6GCz/
I'm trying to vertically center the "learn more" box using this code:
position: absolute;
margin-left: auto;
margin-right: auto;
What would cause this box not to be centered vertically? Even when I apply a width to it it doesnt work. Cross browser solutions (IE8+) preferred!
If you have to use absolute positioning, add this to your "learn more" box css:
left:50%;
width:90px;
margin-left:-45px;
Where the margin-left is always 1/2 of the container width.
Update
If you don't have to use absolute, then give the div a width and set the margin to:
margin:0 auto;
If desired, the width can be a percentage instead of a px value.
Updated fiddle with both results.
Update Two
If you want to align your learn more box without specifying it as absolute, put it inside a footer container that is positioned at the bottom, then use margin:0 auto on it. Something like this: Fiddle 2
Related
i want to create horizental and vertical div .
center of div popup outside like above images
and show arrow point to out side of text without bootstrap
As i have understand your questions i am trying to give you few suggestions as below:
For horizontal align you can simply give you popup div a width in px or % or any unit and add margin:0px auto;. if you are using position:absolute then give width and right:0px; left:0px; it will align horizontal your div.
For Vertical align you can either use line-height which should be same as height of your div.
or also you can use display:table; to parent div and for child div add display:table-cell & vertical-align:middle;
Hope it will work.
Generally you can just use absolute positioning, like:
.foo {
position: absolute;
top: 50%;
left: 50%;
width: 100px;
height: 100px;
margin: -50px 0 0 -50px;
background: lightblue; //not necessary of course
}
This way it will end in the middle of the screen (with some limitations ;)).
Another option is to use flex-box, but I would downvote it because of flex-box performance.
If you need to position it inside another div, yet absolutely centered, it will go quite similar, yet parent element has to have absolute positioning as well, in order for child element to get it right.
I'm trying to make a header which contains two buttons and a "logo". The two buttons should float right and left, relative to the browser and the "logo" should be in the absolute horizontal center, again relative to browser.
It all worked out fine until I realized that the logo sits in the center between the two buttons which differ in size, putting it off-centre.
Here's my code: Clicky
I tried some absolute positioning, but it did nothing, probably due to ignorance on my part.
#head {
position: absolute;
left: 50%;
}
It looks like you tried to use the 'text-align: center' on the parent container to make this work. And it is working, except that it's centering all 3 of those elements as a whole. You can see that here if you remove the floats: http://jsfiddle.net/aHP6D/1/.
So, one option would be to position the buttons absolutely, thus taking them out of the normal document flow. This means the only <span> that's left (and not absolutely positioned) is the one you want centered.
You can see that working here:
http://jsfiddle.net/aHP6D/2/
To center something, just set the margin to auto:
#head{
position:relative;
display:block;
margin-left:auto;
margin-right:auto;
}
to center it completely:
#head{
position:relative:
margin:auto;
}
Setting #head’s position to absolute and left property to 50% will center its left side. Setting its margin-left property to negative half its width will pull it back to the center.
#head {
position: absolute;
left: 50%;
width: 100px;
margin-left: -50px;
}
See http://jsfiddle.net/exs78/ for an example.
Could anyone tell me how i would get this div to be centred at the top of the screen, with equal distances from the bounds of the page on both the left and the right.
position:relative;
width:800px;
height:70px;
background-color:#0CF;
left: 15%;
Thanks!
By specifying automatic margins for left and right edges:
margin:0 auto;
This forces the browser to equalize them within the parent, which has full browser width, so it's centered since you have explicitly set the width.
Sample implementation.
Since you have a width set, you should use
margin:0 auto;
You should try this jsfiddle :
HTML :
<div>This is some DIV</div>
CSS :
div {
width : 50%;
margin : auto;
border : 1px solid black; // To see that it is centered
}
Usually when doing this you want to do something like below. It will stay withing the bounds of it's parent element and wherever you put it on the page but will place it in the middle.
If you want to put it in the code:
style="
margin-left:auto;
margin-right:auto;"
Otherwise just add that to your css for the div.
using this method will not set your upper and lower margin to auto.
use margin: 0 auto;
0 - stands for 0px top and bottom sides of the page
auto - means it'll adjust itself according to the available window size and can make it center.
Well it depends on the parent element, and why you have it as position:relative;, but generally to center a block level element with a set width, within it's parent, you can just use:
margin:0 auto
A seemingly simple issue, but other solutions I found didn't quite work here.
Attempting to center '.grid-wrapper-inner' within '.grid-wrapper'
.grid-wrapper {
background:grey;
display:block;
margin:0 auto;
width:90%;
padding:80px 0;
text-align:center;
}
.grid-wrapper-inner {
background:yellow;
display:inline-block;
margin:0 auto;
text-align:left;
}
I thought 'display:inline-block' (with 'text-align:center' on the parent) would achieve this, but have hit a brick wall
Best explained here:
http://jsfiddle.net/YrF9C/1
Essentially need to prevent grid-wrapper-inner from taking up 100% of its parent div so it can be centered.
I did get the green boxes (see link) centered by using inline-block on those, but orphaned boxes at the bottom were then centered, which isn't the desired effect.
Many thanks in advance for any help!
You have to set width to .grid-wrapper-inner. You can try set 90%, you will notice the difference.
.You could do one of two things:
add a width to the inner wrapper
.grid-wrapper-inner {
background:yellow;
display:inline-block;
margin:0 auto;
width:80%;
text-align:left;
}
or you could add padding to .grid-wrapper
You can use margin:auto to center horizontally, but for that to work the inner div you're trying to center needs to have some sort of width specified. Otherwise it just stretches and the auto margin is 0. Technically this is centered too, but not what you want.
For example try adding width: 86% to .grid-wrapper-inner.
Alternatively if you don't want to set a width, you'll need to set an actual margin that's the same left and right, e.g. change margin:0 auto; in .grid-wrapper-inner to margin: 5% or margin: 50px.
Instead of padding:80px 0; change it to padding:80px;. You are setting the padding only for top and bottom but the left and right is 0 so the inner div is expanding up until the left & right border of the wrapper div. Its still centred both vertically and horizontally just padding is 0 on the left and on the right.
Setting width to .grid-wrapper-inner, would solve your problem, but apparently you cannot or don't want to do it. Then, if you still want to make the layout adapt to screen size, perhaps you could think about using CSS media queries?
I was wondering how I can center this http://prntscr.com/hv2q7 It is hanging off and I want it to be centered like this http://prntscr.com/hv2ue so that the gray part is coming into the border. Here is the css code and html for it :
The css:
#banner{
height: 279px;
width: 998px;
margin-right: 0px;
margin-left: 0px;
background-image:
url(/template/default/images/layout/background/newlayout/test.png);
}
The html :
<div id="banner" ></div>
You want to set your left and right margins to auto, not 0px.
Try this, it's the shorthand for setting your top/bottom margin to 0 and your left/right to auto:
#banner {
margin:0 auto;
}
Centering with css normally revolves around the use of margin:auto;
In this case you're looking at left and right margins being auto, so something like margin:0 auto; As you try it out for your full page specifically you may find you have to set the elements' display to block or the float or even a position, depending on the browser. Though those are usually not necessary.
Also, if the div really only contains the background image, you might set the background-repeat to none and the background-position to center. That would only center in the div, so if the div is actually showing as the width and height of the image, it wouldn't change anything, but if the div is filling the width of it's containing block, then you'd get left and right centering.
put this arround your banner code:
<div align="center"> "your banner code" </div>