My friend and I are coding a quick web site and are having issues centering the elements with CSS. We have tried using the margin: 0 auto command on the individual elements, but it didn't work. All the other style changes from the CSS sheet work. Can anyone tell me why margin: 0 auto didn't work or a way to center all the elements in the body?
Html Code:
<!DOCTYPE html>
<html>
<head>
<title>MatchUp</title>
<link rel="stylesheet" type="text/css" href="style.css"
</head>
<body>
<br>
<img id="banner" src="banner.png" alt="Banner" width=1000 height=300>
<br>
<form>
<input id="name" type="text" name="whateva"<br>
<br>
<input id="heart" type="image" src="heart.png" width=250 height=250>
</form>
<br>
</body>
</html>
CSS Code:
body{
background-image: url('bg.jpg');
}
#name{
height: 30px;
width: 200px;
border-radius: 15px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
outline: 0;
}
Why margin: 0 auto; did not work:
There could be a few reasons why your elements didn't center.
For margin: 0 auto; to work, an element needs to have a set width like width: 100px;.
If the element has a set width and still does't center, try display: block;.
Those two things will always work.
How to center elements without margin: 0 auto;:
If you're just trying to center all elements inside the body tag, just use text-align: center; on the body tag to accomplish that.
That said, I don't think you were trying to do that though.
Firstly, I assume you want to center your webpage like most of the websites. The method is to wrap all your HTML elements inside one parent div, give it a standard width most of the sites follow (it's up to you). In this case I used 960px. Than auto margin that parent container. So your whole page center aligns perfectly. My suggestion don't use 'br' tags like that, utilize the margin properties of CSS. Have a look at Bootstrap, it will help you a lot.
HTML
<!DOCTYPE html>
<html>
<head>
<title>MatchUp</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="pageContainer">
<img id="banner" src="banner.png" alt="Banner" width=1000 height=300 />
<form>
<input id="name" type="text" name="whateva" />
<input id="heart" type="image" src="heart.png" width=250 height=250 />
</form>
</div>
</body>
</html>
CSS
body{
background-image: url('bg.jpg');
}
#pageContainer {
width: 960px;
margin: 0 auto;
}
#name{
height: 30px;
width: 200px;
border-radius: 15px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
outline: 0;
}
...
This will get you a nicely centered page. Comment if you need any help.
You need to set the width where you want to use margin: 0 auto;. So if you wanted to center the body within the browser, you could do something like this:
body
{
background-image: url('bg.jpg');
margin: 0 auto;
width: 900px;
}
<center>
http://jsfiddle.net/pellmellism/T26Pw/
there is your fiddle....try using the good old fashioned center tag. KISS
Related
Sorry for bad english. How do you align this image to center and adding space on top after the header and for the footer.
Image Link (bc new user)
If I tried this code
margin-left: auto;
margin-right: auto;
width: 50%;
it goes to the center but the background also moves.
What I want is to move the image in the center, having spaces in both header and footer. And background color stays. Below is the code I use.
HTML
<template>
<div class="list">
<headerpc></headerpc>
<dropdown />
<div class="main">
<img src="../home-img/list.png" alt="" />
</div>
<div class="count">
<footerpc></footerpc>
</div>
</div>
</template>
CSS
<style scoped lang="scss">
$font-color: #fff;
.list {
.main {
position: relative;
display: block;
z-index: 1;
background: #131a28;
}
.count {
background: #131a28;
}
}
</style>
you can try giving a specific height to the image and set margin as auto.
img{
width: 300px;
height: 200px;
margin: auto;
}
this will center the image along both axes in its container div.
To center an image, set left and right margin to auto and make it into a block element. here, I have provide the sample code for aligning an image in the center for your reference.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
img {
display: block;
margin-left: auto;
margin-right: auto;
margin-top:10%
margin-bottom:10%
}
</style>
</head>
<body>
<h2>Center</h2>
<img src="img_flower.jpg" style="width:50%;">
</body>
</html>
Im trying to use a full screen image as my headers background but for some reason the image is not showing up and I cant figure out what im doing wrong. Can someone help? The image is in the same folder as the html and css files btw.
CSS
body {
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
#header{
background-image:url(headerbackground.png);
width: 100%;
height: auto;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
display: inline-block;
float: right;
}
HTML
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0, width=device-width">
<title>Test</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body>
<header>
<div id="header">
<ul class="col-4">
<li>SOBRE</li>
<li>TRABALHOS</li>
<li>CONTACTO</li>
</ul>
</div>
</header>
</body>
</html>
Since you've given your header div (#header) no explicit height and floated the only child it has, it collapses and acts like it has no content. Either give it a height or add overflow:auto to the CSS rules for it.
Agree with #j08691.
Working with html layout and css, it's always helpful, for me at least, to add following css:
border: 1px solid green; //or any color you like
so that we can see clearly how is the layout.
additional, in case you have issue with src image size, you may use
background-size: cover;
I am needing to center my image using css. I am having troubles, and cannot find out how to do it.
HTML
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<title>
AG.
</title>
<body>
<img src="images/logo.png" alt="AG" class="logo">
</body>
</html>
CSS
.logo {
width: 500px;
height: 467px;
margin-left: auto;
margin-right: auto;
}
You can't center an inline element that way - you need to give it a display: block style:
.logo {
width: 500px;
height: 467px;
margin-left: auto;
margin-right: auto;
display: block;
}
<img src="http://placehold.it/500/467" alt="AG" class="logo">
To wrap the image into a div,
change the html and add an ID like so: (By the way, I used a google image as a place holder, but you get the idea)
<div id="pic">
<img src="https://www.google.com/logos/doodles/2014/jonas-salks-100th-birthday-5130655667060736-hp.jpg" alt="AG" class="logo">
</div>
and then for the CSS
#pic {
width: 500px;
height: 467px;
margin-left: auto;
margin-right: auto;
See it work at http://jsfiddle.net/e5pdof91/
}
First put your image inside a container, otherwise the height and width are just editing the size of the picture.
I added it into a div and then added the properties into its own container.
http://codepen.io/anon/pen/uHaGC
Here is a code pen.
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<title>
AG.
</title>
<body>
<div id="logo">
<img src="images/logo.png" alt="AG">
</div>
</body>
</html>
#logo {
position: relative;
width: 50%;
margin-left: auto;
margin-right: auto;
}
The #logo tag centers it (maybe not depending on your resolution). Just set a new tag for your image and change the size!
I prefer using percentages rather than amount of pixels because it then looks better on bigger or smaller resolutions.
I am planning to add colour to the center of the html page. I have tried this:
My html file
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div id="v">
</div>
</body>
</html>
My styles.css
#v {
background: red;
position: center;
}
You can set a height and a width to the div and add a margin like this:
#v {
height: 100px;
width: 100px;
background-color: red;
margin: auto;
}
I would assume that you mean to center an element on the page and then add a background color to that element. Your CSS is not valid although you did come close. if you want to add a background then you need to use background-color instead. If you want to center that element then you can adjust the margin of said element here. is an example that may help.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>center a div and add background color</title>
<style type="text/css">
.wrapper{
width: 100%;
height: 400px;
background-color: blue;
margin: 0 auoto;
}
.centered-element{
width: 50%;
height: 200px;
margin: 0 auto;
background-color: red;
}
p{
text-align: center;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="centered-element">
<p>this div is centered!</p>
</div>
</div>
</body>
</html>
what i have done is gave the div that i wanted to center align a margin of 0 auto; this will center align the div. I hope that helped!
I have a container div with the class banner. In my css the following rule does not centre the banner.
Why is this?
.banner {
width:900px;
height:300px;
margin:0 auto;
background:url('img/banner-bg.jpg') top left no-repeat;
border-radius: 20px;
-webkit-border-radius: 20px;
-o-border-radius: 20px;
-moz-border-radius: 20px;
}
This is the HTML code, i can't see anything wrong with it
<!DOCTYPE html>
<html>
<head>
<title>Animated Banner CSS</title>
<link rel="stylesheet" type="text/css" href="banner.css">
</head>
<body>
<div class="banner">
<img class="img-snow01" src="img/snow-back.png" width="900" height="600">
<img src="img/foreground.png" width="335" height="1000" class="img01">
<img class="img-snow02" src="img/snow-front.png" width="900" height="600">
<h3 class="txt-heading01">Everthing is 30% off</h3>
<!--<h3 class="txt-heading02"> Friday and Saturday</h3>-->
<p class="txt01">Winter</p>
<p class="txt02">Sale</p>
<!---<p class="txt03">Click here</p>
<p class="txt04"> to learn more</p>
-->
</div> <!-- Banner-->
</body>
</html>
For margin: 0 auto; to trigger a 'center align', it requires the element to have a width set. because display: block elements will always be set at 100% width by default
It is also common to set text-align:center on the parent element (in the case of the child elements being of CSS display type: inline)
/* optional if child elements are display type of inline */
body { text-align: center; }
/* set a width */
.page {
width: 80%; margin: 0 auto; text-align: left;
}
Demo: http://jsfiddle.net/bBsLm/1/