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/
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>
I have a flexbox that has two columns, each of which is 50% wide.
Then I want to add a big square picture in the right column, the height of the picture should be determined by the contents' height in the left column. (More content will be inserted into the left column in the future)
But the height and max-height always don't work with my image in the flexbox
, which causes the right column to be stretched.
CodeSandbox: https://codesandbox.io/s/modest-rgb-u7k3k
Ideal:
Image link 1
Real:
Image link 2
NOTE: I added a set height of 150px to #flexbox and changed the image url to a direct link for demonstrative purposes so you can see it working in action.
First, you had ".img-wrapper" instead of ".wrapper" for the img css, not sure if that was on purpose or not but i switched it to ".wrapper" since that was the parent classname. Second, you only need the max-width for the effect to work. For the img css, I added "object-fit: cover" which maintains the img's aspect ratio while filling the entire container. Last, I gave the ".wrapper" container a "text-align: center" property so that the img will be centered in the container.
* {
box-sizing: border-box;
}
body {
width: 400px;
}
#flexbox {
display: flex;
height: 150px;
}
#flexbox .item:first-child {
flex: 0 0 50%;
padding: 10px;
background-color: bisque;
}
#flexbox .item:last-child {
flex: 0 0 50%;
padding: 10px;
background-color: aquamarine;
}
#flexbox .item:last-child .wrapper {
width: 100%;
height: 100%;
background-color: red;
text-align: center;
}
#flexbox .item:last-child .wrapper img {
max-width: 100%;
height: 100%;
object-fit: cover;
}
<!DOCTYPE html>
<html>
<head>
<title>Parcel Sandbox</title>
<meta charset="UTF-8" />
<link rel="stylesheet" href="src/styles.css" />
</head>
<body>
<div id="flexbox">
<div class="item">
This is the first box.<br />
Contents here.<br />
Contents here.<br />
Contents here.<br />
Contents here.<br />
Contents here.<br />
</div>
<div class="item">
<div class="wrapper">
<img src="https://i.imgur.com/HyWA2Jq.png" />
</div>
</div>
</div>
</body>
</html>
This question already has answers here:
CSS margin terror; Margin adds space outside parent element [duplicate]
(7 answers)
What is the default padding and/or margin for a p element (reset css)?
(5 answers)
Closed 2 years ago.
I am trying to make a box like the following in HTML and CSS:
I have the following code:
orders.html:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Orders Page</title>
<link rel="stylesheet" type="text/css" href="orders.css">
</head>
<body>
<div class="order-container">
<div class="order-header">
<p>ORDER #10980<p>
</div>
<div class="order-list">
</div>
<div class="order-footer">
</div>
</div>
</body>
</html>
orders.css:
.order-container {
border-style: solid;
height: 400px;
width: 400px;
}
.order-header {
text-align: center;
background-color: #a9dbde;
height: 60px;
}
I want the blue header to align with the top of the box. However, there is a white space between the blue header and the top of my box, as seen in the following image. I am not sure how to make the top of the header align with the top of the box. Any insights are appreciated.
Browsers have default styles that you have to override and the browser you are using is adding a margin to p element.
I recommend you use one of the header tags for your element (more semantic).
<h1 class="order-header">ORDER #10980<h1>
And remove margins
.order-header {
margin: 0;
...
}
You can use font-size to adjust text size and line-height to center the text vertically (you can remove height if you do this).
HTML has some default value like #khan said. Also you can try flex property in css, it will help u a lot when doing some element align operation.
<!DOCTYPE html>
<html>
<head>
<title>Making a box with a coloured header in HTML and CSS</title>
<style type="text/css">
.order-container{
border: 1px solid #999;
height: 200px;
width: 300px;
}
.order-header{
text-align: center;
height: 50px;
background: #81CCD3;
}
.order-header p{
margin:0 ;
}
</style>
</head>
<body>
<div class="order-container">
<div class="order-header">
<p>ORDER #10980</p>
</div>
<div class="order-list">
</div>
<div class="order-footer">
</div>
</div>
</body>
</html>
Remove the default margin from the p tag. Here's a list of default values.
p {
margin: 0;
}
p {
margin: 0;
}
.order-container {
border-style: solid;
height: 400px;
width: 400px;
}
.order-header {
text-align: center;
background-color: #a9dbde;
height: 60px;
}
<div class="order-container">
<div class="order-header">
<p>ORDER #10980
<p>
</div>
<div class="order-list">
</div>
<div class="order-footer">
</div>
</div>
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!
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