I know this has been asked a thousand (million?) times, but for the life of me I can't figure out why I can't get a div to center on my page. Even with the HTML and CSS stripped down to the bare minimum.
I'd appreciate it if someone could point out what I'm missing here.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">
div#branchSelect { margin: 0 auto; }
</style>
</head>
<body>
<div id="branchSelect">
<h4 class="selectBranch">Select a Branch to View</h4>
<select type="select" id="ddlBranches" class="selectBranch">
<option id="defaultBranchesListItem" value="0">Select a branch...</option>
<option value="1">Atlanta</option>
</select>
</div>
</body>
</html>
Here's a jsFiddle.
divs are automatically set to 100% width.
Just set the width of the div and use the margin: 0 auto; to center it on the page.
div#branchSelect {
width:300px;
margin:0 auto;
}
Your div lacks a width property and so by default its with is 100%, so no matter what you do it gets streatched all the way accross the screen, so just assing a width property to your div and then set the margin as "0 auto" in style as shown by Marcus Recck
<body>
<div style="width:800px; margin:0 auto;">
centered content
</div>
</body>
Related
Seems to be a very basic concept but I do not understand why when I set the div's height to 100% it extends beyond the visible area of the page. My page is like this:
<!DOCTYPE html>
<html lang="en-US" style="height: 100%;">
<head></head>
<body style="height: 100%;">
<div style="height: 100%; background-color: red"> </div>
</body>
</html>
When I open it in the browser, the browser adds a vertical scroller to the page and my div extends beyond the bottom:
If I scroll down a little, I do see the bottom of the div:
But why does my div with the height of 100% extends beyond the bottom of the page?
That's because there is a default margin on the body when using code snippets on SO. I don't know if your problem is with code snippets only, but generally speaking, you probably have some margin (or padding or similar) around some element, which pushes the div down.
body {
margin: 0;
}
<!DOCTYPE html>
<html lang="en-US" style="height: 100%;">
<head></head>
<body style="height: 100%;">
<div style="height: 100%; background-color: red"> </div>
</body>
</html>
There is a default margin for the body in most browser stylesheets which causes this. You can reset the margin as shown below
html,
body {
margin: 0;
}
<!DOCTYPE html>
<html lang="en-US" style="height: 100%;">
<head></head>
<body style="height: 100%;">
<div style="height: 100%; background-color: red"> </div>
</body>
</html>
/!Array.prototype.find&&Object.defineProperty(Array.prototype,"find",{value:function value(predicate){if(null==this)throw new TypeError(""this" is null or not defined");var o=Object(this),len=o.length>>>0;if("function"!=typeof predicate)throw new TypeError("predicate must be a function");for(var thisArg=arguments[1],k=0;k<len;){var kValue=o[k];if(predicate.call(thisArg,kValue,k,o))return kValue;k++}},configurable:!0,writable:!0}),!Array.prototype.findIndex&&Object.defineProperty(Array.prototype,"findIndex",{value:function value(predicate){if(null==this)throw new TypeError(""this" is null or not defined");var o=Object(this),len=o.length>>>0;if("function"!=typeof predicate)throw new TypeError("predicate must be a function");for(var thisArg=arguments[1],k=0;k<len;){var kValue=o[k];if(predicate.call(thisArg,kValue,k,o))return k;k++}return-1},configurable:!0,writable:!0}),!Array.prototype.includes&&Object.defineProperty(Array.prototype,"includes",{value:function value(searchElement,fromIndex){function sameValueZero(x,y){return x===y||"number"==typeof x&&"number"==typeof y&&isNaN(x)&&isNaN(y)}if(null==this)throw new TypeError(""this" is null or not defined");var o=Object(this),len=o.length>>>0;if(0===len)return!1;for(var n=0|fromIndex,k=Math.max(0<=n?n:len-Math.abs(n),0);k<len;){if(sameValueZero(o[k],searchElement))return!0;k++}return!1}}),"function"==typeof this.Promise&&!this.Promise.prototype.finally&&Object.defineProperty(Promise.prototype,"finally",{value:function value(onFinally){return this.then(onFinally,onFinally)}}),"function"==typeof this.Promise&&"function"!=typeof this.Promise.allSettled&&Object.defineProperty(Promise,"allSettled",{value:function value(promises){let promiseResults=promises.map(p=>Promise.resolve(p).then(val=>({status:"fulfilled",value:val}),err=>({status:"rejected",reason:err})));return Promise.all(promiseResults)},writable:!0,configurable:!0}),"function"!=typeof Object.assign&&Object.defineProperty(Object,"assign",{value:function assign(target,varArgs){'use strict';if(null===target||target===void 0)throw new TypeError("Cannot convert undefined or null to object");for(var nextSource,to=Object(target),index=1;index<arguments.length;index++)if(nextSource=arguments[index],null!==nextSource&&void 0!==nextSource)for(var nextKey in nextSource)Object.prototype.hasOwnProperty.call(nextSource,nextKey)&&(to[nextKey]=nextSource[nextKey]);return to},writable:!0,configurable:!0}),"function"!=typeof Object.fromEntries&&Object.defineProperty(Object,"fromEntries",{value:entries=>[...entries].reduce((hash,entry)=>(hash[entry[0]]=entry[1],hash),{})});
Why is it so difficult (or as one answer said, "It is not possible.") to center an arbitrary image horizontally? I have had centralized images working for several years; suddenly they sit obstinately at the left. Has there been some recent change in CSS that causes this?
I expect the code below, modified from the CSS DIY, to work, but it does not.
<!DOCTYPE html>
<html><head>
<style>
img { display:block; }
</style>
</head>
<body>
<h2>Thumbnail Images</h2>
<p> ... </p>
<div style="margin: 0 auto;">
<img src="paris.jpg" alt="Paris"
width=15% >
</div>
</body></html>
I realize that scaling an image by percent width is (for no known) reason disallowed, but Jukka advised me to use it anyway, because it works in all browsers I have tried and does exactly what I want, which is to maintain image size proportional to page width. If I float the image right or left it works fine, and I can run a caption alongside the image, but the obvious 'margin : 0 auto;' fails, for no good reason I can see.
Margin : Auto
You can set the margin property to auto to horizontally center the element within its container.
The element will then take up the specified width, and the remaining space will be split equally between the left and right margins
Add
img {
display:block;
margin: 0 auto;
}
<!DOCTYPE html>
<html>
<body>
<h2>Thumbnail Images</h2>
<p> ... </p>
<div>
<img src="https://www.w3schools.com/css/trolltunga.jpg" alt="Paris" >
</div>
</body>
</html>
You should add the styles
display:block;
margin: 0 auto;
To your img element
<div style="width:100%;background:skyblue;">
<img style='display:block;width:25%;margin:0 auto;' src='https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQvl0jMbupgXjeP66hak-u3uwUPcqI3Ovx7zqiWkVhav2V8FjeY1A'/>
</div>
What I am trying to do is give a div margin-top: 30px; But it seems to be moving the whole page 30px down, as opposed to only that div. It is like the child div is influencing the parent div?
Any suggestions?
Html:
<%# Master Language="C#" AutoEventWireup="true" CodeBehind="BBcolForum.master.cs" Inherits="BBcolForum.BBcolForum" %>
<!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 runat="server">
<title></title>
<link type="text/css" rel="stylesheet" href="css/default.css" />
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<div id="content">
<form id="form1" runat="server">
<div class="header" style="margin-top:0px;">
<h1 style="color:Aqua; margin-top:30px;">Student Forum</h1>
</div>
<div>
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
</form>
</div>
</body>
</html>
CSS;
body
{
background-image:url('/img/blue_back.png');
background-repeat:repeat-x;
}
#content
{
background-color:White;
width: 800px;
height:900px;
margin: 0 auto 0 auto;
}
.header
{
border-bottom:1px solid #000000;
height:100px;
color:Blue;
}
That's exactly what's happening, yes. A direct-child of an element with margin-top will also push the parent element. As a really easy/quick fix, have you considered using padding instead?
Failing that, you can use overflow: auto on the parent according to this previous discussion on the topic, and this one too.
Try adding padding:0.01px to the container. This will have no visual effect, but it will cause the margin to be applied in the right place.
It's the margin on the <h1>. This always seemed counter intuitive to me. You can fix it by putting overflow: auto; on the container or changing the h1s margin to padding.
You must change
<h1 style="color:Aqua; margin-top:30px;">Student Forum</h1>
to
<h1 style="color:Aqua; padding-top:30px;">Student Forum</h1>
margin applies the space outside the object while padding applies it inside.
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
How to align a <div> to the middle of the page
I have a div tag with hight set to 800px, I want that when the browser width is greater than 600px it shouldn't stretch the div but it should bring it to the middle of the page
How can I achieve this?
can I use the following code?
centered content
Short Answer:
with margin set to auto
<html>
<head><title>Your Title</title></head>
<body>
<div style="width:600px; margin:auto; border:1px solid red">
</div>
</body>
</html>
Long answer:
You might want to set an id for that div, and give appropriate css selector with the rules rather than using inline style like that.
Also, for that to work correctly in ie 6 and 7, you need to give the doctype declaration, otherwise it won't work because ie will work in quirks mode
http://www.satzansatz.de/cssd/quirksmode.html
So the complete answer should look like
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Your Title</title>
<style>#container { width:600px; margin:auto; border:1px solid red }</style>
</head>
<body>
<div id="container">
</div>
</body>
</html>
put in the css the following properites :
max-width:600px;
position:relative;
margin:auto;
one thing I am not clear is do you want the div to take the width of the browser if the browser width is less than 600px?
I have looked at this question which has been suggested as a duplicate:
Make a div fill the height of the remaining screen space
However it's from 2008 and is fairly old. I'd rather not use Javascript or tables to solve this and would prefer a CSS solution if at all possible.
Here's the code for the container divs up to and including the left hand nav:
/* Header Wrapper */
#header-wrapper {width:100%;height:120px;margin:0 auto;background:transparent url(/images/Structure/blue-transparent-repeat2.png);background-position:50% 50%;}
#clouds {height:120px;width:100%;margin:0 auto;background:transparent url(/images/Structure/clouds.png) repeat-x;background-position:50% 50%;}
#opaque {width:100%;margin:0 auto;height:120px;background:transparent url(/images/Structure/white-transparent.png);}
#header-content {margin:0 auto;position:relative;width:100%;max-width:1280px;height:85px;}
/* Content Wrapper */
#content-wrapper {float:left;background:url("/images/cream.jpg") repeat-x;width:100%;}
#shell {height:100%;width:100%;background:#fffef8 url("/images/Structure/signpost.gif") 5% 100% no-repeat}
/* Page Content Wrapper */
#page-outer{height:100%;margin:0 auto;padding:0 0.5% 8px;max-width:1280px;}
#page-content {height:100%;clear:both;margin:0 0.7%;}
/* Left Nav */
#left-nav {padding-top:7px;border-right:1px solid #ede9e8;float:left;width:20%;margin:0 0 110px 0;background:url(/images/header-repeat-left.png) repeat-y;background-position:right top;}
And here's a simplified page code showing the main content divs:
<!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>Inside <%=server.HTMLEncode(Session("PublicFranchiseName"))%> Business Directory and Local Guide – Your Inside Guide to <%=server.HTMLEncode(Session("PublicFranchiseName"))%></title>
</head>
<body class="home">
<div id="header-wrapper">
<div id="clouds">
<div id="opaque">
<div id="header-content"></div>
<div class="menu2"></div>
</div>
</div>
</div>
<div id="content-wrapper">
<div id="shell">
<div id="page-outer" class="clearfix">
<div id="page-content" class="clearfix">
<!--Start Left Nav-->
<div id="left-nav">
First of all sue the content in the left-nav bar is causing it to stretch so long. so if you want that , add more content. other way you can use height attribute and set it as long as you can. from what i understand html all elements are arranged according to width and once it runs out of screen they stack down .. since your div is 20% width , adding more elements will cause it to stretch downwards . Vote up if i am right !!
Instead of using floats use display: table; on the parent and display: table-cell; on the children. This will effectively "float them left" and also stretch their height to 100% of the parent.
Because I can't see your markup I can't provide an example, but you should be able to follow :)
I ended up fixing this using JS in head.css:
<script type="text/javascript">
matchColumns=function(){
var divs,contDivs,maxHeight,divHeight,d;
divs=document.getElementsByTagName('div');
contDivs=[];
maxHeight=0;
for(var i=0;i<divs.length;i++){
// make collection with <div> elements with class attribute "equal"
if(/\bequal\b/.test(divs[i].className)){
d=divs[i];
contDivs[contDivs.length]=d;
if(d.offsetHeight){
divHeight=d.offsetHeight;
}
else if(d.style.pixelHeight){
divHeight=d.style.pixelHeight;
}
maxHeight=Math.max(maxHeight,divHeight);
}
}
for(var i=0;i<contDivs.length;i++){
contDivs[i].style.height=maxHeight + "px";
}
}
window.onload=function(){
if(document.getElementsByTagName){
matchColumns();
}
}
</script>