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>
Related
I have this div :
and I tried making the font-size of the text responsive using this code :
font-size:calc(xx + 1.5vw);
If I make the screen smaller the headers are not vertically aligned :
HTML :
<div id="topsection">
<div id="header1">HEADER 1</div>
<div id="header2">Header 2</div>
</div>
CSS :
#header1 {
margin-left:220px;
font-size:calc(20px + 1.5vw);
color:#fff;
}
#header2 {
color: #fff;
margin-left:220px;
font-size:calc(9px + 1.5vw);
}
#topsection {
background-color:#222939;
width:100%;
height:75px;
z-index:1;
position:absolute;
top:10px;
left:0;
color:white;
}
I tried changing the CSS for the headers like this :
#header1 {
display: inline-block;
vertical-align: middle;
margin-left:220px;
font-size:calc(20px + 1.5vw);
color:#fff;
}
#header2 {
display: inline-block;
vertical-align: middle;
margin-left:220px;
font-size:calc(9px + 1.3vw);
color: #fff;
}
but now it looks like this :
You need a content div to center in the middle. See the example below. Have only tested this in Chrome.
.toolbar{
background-color:#222939;
width:100%;
height:195px;
line-height:195px;
z-index:1;
position:absolute;
top:0;
left:0;
color:white;
}
.toolbar .content{
display:inline-block;
vertical-align: middle;
}
.toolbar .title {
line-height:1;
font-size:calc(20px + 1.5vw);
color:#fff;
}
.toolbar .subtitle {
line-height:1;
font-size:calc(9px + 1.5vw);
color: #fff;
}
<div class="toolbar">
<div class="content">
<div class="title">HEADER 1</div>
<div class="subtitle">Header 2</div>
</div>
</div>
Final code
<!DOCTYPE html>
<html>
<head>
<style>
.toolbar{
background-color:#222939;
width:100%;
height:195px;
line-height:195px;
z-index:1;
position:absolute;
top:0;
left:0;
color:white;
}
.toolbar .content{
display:inline-block;
vertical-align: middle;
}
.toolbar .title {
line-height:1;
font-size:calc(20px + 1.5vw);
color:#fff;
}
.toolbar .subtitle {
line-height:1;
font-size:calc(9px + 1.5vw);
color: #fff;
}
</style>
</head>
<body>
<div class="toolbar">
<div class="content">
<div class="title">HEADER 1</div>
<div class="subtitle">Header 2</div>
</div>
</div>
</body>
</html>
This is a font glyph issue and is due to the fact that the black gylph character is not aligned directly along the left of the glyph block.
If you see the example below, you can set that there is actual space to the left side of the glyph block before the glyph character.
h1,
h3 {
margin: 0;
margin-bottom: 1px;
margin-left: 150px;
font-family: monospace;
}
h1 {
font-size: 144px;
}
h3 {
font-size: 72px;
}
span {
background: red;
}
<H1><span>H</span></H1>
<H3><span>H</span></H3>
This is a font-design issue...and it's on purpose...so that letters don't automatically bunch up together.
The amount of space is proportional to the font-size and each font so there's no single value you can use to align them.
What works for one font won't work for the next.
I want to display the button and label on the same line.But multiple buttons on different lines. How can I do that .Help will be appreciated.
Button and label should be side by side and next set of button and label on next line.
Where am I going wrong ?
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<style type="text/css">
.round-button
{
width:20px;
}
.round-button-circle {
width: 100%;
height:0;
padding-bottom: 100%;
border-radius: 50%;
overflow:hidden;
background: #4679BD;
box-shadow: 0 0 3px gray;
}
.round-button-circle:hover {
background:#30588e;
}
.round-button a {
width:100%;
padding-top:50%;
padding-bottom:50%;
line-height:1em;
margin-top:-0.5em;
text-align:center;
color:#e2eaf3;
font-family:Verdana;
font-size:1.2em;
font-weight:bold;
text-decoration:none;
}
</style>
</head>
<body>
<br><span ><div class='round-button'><div class='round-button-circle'></div></div> <label style='display:inline;'>edit</label></span>
<br><span ><div class='round-button'><div class='round-button-circle'></div></div> <label style='display:inline;'>edit</label></span>
</body>
</html>
Use display:table-cell will give you expected output.
<span>
<div class='round-button'><div class='round-button-circle'></div></div>
<label class="lblname" >edit</label>
</span>
<span >
<div class='round-button'><div class='round-button-circle'></div></div>
<label class="lblname">edit</label>
</span>
CSS:
.round-button
{
width:20px;
display: table-cell;
}
.lblname{
display: table-cell;
padding: 0 5px;
vertical-align: middle;
}
Working Fiddle
Note: Try to avoid giving inline css.
As there are some structural changes required in your html code so instead of tweaking little in your code you should consider restructuring it in proper manner. you can try following code.
.button {
background: #4679BD;
border-radius: 50%;
float: left;
width: 20px;
height: 20px;
margin-right: 10px;
}
.wrapper {
float: left;
width: 100%;
margin-bottom: 10px;
}
a {
float: left;
}
<div class="wrapper">
<a class="button"></a><span>Button 1</span>
</div>
<div class="wrapper">
<a class="button"></a><span>Button 2</span>
</div>
You can try floating:
.round-button {
width: 20px;
float: left;
clear: left;
}
just remove <br> in bitween both <span>
and add below to css
span {
display:inline-block;
}
Like i.e.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link href="style.css" rel="stylesheet" />
<style>
span {
display:inline-block;
}
.new_line {
width:780px;
margin:0 auto;
height:50px;
}
.new_line ul li {
list-style-type:none;
float:left;
padding:10px 22px ;
}
.new_line ul li img {
float:left;}
</style>
</head>
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<style type="text/css">
.round-button
{
width:20px;
}
.round-button-circle {
width: 100%;
height:0;
padding-bottom: 100%;
border-radius: 50%;
overflow:hidden;
background: #4679BD;
box-shadow: 0 0 3px gray;
}
.round-button-circle:hover {
background:#30588e;
}
.round-button a {
width:100%;
padding-top:50%;
padding-bottom:50%;
line-height:1em;
margin-top:-0.5em;
text-align:center;
color:#e2eaf3;
font-family:Verdana;
font-size:1.2em;
font-weight:bold;
text-decoration:none;
}
</style>
</head>
<body>
<br><span ><div class='round-button'><div class='round-button-circle'></div></div> <label style='display:inline;'>edit</label></span>
<span ><div class='round-button'><div class='round-button-circle'></div></div> <label style='display:inline;'>edit</label></span>
</body>
</html>
First you can't wrap a div(Block element) with a span(inline element) - Invalid HTML
And the problem is you aren't making button div round-button(Block element) inline or inline-block or float would also work.
As the label is inline element you don't need to display it to inline. Rather you need to change the button div to act as inline.
<div class="wrap">
<div class='round-button' style="display:inline-block">
<div class='round-button-circle'></div>
</div>
<label style='display:inline;'>edit</label>
</div> <!--/ END OF WRAP -->
I styled the round-button div with inline-block because it would display inline as well maintaining block element css properties.
Check this
hope helps
Snippet
.round-button
{
width:60px;
}
.round-button-circle {
background: #4679bd none repeat scroll 0 0;
border-radius: 50%;
box-shadow: 0 0 3px gray;
height: 20px;
overflow: hidden;
width: 20px;
}
.round-button-circle:hover {
background:#30588e;
}
.round-button a {
width:100%;
padding-top:50%;
padding-bottom:50%;
line-height:1em;
margin-top:-0.5em;
text-align:center;
color:#e2eaf3;
font-family:Verdana;
font-size:1.2em;
font-weight:bold;
text-decoration:none;
}
<span >
<div class='round-button'>
<label style="float: left; margin-right: 10px;">edit</label>
<div class='round-button-circle'></div>
</div>
</span>
<span >
<div class='round-button'>
<label style="float: left; margin-right: 10px;">edit</label>
<div class='round-button-circle'></div>
</div>
</span>
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>
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>
Working to help a student with his project trying to get his Div to fill up the full body of the page.
I've tried following the various examples with HTML and BODY tag being set to 100% however when I set the minimum height for my Div it does not fill with the complete height of the page. Here is my code. When it renders the green should fill the page but it doesn't.
Thanks KT
<html>
<center>
<head>
<link href="styles.css" rel="stylesheet" type="text/css"/>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<div class="tblwrap" height="100%">
<table class="scndtable" >
<tr class="headerrow">
<td height=100%>Summary </td>
<td>Map </td>
<td>Videos </td>
</tr>
</table>
</div>
<p style="font-weight: bold;text-align: center;"> </p>
</body>
</center>
Here is my CSS
html
{
height:100%;
}
body
{
margin:0;
padding:0;
vertical-align: middle;
height: 100%;
border: 20px solid skyblue;
}
body table
{
margin-left:auto;
margin-right:auto;
height:100%;
}
.tblwrap
{
background-color:green;
min-height: 100%;
vertical-align: middle;
border:solid 3px red;
}
.headerrow{
text-align: center;
}
.scndtable
{
border-spacing:20px;
height: 100%;
}
.headerrow td{
font-size: 20pt;
background-color:silver;
}
.headerrow td a{
text-decoration: none;
color: black;
}
.headerrow td a:hover{
text-decoration: none;
color: gray;
}
.selectednav
{
font-size: 72px;
font-weight: bold;
color:navy;
}
.tblwrap{position:absolute;
top:0px;
left:0px;
right:0px;
bottom:0px;
background-color:green;
vertical-align: middle;
border:solid 3px red;
oveflow:auto;
}
This will work for you:-)
It's always helpful to recreate your issue in JSFiddle before you ask your question on StackOverflow. I tried to recreate your particular problem, but in my case the div easily stretches the height of the viewport:
http://jsfiddle.net/hWGVr/
But as with Ankit Gautam's solution, this will always cover the height of the viewport, never stretching further