I need is to show the content of a web page in the center of the browser, no matter what screen size it is, big or small, resolution high or low, it always gets automatically adjusted to the center of the browser.
Thanks in advance
My Html and css code is below
HTML code
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="basic1.css"/>
</head>
<body>
<div id="menu">
<img class="imgc" src="img.png" alt="icon"/>
<img class="imgd" src="do.png" alt="do"/>
</div>
<div id="smenu"></div>
<div id="mainbox">
<div class="ibox"></div>
</div>
<div id="menutext">
<ul>
<li><b>???????</b></li>
<li><b>?????</b></li>
<li><b>?????</b></li>
</ul>
</div>
<div id="py">
<pre class="p">??<span style="color:black;font-size:25px">??????</span></pre>
<pre class="s">?? ???? ??? ??? <span style="color:#980000;
letter-spacing :+1mm"><b>:3</b></span></pre>
</div>
</body>
</html>
CSS
#menu img.imgc {
position:absolute;
right:77%;
top:10px;
margin:0px auto;
}
#menu img.imgd {
position:absolute;
left:75%;
top:10px;
margin:0px auto;
}
#menu {
position:absolute;
left:0%;
top:0%;
right:0%;
right:0%;
width:100%;
height:125px;
border-bottom:1px solid #C8C8C8;
margin:0px auto;
background-color:#E8E8E8;
}
#mainbox div.ibox{
position:absolute;
left:31%;
top:20px;
border-left:3px solid gray;
height:105px;
margin:0px auto;
}
#menutext ul{
position:absolute;
right:72%;
top:15px;
list-style: none;
line-height:30px;
margin:0px auto;
}
#menutext a{
font-size:12px;
font-variant:small-caps;
font-family:Lucida,Helvetica,sans-serif;
font-weight:500;
color:black;
text-decoration: none;
text-align: left;
}
#py pre.p{
position:absolute;
top:15px;
left:33%;
font-family:Tahoma, Geneva, sans-serif;
letter-spacing : +2mm;
font-size:50px;
color:#009933;
text-decoration: none;
text-align: center;
margin:0px auto;
}
#py pre.s{
position:absolute;
top:67px;
left:33%;
font-family:Tahoma, Geneva, sans-serif;
letter-spacing : +3mm;
font-size:12px;
color:gray;
text-decoration: none;
text-align: center;
margin:0px auto;
}
Put all the content inside a div, set its class to container:
<div class="container">
...
</div>
Then using css set its margins to auto:
.container{
margin:0px auto;
width: 600px;
}
have a look at this jsfiddle
EDIT
check this new fiddle , the menu css doesn't neet all of what you wrote, should be something like:
#menu {
height:125px;
border-bottom:1px solid #C8C8C8;
margin:0px auto;
background-color:#E8E8E8;
}
Put all your page content inside a wrapper div, then give it some relative width (e.g. 50%) and auto horizontal margins.
<div id="wrapper">
<!-- CONTENT GOES HERE -->
</div>
CSS (50% page width, zero top/bottom margin):
#wrapper {
width: 50%;
margin: 0 auto;
}
Put another div around all of your content (so from right after your body start tag and just before body end tag). Call it <div class="container">
Set the following style to that div:
width: 1000px;
margin: auto;
This should center your content.
You can change the width as needed.
You could use fundation3's grid: http://foundation.zurb.com/docs/grid.php
Working solution.
<html>
<head>
<style type="text/css">
html
{
width: 100%;
height: 100%;
}
body
{
display: flex;
justify-content: center;
align-items: center;
}
</style>
</head>
<body>
This is text!
</body>
</html>
Related
Here is a simple HTML file with inline css:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<style type="text/css">
body {
margin-top: 20px;
margin-right: 500px;
margin-left: 500px;
}
.events {
font-size: 200%;
vertical-align:middle;
text-align:left;
margin-left:20px;
}
.sections{
font-size: 100%;
vertical-align:middle;
text-align:right;
margin-right:20px;
}
#divA {
background-color: #BB1919;
color:white;
height:60px;
font-family: Arial;
font-weight:bold;
}
</style>
</head>
<body>
<div id="divA"><div class="events">EVENTS</div>
<div class="sections">Sections</div>
</div>
</body>
</html>
The large red rectangle is correct. BUT why are the words EVENTS and Sections not vertically centered? It seems quite simple and yet it doesn't look correct.
vertical-align:middle; works only when parent has display:table and children display:table-cell
Take a look:
body {
margin-top: 20px;
margin-right: 100px;
margin-left: 100px;
}
.events {
font-size: 200%;
vertical-align:middle;
text-align:left;
margin-left:20px;
display:table-cell;
}
.sections{
font-size: 100%;
vertical-align:middle;
text-align:right;
margin-right:20px;
display:table-cell;
}
#divA {
background-color: #BB1919;
color:white;
height:60px;
width:100%;
font-family: Arial;
font-weight:bold;
display:table;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
</head>
<body>
<div id="divA"><div class="events">EVENTS</div>
<div class="sections">Sections</div>
</div>
</body>
</html>
Here is how you do it :
#divA {
display:block;
background: #BB1919;
color:white;
height:100px;
padding:20px;
box-sizing:border-box;
}
.divA {
display:table;
width:100%;
height:100%;
}
.events,
.sections {
display:table-cell;
font-size: 20px;
vertical-align:middle;
}
.divB {
display:table;
width:100%;
height:100px;
background:#f5f5f5;
padding:20px;
box-sizing:border-box;
}
<h2>If you need Outer Div</h2>
<div id="divA">
<div class="divA">
<div class="events">EVENTS</div>
<div class="sections">SECTIONS</div>
</div>
</div>
<h2>If you dont</h2>
<div class="divB">
<div class="events">EVENTS</div>
<div class="sections">SECTIONS</div>
</div>
The css property vertical-align will align elements on the same line. As you can see in the example below, three divs are centered through the middle because of that property. Vertical-align will not center text inside an element, though.
One way to achieve that without tables is to set the line height property to the same height value of the container. In the example below, the container is 60px tall and so is the text line. This method works if the text is contained in one line only.
div {
display: inline-block;
border: 1px solid black;
vertical-align: middle;
}
.lg {
height: 60px;
}
.sm{
height:40px;
}
.centerTxt{
line-height: 60px;
}
<div class="sm">
Small
</div>
<div class="lg">
Large
</div>
<div class="lg centerTxt">
Large centered text
</div>
When including text in a div , i found a slight margin on top of the text.How to get rid of the margin ?
<html>
<style>
#box{
width:200px;
height:100px;
font-size:50px;
background-color:#ff0000;
color:#ffffff;
}
</style>
<body>
<div id="box">TEXT</div>
</body>
</html>
<html>
<style>
#box{
width:200px;
height:100px;
font-size:50px;
background-color:#ff0000;
line-height:38px; /* reduce line height for desired results */
color:#ffffff;
}
</style>
<body>
<div id="box">TEXT</div>
</body>
</html>
You need to change the line-height. I have it set here to have no space.
#box{
width:200px;
height:100px;
font-size:50px;
line-height: 33px;
background-color:#ff0000;
color:#ffffff;
}
You may use line-height indeed to reduce gap on top and beneath the text, but maybe you should use em values to have this more reliable.
#box {
width: 200px;
height: 100px;
font-size: 50px;
background-color: #ff0000;
line-height: 0.65em;
color: #ffffff;
box-shadow: 0 0 3px black;
}
div:hover {
font-family: courier;
}
span {
vertical-align: top;
font-family: courier;
}
<div id="box">TEXT<span>text</span>
</div>
This question already has answers here:
Margin-Top not working for span element?
(6 answers)
Closed 8 years ago.
I can't realize why bottom margin doesn't apply to the menu bar. I tried all types of paddings, margins and everything. I have no clue what to add or change so it can apply to it. I was trying to put position relative to #header and absolute to .menu and then all broke. I dont know what I did wrong?
JsFiddle Link
My HTML:
<body>
<div id="wrapper">
<div id="header">
<div id="header_left"></div>
<div id="header_right">
<div class="menu">Naslovna</div>
<div class="menu">PVC stolarija</div>
<div class="menu">ALU stolarija</div>
<div class="menu">Ostali proizvodi</div>
<div class="menu">Reference</div>
<div class="menu">Kontakt</div>
</div>
</div>
<div id="header_line"></div>
<div id="content">
<p> </p>
<p> </p>
</div>
<div id="footer_line"></div>
<div id="footer"></div>
</div>
</body>
</html>
My CSS:
#charset "utf-8";
/* CSS Document */
body{
background:#FFF;
margin:0;
padding:0;
}
#wrapper{
backgorund:#FFF;
width:100%;
height:100%;
}
#header{
background-image:url(struktura/header_bckg.png);
background-repeat:repeat-x;
height:140px;
width:100%;
}
#header_left{
width:40%;
height:100%;
display:inline;
}
#header_left img{
margin: 10px 0 0 20px;
}
#header_right{
width:55%;
display:inline;
}
.menu{
width: 100%;
display: inline;
font-family: "Myriad Pro";
font-size: 20px;
color: #333333;
margin: 0 0 0 40px;
bottom:20px;
}
#header_line{
background-image:url(struktura/header_line.png);
background-repeat:repeat-x;
height:5px;
width:100%;
}
#content{
background: #FFF;
width: 100%;
height: 600px;
}
#footer_line{
background-image:url(struktura/footer_line.png);
background-repeat:repeat-x;
height:5px;
width:100%;
}
#footer{
background-image:url(struktura/footer_bck.png);
background-repeat:repeat-x;
height:250px;
width:100%;
}
Top and bottom padding/margin has no effect on inline elements.
Here is a good article that explain this.
So, the solution for you might looks like:
.menu{
display: inline-block;
font-family: "Myriad Pro";
font-size: 20px;
color: #333333;
margin: 40px;
bottom: 20px;
}
I have a very simple web page but something in the CSS causes a problem for Chrome.
Basically, if the content goes beyond what is rendered on the immediate screen Chrome will not be able to scroll down to it. The content and scrolling works fine in FF and IE.
The only way I have been able to get Chrome to show the content (beyond eliminating the CSS) is to
change html{height: 100%;} to some higher value (200%). Obviously that is not an ideal solution.
HTML and CSS:
http://cssdesk.com/Z3k52
Browsers:
Chrome 23.0.1271.91 // FF 16.0.2 // IE 9.0.8112.16421
I'm sure I'm just missing something simple, but I don't know what.
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Home Page</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<link href="layout.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div id="box_margin">
<div id="title">Some Title, Info, Etc.</div>
<div id="link_nav">
<div class="links">Home</div>
<div class="links">Links</div>
<div class="links">About</div>
<div class="links">Contact</div>
</div>
<div id="contentbox">
<div class="box_header">Home Screen</div>
<div class="pagecontent">
<p>Text at the top</p>
<p>Next line</p>
<p>Next line</p>
</br>....
</br>....
</br></br></br></br>text continues below....</br></br></br></br></br></br></br></br>and can be scrolled to in FF/IE</br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br>o</br>o</br>o</br>o</br>o</br>\ /</br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br>....keep going....</br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br><p>But not Chrome</p>
</div>
<div id="footer">Here is the footer</div>
</div>
</div>
</div>
</body>
</html>
CSS:
html
{
height: 100%;
}
body
{
height: 100%;
margin: 0;
padding: 0;
line-height: 150%;
text-align: center;
font-size: 62.5%;
}
*
{
font-size: 1em;
font-family: Arial, Verdana, sans-serif;
color: #000000;
text-align: left;
}
#container
{
margin: 0 auto 0 auto;
display: table;
height: 100%;
position: relative;
overflow: hidden;
width: 600px;
}
.links
{
width:75px;
margin-right:10px;
float: left;
margin-top:24px;
text-align:center;
font-family:Georgia, "Times New Roman", Times, serif;
position:relative; bottom:0px;
color: #e1a630;
}
.links a{
font-family:Arial, Helvetica, sans-serif;
font-size:1.2em;
font-weight:bold;
}
#link_nav
{
margin-right:10px;
height:40px;
width:600px;
}
#title
{
width:230px;
height:40px;
margin-right:20px;
margin-top:15px;
font-family:Arial, Helvetica, sans-serif;
font-size:2em;
font-weight:bold;
text-align:center;
float:left;
}
.box_header
{
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#002664;
font-size:1.9em;
margin-top:15px;
margin-left:15px;
margin-right:15px;
margin-bottom:15px;
width:573px;
}
.pagecontent
{
font-family: Arial, Helvetica, sans-serif;
color:#000000;
font-size:1.2em;
margin-left:20px;
margin-right:20px;
width:560px;
}
#contentbox
{
position: absolute;
vertical-align: middle;
background-color:#5284CC;
width:600px;
clear:both;
}
#footer
{
width:600px;
height:20px;
background-color:#5284CC;
background-repeat:no-repeat;
text-align:center;
color:#BDCDEC;
}
#footer a
{
font-size:.8em;
color:#BDCDEC;
}
#box_margin
{
margin-top:25px;
}
html, body {
text-align: center;
}
p {text-align: left;}
i have edited your code check here : demo
html{
height: 100%; /* must be remove */
}
body{
height: 100%; /* must be remove */
}
your mistake was with setting height and also setting overflow : hidden.
Don't change the display property and positioning of the #container element.
The code below work fine on chrome and firefox. Didn't test on IE because im on a mac but i'm pretty certain it works.
#container
{
margin: 0 auto;
overflow: hidden;
width: 600px;
}
http://cssdesk.com/tyCdB
I want to put 3 div like columns. The one on the left and the one the right have a content and variable length. The one in the middle is a divider.
My CSS is:
html
{
background:url(../img/texture.png) 50% 0 repeat #fff;
}
body
{
font:13px/20px "Trebuchet MS", Helvetica, sans-serif;
position:relative;
min-width:960px;
}
html, body
{
height:100%;
}
.main
{
background-color:#f8f8f8;
padding:2px;
border:1.5px solid #000000;
border-radius:1em;
-webkit-border-radius:1em;
-moz-border-radius:1em;
-o-border-radius:1em;
margin:auto;
width:950px;
box-shadow:0 0 20px #585858;
word-wrap:break-word;
}
section#content
{
padding:10px 0px;
overflow:hidden;
}
section#content #text
{
margin:10px 20px 0px;
text-align:center;
}
#text #login
{
width:40%;
margin-left:5%;
margin-right:5%;
float:left;
text-align:left;
}
#text #registration
{
width:40%;
margin-left:5%;
margin-right:5%;
float:right;
text-align:left;
}
#text #divider_ver
{
float:left;
height:100%;
width:1px;
background:#000000;
}
And my JSP:
<body>
<div class="main">
<section id="content">
<div id="testo">
<div id="text">
<div id="login">
...
</div>
<div id="divider_ver"></div>
<div id="registration">
...
</div>
</div>
</div>
<div class="clear"></div>
</section>
</div>
</body>
The problem is that the divider won't show up. If I set its height like: min-height:100px; it will, but will have fixed height (100px). I want it to have the height of the taller between the other 2 div, but I can't do it.
http://jsfiddle.net/2mjet/1/
Here:
CSS changes
section#content #text
{
margin:10px 20px 0px;
text-align:center;
overflow: hidden;
}
#text #divider_ver
{
float:left;
padding-bottom: 10000px;
margin-bottom: -10000px;
width:1px;
background:#000000;
}
Simple +padding -margin with overflow:hidden container, but it's nice trick to remember.