I've read alot about this problem and I think I make everything right, but something is missing.
Here is my code:
<div id="text">some text</div>
#text {margin: 0 auto; width: 1000px; display: block; font-size: 24px; color: #000;}
http://jsfiddle.net/yKBQD/
Looks like you're looking for text-align: center style, no margin: 0 auto: DEMO.
margin: 0 auto version would require another element within div#text: DEMO
Auto margins centre an element by increasing the left margin until it is equal to the right margin. If the element is wider then its container, then it will not shift the element at all. The JS Fiddle frame is rarely going to be over 1000 pixels wide.
Auto margins centre an element, not its content. You won't be able to see the position of an element (if it is as wide or wider than its container) unless you add a border, background, outline, etc so the edges become visible.
To centre inline elements and text inside an element, set text-align: center on the element containing them.
Related
My container div does not expand to fit its child div - which has a top: 20px value.
I don't even have floats and have used both overflow:hidden (cuts part of the child div) or overflow:auto (creates scrollbars).
See codepen example: Codepen
<div class="container">
<div id="model">fdsf</div>
</div>
Appreciate any solutions to this problem.
Remove top and position properties and use margin: 10px auto 0 auto;
#model {
background: yellow;
border: 1px solid orange;
width: 100px;
height: 100px;
margin: 10px auto 0 auto;
display: block;
}
Demo
1) In your example, the container is expanding to fit the child div correctly. The height of the child is 100px plus two times the border of 1px, in total 102px. Then, the height of the container is exactly 102px, as the developer tools in any browser can tell you.
Height of the contents totals 102px, thus the inner height of the container is 102px. This is by definition "expanding to fit the contents".
2) Now, you are setting position: relative for your child div. The following quote from Mozilla Developer Network should give a complete explanation to what is happening in your example.
Relative positioning:
This keyword lays out all elements as though the element were not
positioned, and then adjust the element's position, without changing
layout (and thus leaving a gap for the element where it would have
been had it not been positioned). The effect of position:relative on
table-*-group, table-row, table-column, table-cell, and table-caption
elements is undefined.
3)
Obviously, you can get rid of this effect by getting rid of relative positioning, and just using margin instead. Regarding your comment, no, top, right, bottom, and left should absolutely not work. They are meant to be used for a totally different thing, for what the quote above explains.
I checked MDN to see what means to have an auto value for margin property and it says: "auto is replaced by some suitable value, e.g. it can be used for centering of blocks."
But what it is that suitable value, and suitable for what?
I tried myself some experiments and I saw that if I add margin-left: auto, the container goes to right (like is floating to right):
#container {
background: red;
width: 120px;
margin-left: auto;
}
http://jsfiddle.net/sph2j6jx/
Does it mean that adding margin auto is actually something like "take all the space available"? And when you add both left and right margins it centers the div because it tries to take all the space from left and from right?
Auto margins
Depending upon the circumstances, provision of an auto value instructs
the browser to render a margin according to the value provided in its
own stylesheet. However, when such a margin is applied to an element
with a meaningful width, an auto margin instead causes all of the
available space to be rendered as whitespace.
From w3.org
#main {
width: 600px;
margin: 0 auto;
}
<div id="main"> Setting the width of a block-level element will prevent it from stretching out to the edges of its container to the left and right. Then, you can set the left and right margins to auto to horizontally center that element within its container. The element will take up the width you specify, then the remaining space will be split evenly between the two margins.</div>
I have two divs:
<div id="headercontainer" data-type="background" data-speed="5">
<div id="headersubcontainer">
<h1>Simple and Cost Effective Web Solutions</h1>
</div>
</div>
<div id="teamcontainer" data-type="background" data-speed="5">
<div id="teamsubcontainer">
<h1>Developed by a dedicated team</h1>
</div>
</div>
both have 100% widths and heights of 800px. The first heading I have set a top-margin: of 160px. Instead of moving the header lower into its parent div, it moves the parent div down with it as you can see in this picture:
Here is my relevant css:
h1{
font-size: 48px;
font-family: $header-font-stack;
font-weight: 100;
width: 400px;
}
#headercontainer{
width: 100%;
height: 800px;
background-image: image-url("background.jpg");
background-position: center top;
background-repeat: no-repeat;
}
#headercontainer h1{
text-align: center;
margin: 0px auto;
margin-top: 160px;
color: #610B21;
}
Using a padding works obviously, but I would like to be more proper and use a margin. How can set a top margin and move the heading lower into the container without moving the container with it?
This is due to margin collapsing:
Top and bottom margins of blocks are sometimes combined (collapsed)
into a single margin whose size is the largest of the margins combined
into it, a behavior known as margin collapsing.
This is resulting in the parent element reverse-inheriting the child element top margin.
You can prevent this by adding before the child element
Demo Fiddle
....or applying any of the below to the parent:
float: left / right
position: absolute
display: inline-block
Adding display:inline-block; to the parent likely being the preference if it is set to have a width to 100%
Demo Fiddle
just use box-sizing: border-box; on the parent and set the padding there instead of margin-top. It will help you keep consistent spacing on all sides anyways
JSFIDDLE
Just add some top-padding to the parent element. even 1px and it will fix it.
I would actually argue that this answer is better:
https://stackoverflow.com/a/49075574/2387316
Yes, I know it's my own answer, but I think it's important that we don't add random bits of padding, change box-sizing for no reason, add spurious elements to the DOM, or change display/padding simply to fix a display issue. Those solutions all cause problems on their own: SEO is worse, unpredictable box-sizing behavior when trying to do something else, annoyance caused by positioning and display changes, etc. This solution is good for SEO, is scalable, and has no other tangible effect when trying to do other things with your elements.
I have to design a circle with two h3 in it. Both of them should line up at the left side but still be centered in the circle.
I already have positioned everything right but I dont know how to left-align both <h3>.
Here is the js fiddle.
Ok I guess I explained it wrong. I want the <h3> lined-up left. But both maybe wrapped up in another element should be centered in the circle referring to the <h3> with the greatest width. But the text in there is a sample text. I cannot give a wrapping element a fixed width and position it with margin: 0 auto.
Wrap the H3 elements in their own div and position it using margin: 0 auto.
Once that is done, you can simply left or right align the text within the div.
eg:
<div class="h3Wrapper">
<h3>Foo</h3>
<h3>Bar</h3>
</div>
CSS:
.h3Wrapper { margin: 0 auto; }
h3 { text-align: left;}
Remove the text-align:center and use margin:auto. Please check http://jsfiddle.net/B3vdz/7/. I hope this is how you want it.
Is this how yout want it?
I used a new div for the text.
#lefft{
width: 90px;
margin: 0 auto;
padding-top: 50px;
position: relative;
}
http://jsfiddle.net/B3vdz/1/
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>