<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 }
Related
I have a simple gallery of square thumbnails, all of them have the same dimensions. Every thumbnail is also a link. I want this entire gallery to be horizontally aligned, but "margin: 0 auto;" doesn't work. Thanks for any help!
http://jsfiddle.net/ds2uockq/
HTML:
<div id="gallery">
<img src="http://placekitten.com/g/150/150" />
...
<div>
CSS:
#gallery {
margin: 0 auto;
}
Use text-align: center;
#gallery {
margin: 0 auto;
text-align: center;
}
working demo
Why did I use text-align?
Because #gallery contains inline element i.e. <a>. And to center an inline-element we use text-align.
Just give the width to the body and container.
CSS:
body{
width:100%;
}
gallery{
width:70%;
margin:0 auto;
}
Here's a simple method
#gallery {
display: block;
width: 100%;
text-align: center;
}
I am not able to center the banner img. I want it to adjust size when the window size changes. (to keep it in proper proportions on tablets/smartphones)
The image max size is 918px but margin auto does not seems to work. Does anybody have any ideas what could be the problem?
Thanks in advance
original page: http://www.syntra-limburg.be/nieuws/nieuwe-gecertificeerde-opleidingen-2014-2015
<style type="text/css">
#banner img{
max-width: 100%;
height: auto;
margin: 0 auto;
}
</style>
<div class="container-12">
<div class="grid-12" id="banner"><img alt="" src="/sites/files/content/slides/20140616-gecertificeerde-opleidingen-2014.png" /></div>
</div>
Add display: block to img
#banner img
{
display: block;
}
The banner image is getting stretchable, it doesnt look good when in smaller screen size. Remove it from the inline styles.
And try this
#banner img{
width: 800px;
max-width: 100%;
display: block;
margin: 0 auto;
}
just try this
#banner { text-align: center; }
You have to set the width to 100% and it works.
You'll need:
img {
width: 100%;
height: auto;
display: block;
margin: 0 auto;
}
I've moved onto using divs rather than tables.
I have a container with a repeat image as a background. It needs to auto size due to my dynamic content.
The issue I'm having is I want to put two divs in this container side by side.
When I float these divs this causes my auto container div to not expand with them. The only way I can solve the issue is by setting the container to a height which I can't do as this will be different on each dynamic page.
http://www.blockdesigns.co.uk/html5.php this is my example.
Code:
<body>
<div id="main_wrapper">
<header id="top_header">
</header>
<div id="main_body">This part should go all the way down to the footer.<br>
<div id="leftside">Float left div here</div>
</div>
<footer id="footer">
</footer>
</div>
</body>
CSS
#main_wrapper{
width:1000px;
margin: 20px auto;
text-align:left;
}
#main_body{
background:url(Body1000.jpg);
background-repeat:repeat;
text-align:center;
width:1000px;
}
#leftside{
float:left;
width:200px;
height:300px;
margin:10px;
}
Add overflow: hidden; to main_body
example
#main_wrapper {
width: 1000px;
margin: 20px auto;
text-align: left;
}
#main_body {
background: url(Body1000.jpg);
background-repeat: repeat;
text-align: center;
width: 1000px;
overflow: hidden;
}
#leftside {
float: left;
width: 200px;
height: 300px;
margin: 10px;
}
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;
}
I want to know how to center a div with CSS. I googled some stuff & checked on stackoverflow but it was conflicting with my CSS code.
Here's my code (just in case):
body, p, span, div {
font-family: 'Droid Sans', arial, serif;
font-size:12px;
line-height:18px;
color:#6d6d6d; }
.countdown {
padding-top:15px; width: 100%;
height: 68px;
margin:0 auto 0 auto;
bottom:0;
position:absolute;
}
.countdown .countdown_section{
background:url('images/backcountdown.png') no-repeat 1px top;
float:left;
height:100%;
width:54px;
margin:0 5px;
text-align:center;
line-height:6px;
}
.countdown .countdown_amount {
font-size:15px;
color:#ab7100;
text-shadow:0 0.8px #fedd98;
line-height:52px;
font-weight:bold;
text-align: left;
}
.countdown span {
font-size:8px;
color:#999999;
text-transform:uppercase;
line-height:26px;
}
<body>
<div class="countdown clearfix">
</div>
</body>
The following automatically centers the element horizontally:
margin: 0 auto;
You can center a div with a specific width using the following css:
#yourDiv {
width: 400px;
margin: 0 auto;
}
Provided fixed width is set, and you put a proper DOCTYPE,
Do this:
Margin-left: auto;
Margin-right: auto;
Hope this helps
To center a div use:
#content{
margin: 0 auto;
}
<div id="content">This will be centered horizontally</div>
<div style="margin:auto; width: 100px;">lorem</div>
The above answers will work for divs with relative or static positioning. For absolutely positioned elements (like your .countdown element, you'll need to set left: 50% and margin-left: -XXXpx where XXX represents half of the div's width (including padding and border).
(example: http://jsfiddle.net/7dhwG/)
This will center your page it works great.
#yourdiv {
width: width you want px;
margin: 0 auto;
}
You can also center an absolute position div by setting left to 50% and margin-left to -half of the full width in px.
div {
position: absolute;
width: 500px;
left: 50%;
margin-left: -251px;
}
Stop using margin: 0 auto, Cross browser way of doing this is Here I have tested it and it works perfectly on all browsers