I have the following Html code
<div id="team">
<h1>Team</h1>
<img src="assets/divider.png" id="divider">
<img src="assets/team.png" id="team_pic">
</div>
The following CSS
div#team {
margin: 0 auto;
margin-left:auto;
margin-right:auto;
right:auto;
left:auto;
}
However, the child elements divider and team pic are all the way to the left. I though margin:auto would center everything.
then I put the following into the child elements.
div#team img#team_pic {
width:704px;
height:462px;
margin-left:auto;
margin-left:auto;
}
Nope, nothing happen, the elements still to left and not centered.
You need to set a width to #team, for example:
div#team {
margin: 0 auto;
width: 800px;
}
... which is a shorthand version of:
div#team {
margin-top: 0;
margin-left: auto;
margin-bottom: 0;
margin-right: auto;
width: 800px;
}
Images are inline level elements by default. You need to use display:block; if you want your images and margin to work properly.
img{
display: block;
}
float will upset this too.. float:none; does the trick if you think it may be inheriting a 'float' directive from another rule somewhere.
Team needs to have a width to be able to use margin: auto.
div#team {
margin: 0 auto;
width: 400px;
}
Here is a fiddle: JS Fiddle
*Use the
display:block;
for the images classes.*
#team {
margin: auto;
width: 400px;
}
Basically margin depends on width if and only if we want to show our div in the center of the page.
If you donot want to give fixed width then we can go for width: max-content;
#team {
width: max-content;
margin: 0 auto;
}
Related
i have a problem in my css, i cant seem to center my image, unless i use padding, i tried using flexbox, wit justify-content, and align items, but it wont work, i don't know what to do, no matter what it wont center, unless i use padding. Can somebody help?
here is the code so far:
img {
padding: inherit;
margin:auto;
text-align:center;
}
here is the outcome of the webapage
Try This:
img {
padding: inherit;
margin:auto;
width: 200px;
display: block;
}
<img src="http://justcuteanimals.com/wp-content/uploads/2016/10/baby-bear-pictures-cute-animal-pics.jpg">
Option 1:
Setting a width so you can sets the margin to 0 auto
img { width:<image_size> margin: 0 auto }
Option 2:
Use block display and set the margin to auto
img { display: block; margin:auto; }
Use
img {
display: block;
margin:0 auto;
text-align:center;
}
Resuming all the answers:
If your image have the property display block, to center your image you will need to do the following:
img {
display:block;
width: 200px; // You need to add a fixed width
height:auto // Optional but i recommend, in case of you need a proportional redimensioning
margin:0 auto;
}
If your image "lives" free inside of your content, without display property, then you just need to center with the property text-align:center.
Example:
.center{
text-align: center;
}
<p class="center">
<img src="path/to/your/image.jpg" alt="Image Alt">
</p>
I hope it helps you.
please try to set the margin-right and marign-left to null.
img {
padding: inherit;
margin-left: 0;
margin-right: 0;
text-align: center;
}
Everything looks fine in both the HTML & CSS, so the div in question should be centered on the page. I have included some code snippets below, but the real code can be found here: http://jsfiddle.net/stbx08mk/
test-div at the bottom should be centered in the 1024 area, but it isn't. Why not?
#page-wrapper {
background-color: white;
margin: 0 auto;
overflow: auto;
padding: 0;
width: 1024px;
}
#test-div {
background-color: orange;
float: left;
height: 100px;
margin: 0 auto;
width: 800px;
}
Based on your fiddle, you need to adjust your #test-div style to float: none; and clear: both;
#test-div {
background-color: orange;
clear: both;
float: none;
height: 100px;
margin: 0 auto;
width: 800px;
}
Your JSFiddle Updated
floating divs to center "works" with the combination of display:inline-block and text-align:center.
First, remove the float attribute on the inner divs. Then, Text-align:center on the main outer div. And for the inner divs, display:inline-block.
Just tested it - display:inline-block on the inner divs works. Might also be wise to give them explicit widths too.
For your problem
Check this fiddle
Remove float:left; and add clear:both; to #test-div.
It just worked for me..
This will solve your problem
Try it..
The reason your #test-div is not centered, is because you're using the property float: left; on it in your CSS. The auto margins don't work on floated elements.
Try removing the float: left; property to get your desired result.
Float: left is whats making it ignore your margin: 0 auto;
Make sure your <html> and <body> tags take up the entire width of the browser and the margin and padding are both 0. This caused my content to be almost centered, but a little bit offset from center. Use this CSS:
html, body {
width: 100%;
margin: 0;
padding: 0;
}
In addition, in your #test-div use:
#test-div{
margin: 0 auto;
}
I have a div with width:100%; since I want to fill out the parent container.
I also want to have the contents of the div in its center. I can not find a horizontal-align:center attribute for the divs. How can I configure the div so that its contents are in the center?
I.e if the div is this big:
------------------------------------------------------------------------------------------------------------
Enclosing tags here
in the center
------------------------------------------------------------------------------------------------------------
try this:
div {
margin:0 auto;
}
Try this for fixed width
div.class_name {
width: XXpx;
margin: 0 auto;
text-align: center;
}
Dynamic Height
<div class="container">
<div class="inside">some content</div>
</div>
.container
{
text-align: center;
}
.inside
{
display:inline-block;
}
In HTML
<div style="text-align: center;"> </div>
That all you need for the CSS.
Read about margin: auto trick:
http://bluerobot.com/web/css/center1.html
You could try setting:
margin: auto
I'm not sure if it helps in this case.
div.class {
margin:0 auto;
width: 800px /*as desired*/ ;
}
You must assign width to div that you will want locate to center then right and left margin should get 0 value
{
width: 100px;
margin : 0 auto;
}
This might be what you looking for: padding:0 20%; using a % helps auto adjust the padding depending on how wide the parent div is. You can change 20% to your preferred number.
.div {
width:100%;
padding: 0 20%;
}
You should try text-align:center; to make content of div in center.
I have a simple layout that consists of a #container with
#container {
width: 775px;
margin: 0 auto;
}
to center it on the page with a maximum width of 775px
Then inside of that I have another div whose width varies depending on the content inside of it
.innerdiv { margin: 0 auto; }
I want it so if the .innerdiv is less than 775px, it will center within that 775px region.
The problem is that the above code is not working. I've wrestled with it for a bit but can't figure out what I need to do to accomplish this.
Using “margin: 0 auto;” in Internet Explorer 8
...“margin: 0 auto” centers a block, but only when width of the block is set to be less that width of parent.
To align a div to center.. use margin: 0 auto; but you must specify the width attribute of the . width: 400px; that must be less than the parent container <div>
for more information follow this link Link
write like this:
#container {
width: 775px;
margin: 0 auto;
text-align:center;
}
.innerdiv {
display:inline-block;
*display:inline /* IE */
*zoom:1;/* IE */
text-align:left;
}
Check this
http://jsfiddle.net/efEgq/
Give relative position to #container
#container {
width: 775px;
margin: 0 auto;
position:relative;
}
try this.
Just write align="center" for innerdiv.
<div id="headermain">
<div id="logo">
net
</div>
i'm unable to center the #logo div inside of #headermain
i'm giving margin:auto; but nothing happends. #headermain is also centered by using margin:auto;
Use width property :
#headermain { width: 1000px; margin: 0 auto; }
#logo { width: 400px; margin: 0 auto; }
div#logo must have a width property for margin: auto; to work
Is it? #logo { text-align: center }