My gender-reg (child of register-page isn't centering) it stays to the very left for some reason? I need it centered!
.register-page {
width: 100%;
height: 100%;
margin: auto;
text-align: center;
...
.gender-reg {
border: solid yellow;
#include scale-to-screen((
margin-bottom: 10px
))
}
<div class="gender-reg">
<selection-dropdown params="all: allGenderChoices"></selection-dropdown>
</div>
Basically what happens is everything else on the page is centered, except this element. I have zero idea as to why! Usually margin: auto centers it. I'm stuck!
A width of 100% will not center the element, Because there is no extra space.
If you set it to 50% then it will center the element within its parent.
Try this:
.register-page {
width: 50%;
height: 100%;
margin: 0 auto;
text-align: center;
I have a div inside a div, the child both being centered in its parent and bigger than the parent making it overflow equally on both sides of it. The child has another div inside it with some text.
<div class="outer">
<div class="inner">
<div class="text">
testing testing
</div>
</div>
</div>
css:
.outer
{
width: 400px;
height: 400px;
background: beige;
margin: 0 auto;
}
.inner
{
width: 600px;
height: 200px;
background: pink;
position: absolute;
left:0;right:0;
margin: auto;
}
.text
{
margin-left: auto;
margin-right: auto;
width: 400px;
}
http://jsfiddle.net/msVVD/4/
Now, if the document width is narrowed by resizing the browser window, or in the jsfiddle case, resized by dragging the handle between "JavaScript" and "Result", the text will not stay on the same horizontal position, but "travel" to the right.
Why?
You need to set a min-width to the body (or parent container in which the absolutely positioned element is aligned according to) like so
body
{
min-width: 600px;
}
This will prevent the absolutely positioned from traveling
FIDDLE
You are not positioning the .inner element relatively to the .outer one. Add position: relative to .outer.
Changes in your CSS:
.outer
{
width: 400px;
height: 400px;
background: beige;
margin: 0 auto;
position: relative;
}
.inner
{
width: 600px;
height: 200px;
background: pink;
position: absolute;
left:0;right:0;
margin: auto;
margin-left: -100px;
padding-left: 100px;
}
Fiddle: http://jsfiddle.net/msVVD/7/
This is a common question but slightly different from the solutions I found and I've been trying to solve it without success, so if someone could give me a help on this I would appreciate.
I have a #wrapper div that stretches to 100% width and height of browser. So far, so good... Now, inside the #wrapper I need a #content div that auto stretches with the parent div maintaining a 30px margin around it. I (almost) managed to do it but I can't make the #content div stretch in its height.
Here's an example of what I'm trying to do:
This is the CSS code I have:
* {
margin: 0;
padding: 0;
outline: 0;
}
html, body {
height: 100%;
width: 100%;
text-align: center;
cursor: default;
}
#wrapper {
width: 100%;
min-height: 100%;
height: auto !important;
position: absolute;
background: #333;
text-align: center;
}
#content {
/*width: 100%;*/
min-height: 100%;
height: auto !important;
margin: 30px;
overflow: hidden;
background: #ccc;
}
This is the HTML:
<body>
<div id="wrapper">
<div id="content">
This DIV should stretch to 100% height of its parent and body
minus the 30px margin around and resize as the window is resized.<br />
It's working in width but not in height!<br /><br />
Whatever goes in here (a child DIV) no matter its size should not be
visible beyond this DIV boundaries (as the Overflow is set to "hidden")!
</div>
</div>
</body>
And this is what I'm getting in both Chrome and IE:
Any help on this? Is it possible? Am I missing something stupid?
Thanks in advance,
LM
In your .css, replace #content with the following
#content {
overflow: hidden;
background: #ccc;
position: absolute;
top: 30px;
left: 30px;
right: 30px;
bottom: 30px;
}
#content {
min-height:90%;
position:absolute;
margin: 5%;
overflow: hidden;
background: #ccc;
}
I have the following code:
<div id="ftr_btm">
<div id="ftr_ctr">
<div class="hdr_lnk">
<ul>
<li><a>Test1</a></li>
<li><a>Test2</a></li>
<li><a>Test3</a></li>
</ul>
</div>
</div>
</div>
and the following CSS:
#ftr_ctr {display: block; text-align: center; font-size:0.8em; position: absolute; height: 24px;margin: auto;}
.hdr_lnk ul li {
display: inline;
float: left;
padding: 0;
position: relative;
}
What I am trying to do is have the text (address links) appear horizontally centered with margins to each side of the UL's. It's not working and the text and UL's all goes to the left as in this:
fiddle
Is there anyone who could tell me how I can get the UL's to appear in the middle of the page.
thanks
I'm not quite sure of the context that you're putting that code in, but this should achieve the effect you want:
#ftr_ctr {
width: 100%;
text-align: center;
font-size:0.8em;
position: absolute;
height: 24px;
}
.hdr_lnk ul{
margin: auto;
}
.hdr_lnk li {
display: inline;
padding: 0;
}
The main things you needed were the width: 100%; rule in the #ftr_ctr element and the margin: auto; rule in the .hdr_lnk ul rule. (The width doesn't have to be 100%, but it needed to be set to stop the element from shrink-wrapping its contents). margin: auto; will centre contents equally vertically or horizontally or margin: 0 auto; will centre contents horizontally.
This question already has answers here:
How can I horizontally center an element?
(133 answers)
Closed 4 years ago.
I have a div tag with width set to 800 pixels. When the browser width is greater than 800 pixels, it shouldn't stretch the div, but it should bring it to the middle of the page.
<body>
<div style="width:800px; margin:0 auto;">
centered content
</div>
</body>
position: absolute and then top:50% and left:50% places the top edge at the vertical center of the screen, and the left edge at the horizontal center, then by adding margin-top to the negative of the height of the div, i.e., -100 shifts it above by 100 and similarly for margin-left. This gets the div exactly in the center of the page.
#outPopUp {
position: absolute;
width: 300px;
height: 200px;
z-index: 15;
top: 50%;
left: 50%;
margin: -100px 0 0 -150px;
background: red;
}
<div id="outPopUp"></div>
Flexbox solution is the way to go in/from 2015. justify-content: center is used for the parent element to align the content to the center of it.
HTML
<div class="container">
<div class="center">Center</div>
</div>
CSS
.container {
display: flex;
justify-content: center;
}
Output
.container {
display: flex;
justify-content: center;
}
.center {
width: 400px;
padding: 10px;
background: #5F85DB;
color: #fff;
font-weight: bold;
font-family: Tahoma;
}
<div class="container">
<div class="center">Centered div with left aligned text.</div>
</div>
Do you mean that you want to center it vertically or horizontally? You said you specified the height to 800 pixels, and wanted the div not to stretch when the width was greater than that...
To center horizontally, you can use the margin: auto; attribute in CSS. Also, you'll have to make sure that the body and html elements don't have any margin or padding:
html, body { margin: 0; padding: 0; }
#centeredDiv { margin-right: auto; margin-left: auto; width: 800px; }
<div></div>
div {
display: table;
margin-right: auto;
margin-left: auto;
}
To make it also work correctly in Internet Explorer 6 you have to do it as follows:
HTML
<body>
<div class="centered">
centered content
</div>
</body>
CSS
body {
margin: 0;
padding: 0;
text-align: center; /* !!! */
}
.centered {
margin: 0 auto;
text-align: left;
width: 800px;
}
Div centered vertically and horizontally inside the parent without fixing the content size
Here on this page is a nice overview with several solutions, too much code to share here, but it shows what is possible...
Personally I like this solution with the famous transform translate -50% trick the most. It works well for both fixed (% or px) and undefined height and width of your element.
The code is as simple as:
HTML:
<div class="center"><div>
CSS:
.center {
position: absolute;
left: 50%;
top: 50%;
-moz-transform: translate(-50%, -50%); /* Firefox */
-ms-transform: translate(-50%, -50%); /* IE 9 */
-webkit-transform: translate(-50%, -50%); /* Safari and Chrome*/
-o-transform: translate(-50%, -50%); /* Opera */
transform: translate(-50%, -50%);
/* optional size in px or %: */
width: 100px;
height: 100px;
}
Here a fiddle that shows that it works
You can also use it like this:
<div style="width: 60%; margin: 0px auto;">
Your contents here...
</div>
Simply use the center tag just after the body tag, and end the center tag just before body ends:
<body>
<center>
... Your code here ...
</center>
</body>
This worked for me with all the browsers I have tried.
This can be easily achieved via flex container.
.container{
width: 100%;
display: flex;
height: 100vh;
justify-content: center;
}
.item{
align-self: center;
}
Preview Link
Add this class to the div you want centered (which should have a set width):
.marginAutoLR
{
margin-right:auto;
margin-left:auto;
}
Or, add the margin stuff to your div class, like this:
.divClass
{
width:300px;
margin-right:auto;
margin-left:auto;
}
Use the CSS flex property: http://jsfiddle.net/cytr/j7SEa/6/show/
body { /* Centered */
display: box;
flex-align: center;
flex-pack: center;
}
Some other pre-existing setups from older code that will prevent div page centering L&R are:
Other classes hidden in external stylesheet links.
Other classes embedded in something like an img (like for older external CSS print format controls).
Legend code with IDs and/or CLASSES will conflict with a named div class.
Centering without specifying div width:
body {
text-align: center;
}
body * {
text-align: initial;
}
body div {
display: inline-block;
}
This is something like <center> tag does, except:
all direct inline childs elements (eg. <h1>) of <center> will also positioned to center
inline-block element can have different size (comapred to display:block setting) according to browser defaults
Use the below code for centering the div box:
.box-content{
margin: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
position: absolute;
width: 800px;
height: 100px;
background-color: green;
}
<div class="box-content">
</div>
If you have some regular content, and not only one line of text, the only possible reason I know is to calculate margin.
Here is an example:
HTML
<div id="supercontainer">
<div id="middlecontainer">
<div class="common" id="first">first</div>
<div id="container">
<div class="common" id="second">second</div>
<div class="common" id="third">third</div>
</div>
</div>
</div>
CSS
body {
margin: 0;
padding: 0;
}
.common {
border: 1px solid black;
}
#supercontainer {
width: 1200px;
background: aqua;
float: left;
}
#middlecontainer {
float: left;
width: 104px;
margin: 0 549px;
}
#container {
float: left;
}
#first {
background: red;
height: 102px;
width: 50px;
float: left;
}
#second {
background: green;
height: 50px;
width: 50px;
}
#third {
background: yellow;
height: 50px;
width: 50px;
}
So, #supercontainer is your "whole page" and its width is 1200px.
#middlecontainer is div with content of your site; it's width 102px. In case the width of content is known, you need to divide the page's size to 2, and subtract half of content's width from the result:
1200 / 2 - (102 / 2) = 549;
Yes, I'm also seeing that this is der grosse fail of CSS.
.middle {
margin:0 auto;
text-align: center;
}
/* it brings div to center */
parent {
position: relative;
}
child {
position: absolute;
left: 50%;
transform: translateX(-50%);
}
<parent>
<child>
</child>
</parent>
Use justify-content and align-items to horizontally and vertically align a div
https://developer.mozilla.org/de/docs/Web/CSS/justify-content
https://developer.mozilla.org/en/docs/Web/CSS/align-items
html,
body,
.container {
height: 100%;
width: 100%;
}
.container {
display: flex;
align-items: center;
justify-content: center;
}
.mydiv {
width: 80px;
}
<div class="container">
<div class="mydiv">h & v aligned</div>
</div>
body, html {
display: table;
height: 100%;
width: 100%;
}
.container {
display: table-cell;
vertical-align: middle;
}
.container .box {
width: 100px;
height: 100px;
background: red;
margin: 0 auto;
}
http://jsfiddle.net/NPV2E/
"width:100%" for the "body" tag is only for an example. In a real project you may remove this property.
Simple http://jsfiddle.net/8pd4qx5r/
html {
display: table;
height: 100%;
width: 100%;
}
body {
display: table-cell;
vertical-align: middle;
}
.content {
margin: 0 auto;
width: 260px;
text-align: center;
background: pink;
}
This also works in Internet Explorer, but auto margins do not.
.centered {
position: absolute;
display: inline-block;
left: -500px;
width: 1000px;
margin: 0 50%;
}
If your center content is deep inside other divs then only margin can save you. Nothing else. I face it always when not using a framework like Bootstrap.
In my case, the phone screen size is unknown, and here is what I did.
HTML
<div class="loadingImg"></div>
CSS
.loadingImg{
position: fixed;
top: 0px;
left: 0px;
z-index: 9999999;
border: 0;
background: url('../images/loading.gif') no-repeat center;
background-size: 50px 50px;
display: block;
margin: 0 auto;
-webkit-border-radius: 50px;
border-radius: 50px;
}
JavaScript (before you need to show this DIV)
$(".loadingImg").css("height",$(document).height());
$(".loadingImg").css("width",$(document).width());
$(".loadingImg").show();
<body>
<div style=" display: table; margin: 250 auto;">
In center
</div>
</body>
If you want to change the vertical position, change the value of 250 and you can arrange the content as per your need. There is no need to give the width and other parameters.
For some reason, none of the previous answers worked for me really. This is what worked for me and it works across browsers as well:
.center {
text-align: center;
height: 100%;
/* Safari, Opera, and Chrome */
display: -webkit-box;
-webkit-box-pack: center;
-webkit-box-align: center;
/* Firefox */
display: -moz-box;
-moz-box-pack: center;
-moz-box-align: center;
/* Internet Explorer 10 */
display: -ms-flexbox;
-ms-flex-pack: center;
-ms-flex-align: center;
}
Get the width of the screen.
Then make margin left 25%
Make margin right 25%
In this way the content of your container will sit in the middle.
Example: suppose that container width = 800px;
<div class='container' width='device-width' id='updatedContent'>
<p id='myContent'></p>
<contents></contents>
<contents></contents>
</div>
if ($("#myContent").parent === $("updatedContent"))
{
$("#myContent").css({
'left': '-(device-width/0.25)px';
'right': '-(device-width/0.225)px';
});
}