I am trying to make this <div> i have to center on the page but when I use align=center, some of the contents inside the div are also effected. Is there a way to prevent this?
You can use CSS (the div must have a width specified as well, see #j08691 comment):
div { margin: 0 auto; }
div should be changed to a more specific selector, such as the ID of your container (# denotes ID) or class (. denotes class).
Example:
#myDivID {}
.myDivClass {}
The reason this works is because the rendering engine always tries to optimize and balance the size of any components specified to be auto. Here, margin: 0 auto is short-hand for:
margin-top: 0;
margin-bottom: 0;
margin-left: auto;
margin-right: auto;
Here, the browser doesn't apply any margins on the top and bottom of the div, but when it sees that both the left and right margins are set to auto, it tries (and succeeds) to make them equal to one another by splitting the remaining space. This results in the div being pushed into the center of the page.
using pure css:
#content {
width: 10% ;
margin-left: auto ;
margin-right: auto ;
left: 45%;
top : 50%;
}
or
div { margin: 0 auto; }
Would this be acceptable?
Please see this, this should fix your issue
HTML
<div id="outer">'
dsadkjahdkjasgud
dbsudbasjdhbasjkdh<br />
dbsudbasjdhbasjkdh<br />
<div id="innerCenter">
dbsudbasjdhbasjkdh<br />
dbsudbasjdhbasjkdh<br />
dbsudbasjdhbasjkdh<br />dbsudbasjdhbasjkdh<br />
</div>
</div>
CSS
#outer{
width : 500px;
background-color:green;
}
#innerCenter{
margin:0 auto;
width : 50%;
background-color:red;
}
**Note: you can modify the widths as per your layout
Fiddle :http://jsfiddle.net/aasthatuteja/zKstw/
Related
So I understand how to center images when there is only one
using the css code block and margin but when I do that the images become on top of each other. I can hardcode the margins by doing margin-left: 30px but I also want to consider different screen size will change how the image is positioned. I would want to center it for all screens.
#image {
block:
margin:
}
jsfiddle
A simple approach might be to wrap your a and img elements in a wrapper div and apply the following CSS:
.wrap {
border: 1px dotted blue;
display: table;
white-space: nowrap;
margin: 0 auto;
}
Your HTML would look like:
<div class="wrap">
<a href="http://www.commnexus.org/evonexus-companies/hush-technology/">
<img src="http://www.hush.technology/wp-content/uploads/2014/07/evobadge.png" height="75" width="75" id="evonexus" class="evonexus">
</a>
<a href="http://www.sdvg.org/thecool2014/" style="margin-left: 20px;">
<img src="http://www.hush.technology/wp-content/uploads/2014/07/cool-companies-2014.png" height="75" width="75" id="coolcompany" class="coolcompany">
</a>
</div>
You can control the spacing between a elements by adding a left margin to the second a (or a right margin to the first).
See demo: http://jsfiddle.net/v9LBZ/
How This Works
What is needed here is a block level container that can shrink-to-fit the width of the two logos, and display: table will do that. You can then apply margin: 0 auto to center the CSS table.
However, to prevent the CSS table from wrapping the two a elements into a single narrow column (trying to get the smallest width), you need to add white-space: nowrap to keep all the inline a elements on a single line.
You could leave them inline elements and wrap them in a container element with text-align: center applied. See this fiddle.
You could wrap your image in div then use float css property to achieve this :
http://jsfiddle.net/b7TQs/1/
.left, .right{
width: 50%;
text-align: center;
}
.left {
float: left;
}
.right {
float: right;
}
I am trying to have 3 images aligned in one block. They have to stay in the same sized container and fit horizontally.
Here's the code:
<div class="container">
<img src="http://images2.webydo.com/31/313624/3958/21b785db-14ea-42f7-af0d-7e7a8d8019d9.jpg" />
<img src="http://images2.webydo.com/31/313624/3958/9657ddfd-81e8-4154-bc61-bbe30e4a8740.jpg" />
<img src="http://images2.webydo.com/31/313624/3958/909af36d-b941-4a20-9441-20505c035da3.jpg"/>
</div>
.container {
width: 300px;
height: 200px;
position:relative;
float: left;
text-align: center;
}
.container img {
width: 100%;
height: auto;
margin: 5px;
}
In my CSS solution, I divided the "container" class width by 3 (300px /3) and then subtracted 10px (which i got from padding-left and padding-right of each image). So a single image should have a width of 90px. However, I also wanted to subtract 5px more for browser spacing so the total width of each image should be 85px. Here is the code:
<html>
<head>
<style>
.container {
width: 300px;
height: 200px;
position:relative;
float: left;
text-align: center;
}
.container img {
width: 85px;
height: auto;
margin: 5px;
}
</style>
</head>
<body>
<div class="container">
<img src="http://images2.webydo.com/31/313624/3958/21b785db-14ea-42f7-af0d-7e7a8d8019d9.jpg" />
<img src="http://images2.webydo.com/31/313624/3958/9657ddfd-81e8-4154-bc61-bbe30e4a8740.jpg" />
<img src="http://images2.webydo.com/31/313624/3958/909af36d-b941-4a20-9441-20505c035da3.jpg"/>
</div>
</body>
</html>
Hm...I don't think you can have all three images in a horizontal line if you give them all a width:100%. That property would cause each image to take the full width of the container, meaning each image would be pushed to the next line.
You'll have to give the images a smaller width to fit them all on one line. 100% / 3 = 33.3% (rounded), so use that instead. Here's some modified CSS for .container img that seems to work:
.container img {
width: 33.3%;
height: auto;
padding:5px;
box-sizing:border-box;
-moz-box-sizing:border-box;
}
Note that in addition to changing the images' widths, I also changed the margin to padding, and made use of the box-sizing attribute (read more about it here). This lets you keep that same spacing of 5px around images, without bumping any images onto a second line.
Also, the HTML needs to be altered slightly. In this case, we're taking advantage of the <img> element's default display:inline-block to have them all display on the same line. However, any whitespace in between this kind of element will result in a space between the images, so that needs to be eliminated:
<div class="container">
<img src="http://images2.webydo.com/31/313624/3958/21b785db-14ea-42f7-af0d-7e7a8d8019d9.jpg" /><img src="http://images2.webydo.com/31/313624/3958/9657ddfd-81e8-4154-bc61-bbe30e4a8740.jpg" /><img src="http://images2.webydo.com/31/313624/3958/909af36d-b941-4a20-9441-20505c035da3.jpg"/>
</div>
If you don't understand what I mean by that, try formatting each <img> element onto its own line in the HTML, and see how that affects their positioning.
Here's a JSFiddle so you can see what this achieves. Let me know if you have any questions, and I'll be happy to help further!
EDIT: Alternatively, if you really want to keep the whitespace between your <img> elements in your HTML, you could compensate for the unwanted extra space with a negative margin. Just add margin-right:-4px; to your styles for .container img. Updated JSFiddle to show what this results in.
Here is a screenshot:
My only challenge is whether it would be possible to spill the left column out of the container. Is this possible at all? The container will not have a bg, it is only there for visual purposes.
#container { width: 960px; margin: 0 auto }
#left-column { ??? }
#right-column { width: 200px; float: right }
For more details as to what I'm trying to achieve, here's another screenshot:
The 960 container is marked by the teal rulers on the sides. The flights have a border at the top and bottom that extend all the way to the left and expands outside of the 960 container.
Something like this will do it:
<div id="container">
<div id="right-column"></div>
<div id="left-column"></div>
</div>
CSS:
#container { width: 100%; margin: 0 auto; display:inline-table }
#left-column { height:500px; background:#00ff00;width:auto}
#right-column { width: 150px; float: right;height:500px; background:#00ffff }
Check it here:
http://jsfiddle.net/h9XuQ/
If you insists putting the left div inside the container, it is impossible without help of javascript.
If what you want is just to take up the remaining section of the page and don't mind where it is placed, you may try the following:
#theLeftColumn {
position：fixed; /*or absolute if it is a direct child of body*/
margin-top:0px; /*set to other value if you need to leave space for header menu */
left: 0px;
/*280px = (width of container)/2 - (width of right fixed width column)
= 960px/2-200px */
width: -moz-calc(50% + 280px);
width: -webkit-calc(50% + 280px);
width: calc(50% + 280px);
/*if it is div, the default of display is block, else it is needed to be set */
display:block;
}
Notice that CSS3 is needed for calc function.
What you need is propably a wrapper element.
The content is obviously placed in a wrapper element which size must larger than 960px.
I guess it's all about the following code,
<div id="wrapper">
<div id="960container">
<div id="left-column"></div>
<div id="right-column"></div>
</div>
</div>
Is that what you want to ask?
Not sure whether you want to know the origin or the styling problem.
People frown upon the center tag, but for me it always works just the way I want it. Nevertheless, center is deprecated so I'll make an effort.
Now I see many people suggest the cryptic CSS margin: 0 auto; but I can't even get it to work (see fiddle here). Other people will go modify position or display, but that always breaks something else.
How can I center a span using css so that it behaves exactly like the center tag?
<div class="container">
<span class='btn btn-primary'>Click me!</span>
</div>
Span is an inline element, and the margin: 0 auto for centering only works on non-inline elements that have a width that is less than 100%.
One option is to set an alignment on the container, though this probably isn't what you want for this situation:
div.container { text-align: center }
http://jsfiddle.net/MgcDU/1270/
The other option is to change the display property of the span:
/* needs some extra specificity here to avoid the display being overwritten */
span.btn.btn-primary {
display: table;
margin: 0 auto;
}
Using display: table eliminates the need to hard code a specific width. It will shrink or grow as appropriate for its content.
http://jsfiddle.net/MgcDU/1271/
You can set .container { text-align:center; } so that everything inside div.container will be centered.
In general, there are two ways centering things.
To center inline elements (such as text, spans and images) inside their parents, set text-align: center; on the parent.
To center a block level element (such as header, div or paragraph), it must first have a specified width (width: 50%; for example). Then set the left and right margins to auto. Your example of margin: 0 auto; says that the top and bottom margin should be 0 (this doesn't matter for centering) ad that the left and right margins should be auto - they should be equal to each other.
The <center> element is really just a block-level element with text-align:center;. If you sent border: solid red 1px; on it, you can see that it's 100% wide, and that everything inside it is centered. If you change text-align to left, then its children are no longer centered. Example: http://jsfiddle.net/KatieK/MgcDU/1275/. Perhaps you should just consider your <div class="container"> with text-align:center; } to be equivalent to <center>.
You make the span block level, give it a width so margin:auto works
see this fiddle
.center {
display:block;
margin:auto auto;
width:150px; //all rules upto here are important the rest are styling
border:1px solid black;
padding:5px;
text-align:center;
}
UPDATE: In order to NOT specify a width and have natural width of element on the span you will have to use textalign on parent
see this fiddle
.container{text-align:center}
.center {
border:1px solid black;
padding:5px;
}
<span> is an inline element. <div> is a block element. That's why it is not centering.
<div class="container" style='float:left; width:100%; text-align:center;'>
<span class='btn btn-primary'>Click me!</span>
</div>
You can center the content of span only when you convert it into block, using 'inline-block' style.
Your parent element needs to have a larger width in order to let a child element be positioned within it. After that the trick with margin: 0 auto; is getting the parent and child container position and display values to be compatible with each other.
.container {
border: 2px dashed;
width: 100%;}
.btn {
display: block;
margin: 0 auto;
width: 25%;
}
http://jsfiddle.net/rgY4D/2/
I'm trying to center a block element (the WordPress caption box, including the image) but it won't work. I've tried:
.imagecenter {
margin-left: auto;
margin-right: auto;
display: block;
}
But it just won't work. I've also tried margin-left: auto; margin-right: auto; but that won't work either. Is there anything I'm doing wrong? This is what the W3C documentation says I should do.
It looks like this in the HTML (to clarify):
<div id="content">
........post here......
<div class="wpcaption imagecenter" style="width:225px">
<img src="blah" />
Blah.
</div>
.........post here......
</div>
I have no control over the width of the element. It's set by the user. The user wants the div to be centered. It's not working. I've looked over documentation but it still won't work.
EDIT: I HAVE ALREADY TRIED MARGIN-LEFT: AUTO AND MARGIN-RIGHT: AUTO. IT DOESN'T WORK.
In general, to position a div in the center, the technique is to make both the left and right margins auto and then give the div a width:
.centerDiv
{
margin-left:auto;
margin-right:auto;
width: XXX px;
}
Give it a width less than that of its parent.
.parent { }
.imgCenter { width:320px!important; margin:auto; }
<div class="parent">
<img src="foobar.jpg" class="imgCenter" />
</div>
An easier solution might be to set margin-left: auto, margin-right: auto and text-align: center (for the caption text) on all child elements of your containing element:
.imagecenter *{
margin-left: auto;
margin-right: auto;
text-align: center;
}
This means you won't have to explicitly set the width of your containing element, but has the drawback that your caption text will have a 100% width, which might look wierd.
I know this is an old question, but for those of who find this on Google, I found another answer:
Just give these attributes to your wrapper element and the contents will be center aligned.
width: 1024px;
margin-left: auto;
/* I have used 1024px since I set the minimum resolution requirements for my website as 1024 x 768 */