I want to "centerize" the text and contents of my webpage. Now I don't want to align the text to center, I still want a left alignment but I want significant margins on the left and right so that everything looks relatively center-ish. Can you show me the HTML/CSS to achieve this? THanks.
<html>
<head>
<style type="text/css">
body {
text-align: center; /* Center in IE */
}
#content {
text-align: left; /* reset text-align for IE */
margin: 0 auto; /* Center in other browsers */
width: 800px;
}
html {
overflow: -moz-scrollbars-vertical; /* Force vertical scrollbar in FF */
}
</head>
<body>
<div id="content">
content here
</div>
</body>
</html>
*UPDATE: I added some CSS that forces a vertical scrollbar in FF as per some comments below.
Create 3 columns on your page. All your text goes in the center column and can be left alligned.
Have a look here for examples http://matthewjamestaylor.com/blog/perfect-3-column.htm
#wrapper {
width: 800px;
margin: 0 auto;
}
<div id="wrapper">
<p>This will appear in a centered container</p>
</div>
I believe this might help you.
try
#div {
margin:0 auto
};
Have a container div within which you put all your content:
<html>
<head>
<title>a sample</title>
</head>
<body>
<div id="container">
<h1>this is it</h1>
<p>all content goes here</p>
</div>
</body>
Then add some css specifying the width and margins of your container div:
#container {
width: 750px;
margin: 0 auto;
}
CSS:
#container {
max-width: 800px;
margin: 0 auto;
}
And in the HTML, wrap everything in:
<div id='container'>
...
</div>
(Note that this answer differs from meep's in that I'm using max-width to give a fluid layout below 800 pixels, whereas he's using width to give a fixed layout.)
Related
Right now I'm coding a menu that has a two column layout. This is the code.
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>replit</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="stockapps">
<img src="icons/eShop.svg">
<img src="icons/sverse.svg">
</div>
<div class="main">
<p>
Hello!
</p>
</div>
</body>
</html>
CSS:
.stockapps {
background-color: #111;
float: left;
width: 5%;
height: 100%;
}
.stockapps :after {
content: "";
display: table;
clear: both;
}
.stockapps img{
width:100%;
display: inline;
vertical-align: top;
}
.main {
float: left;
padding: 2%;
width: 91%;
overflow: hidden;
}
The issue is that the stockapps div tag is not filling the whole screen with height instead opting to only fill the area the children objects take up.
I have tried using the clear-fix and setting overflow to hidden but neither seem to fix the issue. Its likely some beginner mistake as CSS is not my strong suit
This fiddle showcases the issue.
You can wrap stockapps and main divs into a container div
Style this container as below
I used background color for stockapps div to show you its height
.container {
display: flex;
align-items: stretch;
/*Set height as you want, you can use height in px */
height: 100vh;
}
.stockapps {
/* used background-color to show you how much height it takes*/
background-color: #999;
/*You can ignore width if it's not convenient for your desired final output */
width: 50%
}
<div class="container">
<div class="stockapps">
<img src="icons/eShop.svg">
<img src="icons/sverse.svg">
</div>
<div class="main">
<p>
Hello!
</p>
</div>
</div>
If I understand you correctly, you need to create a 2-column layout for your menu.
To achieve this layout, I would wrap the <div class="stockapps"> and <div class="main"> into another <div> with class of manu-wrap and add this CSS styles:
.menu-wrap {
display: flex;
justify-content: space-between;
}
I would then remove the float properties and you should have a working 2-column layout.
You can find more about display: flex here.
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>
Today I came across this code. It works as I would expect in Chrome, but it is adding a margin on a wrong element with Firefox:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Site Title</title>
<style type="text/css" media="screen">
body {
background-color: #aaa;
margin: 0;
}
#header {
background-color: #fff;
}
#logo {
float: left;
}
#menu {
float: right;
}
.container {
width: 960px;
margin: 0 auto;
}
.main {
margin-top: 36px;
}
.clear {
clear: both;
}
</style>
</head>
<body>
<div id="header">
<div class="container">
<div id="logo">Logo</div>
<div id="menu">Home</div>
<div class="clear"></div>
</div>
</div>
<div class="container main">
Content
</div>
</body>
</html>
Firefox seems to add the margin in the .main rule to the content div, which was expected, and to the header div too.
If I add some text inside the header it would work as expected and the header won't have that margin:
<div id="header"> Some text here
<div class="container">
<div id="logo">Logo</div>
<div id="menu">Home</div>
<div class="clear"></div>
</div>
</div>
</div>
I can also add some text after the header block and it would also do the trick for Firefox.
I can't figure out why is Firefox adding that margin to the header element.
Very strange problem, I don't see why this happens.
It however seems to help when you add a padding of at least 1px to .container.
Also check this demo.
The problem has something to do with the container with automatic height and floating children...
Adding display:inline-block; to the #header will make it works in every browser (well except old IE), will include in the white box the right-floated div too (that now is not), and will continue to adjust the height automatically.
Fiddle: http://jsfiddle.net/AndreaLigios/VfAq7/1/
I want to add outer shadow to my page body, for example:
<html>
<head>
<title>Shadow</title>
<style>
html{height:100%;}
body{height:100%;}
#shadow{width:1200px;background:url('http://i.stack.imgur.com/w3fOE.png');height:100%;margin: 0 auto;}
#theMainContainer{width:900px;margin:0 auto;background-color:red;height:100%;text-align:center; color:white;}
</style>
</head>
<body>
<div id="shadow">
<div id="theMainContainer">
i have <font color="black">shadow</font> in the left side and the right side of the page ,<br>But i have space in the top and in the bottom of the page(what is the best way to fix it?).
</div>
</div>
</body>
</html>
I have space in the top and in the bottom of the page. How can I remove the space and make the shadow to a 100% height?
Add margin: 0 to body:
body {
height: 100%;
margin: 0;
}
You need to add the following css rule to reset the browser's default styling.
body, html {
margin: 0;
padding: 0;
}
In HTML, how do you make it so that the site is ~60-80% of the screen wide, and if the window is bigger than that it centers, otherwise there's a scroll bar? I'm talking about the way it is for the content here at StackOverflow.
I tried this, but failed:
<html>
<head>
<style type="text/css">
</style>
</head>
<body>
<center>
<div style="width: 60em; align: center;">kdsjlglkdfjgolksdjflgojsdfsdoljfglsdfghsdkjfgkdhfgkhlglkdfjgolksdjflgojsdfsdoljfglsdfghsdkjfgkdhfgklglkdfjgolksdjflgojsdfsdoljfglsdfghsdkjfgkdhfgklglkdfjgolksdjflgojsdfsdoljfglsdfghsdkjfgkdhfgklglkdfjgolksdjflgojsdfsdoljfglsdfghsdkjfgkdhfgklglkdfjgolksdjflgojsdfsdoljfglsdfghsdkjfgkdhfgklglkdfjgolksdjflgojsdfsdoljfglsdfghsdkjfgkdhfgklglkdfjgolksdjflgojsdfsdoljfglsdfghsdkjfgkdhfgkkjdghkdsfjgksdjfhg</div>
</center>
</body>
</html>
Here's the one I always follow:
<body>
<div class="wrapper">
your content
</div>
</body>
And then in CSS,
body{text-align:center;}
.wrapper{width:80%;margin:0 auto;text-align:left;}
You want auto margins...
<body>
<div id="content">
Your page content here...
</div>
</body>
Your CSS should have something like this...
#content { width: 60%; margin: 0 auto 0 auto; }
The ordering for margins (and padding is the same) is top right bottom left. Or you can shortcut with.
#content { width: 60%; margin: 0 auto; }
This means that top and bottom will have 0 margin; left and right will have auto margin.
Do Set left and right margins to auto.
Don't use the deprecated <center> element
Don't use the non-existent align property
Stick your content in a div and set the right and left margin to "auto", like so:
CSS:
#content {
width: 960px;
margin-left: auto;
margin-right: auto;
}
HTML:
<body>
<div id="content">
fjkgjkg etc.
</div>
</body>