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>
Related
Hi so I was making a website and I just realized that it when I want to position the html element, it will position the element using the right side of it. Here's an example of what I mean. I was trying to position an image in the center using percentages. Trimmed down version of my css code: .image{position:absolute;right:50%;
So when I loaded the website, it shows up with the right corner of the picture at 50%, not the center of the image at 50%. Is there anyway to position using center of the image to position the picture at 50%, and not the left or right edge of the picture being at 50%? I don't want something like position:absolue;right:45% to move the picture over, but instead use the center of the picture to position the picture. If you need any more clarification just let me know.
Set a width for the image and then set the left and right margins to auto.
` {width: whatever you want; margin-left: auto; margin-right: auto; } `
You can do it easily using text-align, when element you want to position is inside some container, i.e:
HTML:
<div class="container">
<div class="image">Center me!</div>
</div>
CSS:
.container { text-align: center }
.image { display: inline-block }
Second approach: if you know the width of the element (.image). Let's say that it is 400px wide:
CSS
.image {
position: absolute;
left: 50%;
margin-left: -200px;
}
A little bit tricky, can cause a problem when the width of the screen is lower than width of the element.
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
Alright, so I'm trying to make div elements align down the middle (between two images) without using tables (because tables shouldn't be used for styling/layout).
I have the following individual elements:
img
img
div
And I want the final output, using CSS, to be:
Seems simple, right? Well, the trick is that the scores to the left and right of the images are variable width, and I want the center of the rounded rectangle to slice right between the two images, regardless of the widths of the score values. (Thus, I can't just wrap a div around the whole block and use text-align: center. Would do me no good.)
As you can see in my example pic, there is more space between the edge of the rectangle and the score on the right than there is on the left, because the left score itself is wider.
Also note that the images expand slightly above and below the rectangle div, which is another reason why using a table wouldn't be ideal.
I've tried to accomplish this layout using combinations of margin-left: auto, margin-right: auto, display: inline-block, etc., but I can't get the centered effect I'm looking for.
Here is a jsfiddle to play with.
Your help is greatly appreciated!
Here's the deal:
.team should have width: 50% and should be floated left. Or right. Whatever.
The images should be floated toward the center. The one on the left should be floated right, the one on the right should be floated left.
The images should also have position: relative and a negative top.
.team should also have text-align set. The one on left should have text-align: right
The outer container should have overflow set to visible (which is the default - I just wanted to mention it because other answers told you to use overflow: hidden. Which would break your "outside the box" stuff).
That should get you what you want. And here's proof (started before you posted your fiddle)
UI elements (things that are not content) should be CSS backgrounds. Make a composite image and make it the background for a wrapping DIV, then make two inside it - one floated left, the other floated right and with a bit of margin and padding everything will work just fine.
<div class="wrapper">
<div class="scoreLeft"></div>
<div class="scoreRight"></div>
</div>
All of the inner child elements of your div should have float: left. Then, the parent div should have overflow: hidden. From there, you can then add additional margin's to the div img elements.
Here is an example solution. The idea is that you have a wrapper do the grey background and size the bar. You than have a div half the size and align the text towards the center while putting enough padding to allow for background images.
HTML
<div class="wrapper">
<div class="scoreLeft">1231231</div>
<div class="scoreRight">123</div>
</div>
CSS
.wrapper {
background: grey;
background-image:url('http://i.stack.imgur.com/4fkZv.png');
background-size:400px 50px;
height: 50px;
width: 400px;
display: table; //Allow for vertical align
table-layout: fixed; //Allow for fixed widths of children
}
.scoreLeft, .scoreRight {
color: white;
display: table-cell; //Allow for vertical align
vertical-align: middle;
width: 50%;
-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; //Allow for 50% width with padding sitting inside the 50%. This can be mathed out so the width + padding * 2 = wrapper width and then you can use the default box-sizing.
}
.scoreLeft {
background-image:url('http://i.stack.imgur.com/CmWiD.png');
background-size:50px 50px;
background-repeat: no-repeat;
background-position:right;
text-align: right;
padding-right: 55px;
}
.scoreRight {
background-image:url('http://i.stack.imgur.com/Gkll9.png');
background-size:50px 50px;
background-repeat: no-repeat;
padding-left: 55px;
}
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
I have a bottom toolbar like this:
<div style="float:left;width:100%;position:fixed;z-index:210;bottom:5px;">
<div style="float:left;width:928px;border:1px solid #000;background:url('/images/noise-bg.jpg') repeat-x;height:26px;padding:5px;">
Toolbar Content
<div>
</div>
But this toolbar is aligned on left side of the page. I want this DIV to be in the center of the page. Means same space area on the both side(left and right) of the toolbar. I can't fix the width of the toolbar, it is always 100%. I tried by setting fixed margin-left but it is different on different browsers/resolutions and iPad.
Any idea ?
Thanks
Your div has width:100% and float:left, so it will be the same size of your page and you won't be able to center.
Set your width properly, remove that float and apply a margin: 0 auto rule on your div to center it.
I made a jsbin to show that working:
http://jsbin.com/obepad/2/edit
See my working demo on jsfiddle
the key thing is that you should remove float: left; from the second div and add margin: 0 auto;. If you can't do this please let me know
Editted based on your edited question:
Remove float: left and add margin: 0 auto to align the border box. text-align: center will align the text. You can check it here: http://jsfiddle.net/wFZNv/
This is the code:
<div style="float:left;width:100%;position:fixed;z-index:210;bottom:5px;">
<div style="width:928px;border:1px solid #000;background:url('/images/noise-bg.jpg') repeat-x;height:26px;padding:5px;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px; text-align: center; margin: 0 auto;">
Content
<div>
For your scenario, try:
<div style="width:100%;position:fixed;z-index:210;margin: 0 auto;">
Remove float for inner div. No mater how you position your div, float : left will put in to the left margin. use margin:auto to center your inner div