So, I just discovered this today and I couldn't find it this solution anywhere on Stackoverflow, so I thought I'd share it. Let me know if it's been posted somewhere else and I'll mark it as duplicate.
As far as I know centering an element wider than it's parent is a fairly common problem, the only solutions I've come across make use of Javascript, which turns out as a lengthy, messy bit of code that's annoying to maintain across lots of elements using this functionality.
The problem HTML:
<div class="container-fluid" >
<div class="center-me-fixed">
<span> Center </span>
</div>
</div>
CSS:
.container-fluid {
max-width: 400px;
width: 100%;
height: 100%;
display:block;
margin:auto;
}
.center-me-fixed {
width: 500px;
height:50px;
text-align: center;
}
The solution:
Use absolute positioning on the child you need to center, mess with the left/right values and set margin to auto like so:
CSS:
.center-me-fixed {
position:absolute;
left: -1000%;
right: -1000%;
margin: auto;
display: block;
width: 500px;
height: 50px;
}
Make sure the parent's container position is relative:
.container-fluid {
position: relative;
width: 100%;
height: 100%;
display:block;
margin:auto;
}
And that's it! I'm not sure how this works, if someone could explain that would be cool.
jsFiddle
I searched on the web and the best solutions i've found is this
Fiddle
css:
html, body {
height: 100%;
}
div.container-fluid {
border:1px solid blue;
max-width:400px;
margin:0px auto;
min-height: 100%;
}
div.container-fluid .center-me-fixed {
position:relative;
right:50%;
text-align:center;
}
div.container-fluid .center-me-fixed span {
border:1px solid green;
width: 500px;
height:50px;
display:inline-block;
margin-right:-100%;
}
html:
<div class="container-fluid">
<div class="center-me-fixed">
<span>
this should be centered
</span>
</div>
</div>
If this solution does not suit your needs, i apologize for making you lose time.
Related
How do I make a fixed element push other elements to the side when they overlap?
I don't want this:
Or this:
I want this:
I want to know how to make the elements collide or push so that I can easily align the elements without having to position them pixel by pixel.
Edit: I tried positioning a div to be fixed and displaying it as a block, but other elements were still overlapping it. Is it even possible to push elements away from a fixed element?
Is it even possible to push elements away from a fixed element?
I would say no. Not with this concept.
I can think of two solutions that I would not recommend.
Implement it with an iframe. But I would not recommend that.
Using JS to read out the width and assign it to the neighbouring element.
I updated my question after i got a good hint. For this example i added body height 200vh; that you can scroll down to see like it works.
body {
height: 200vh;
}
.verti {
background: red;
width: 200px;
height: 500px;
z-index: 10;
position: fixed;
top: 8px;
}
.hori {
background: green;
width: 500px;
height: 200px;
z-index: 1;
position: relative;
left: 200px;
}
<div class="w">
<div class="hori"></div>
<div class="verti"></div>
</div>
Tried using float? I'm pretty new to all this but this is what I got:
<body>
<div id="container">
<div id="fixed">
<p class="center-text white">Fixed <br>Element</p>
</div>
<div id="not-fixed">
<p class="center-text white">Not Fixed Element</p>
</div>
</div>
<style>
* {
padding: 0;
margin: 0;
font-family:arial;
}
.center-text {
text-align:center;
position:relative;
top:45%;
}
.white {
color:white;
}
#container {
margin:10px;
width:700px;
height:700px;
}
#fixed {
background-color:red;
position:fixed;
width:200px;
height:500px;
}
#not-fixed {
position:relative;
background-color:green;
width:500px;
height:200px;
float:right;
}
</style>
</body>
I have looked at the already asked questions and tried multiple solutions but nothing seems to be working for me. I have a div, with multiple div's inside of it, and I cannot get it to center in the middle of the page on resize
This is the parent div which contains multiple others
<div id="showme" class="newmodal" style="position: absolute; z-index: 1000;
max-width: 561px; left: 700px; top: 263px; display: none;">
This is the css for the div
.newmodal {
position: fixed;
margin: 0 auto;
max-width: 900px; /* our page width */
min-width: 500px;
width: 50%;
}
Sorry if I am being really stupid, very new to this. I have tried removing the left and top inline styles but nothing is working.
EDIT
I forgot to mention that this div is being hidden and unhidden using a button so I am not sure if that changes any of the current answers.
.newmodal {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 50%;
max-width: 900px;
/* our page width */
min-width: 500px;
background: #222;
}
<div id="showme" class="newmodal">Some content</div>
It will center div vertically and horizontally.
You need to close your div tag. Why use width,max-width,min-width? Try the following code:
.newmodal {
background: red;
max-width: 200px;
margin: 0 auto;
height: 50px;
}
<div id="showme" class="newmodal"></div>
Try this:
#container {
position: relative;
float: none;
margin: 0 auto;
border: solid blue 1px;
width: 100%;
}
.newmodal {
border: 1px solid black;
display: block;
margin: 1.5em auto;
text-align:center;
padding:7px;
width: 50%;
background:#222;
color:#fff;
}
<div id="container">
<div class="newmodal">Some content here</div>
</div>
I created this CodePen that you can use to look at. Try using something like this:
.newmodal {
position: relative;
margin: 0 auto;
max-width: 900px;
min-width: 500px;
background-color: red;
}
Remove all of your styling from your HTML because you had some contradicting styles going on between the CSS and HTML you provided.
<div id="showme" class="newmodal">
<!--Some added data-->
</div>
Remember also that in order for margin: 0 auto; to work, the element must be block style, it can't float, it can't be fixed or absolute, and a width that is not auto. Found this information from this post: What, exactly, is needed for "margin: 0 auto;" to work?
Edit:
So if you are using jQuery and you want to make it appear and disappear, you can do something like this:
$(".newmodal div").on("click", function() {
if ($(this).css('display') == 'block') {
$(this).hide();
}
else {
$(this).show();
}
});
The only problem with this is making the element reappear. But I'm not sure what your entire project looks like but I hope this points you in the right direction.
1st the css part of "margin: 0 auto" and "width 50%" should be for the child div and not the parent.
2nd you can make your life much easier my moving to flexbox which does all that automatically.
See https://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/
i am starting to learn css. I have this html and css. I am not able to center this image to center of the window. Please explain also how you got this output.
Edited :
I want it to be center both vertically and horizonally
Thank you.
.myClass {
background-image:url(http://www.funklix.in/wp-content/uploads/2014/07/Clip-art-free-1.gif);
height:250px;
width:250px;
}
<div class="myClass">
</div>
Here are solutions for centering div!
StackOverflow Answer
This is my preferred solution.
HTML:
<div class="container"><div class="container__inner"></div></div>
CSS:
.container{
position:relative;
}
.container__inner{
width: 250px;
height: 250px;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
Note that this solution only works if the container has a fixed height!
Read more about this here
http://www.smashingmagazine.com/2013/08/09/absolute-horizontal-vertical-centering-css/
You need to add margin to your class.
.myClass {
background-image:url(http://www.funklix.in/wp-content/uploads/2014/07/Clip-art-free- 1.gif);
height:250px;
width:250px;
margin:0 auto;
}
This will add margin on each side of the element.
add margin: auto
.myClass {
background-image:url(http://www.funklix.in/wp-content/uploads/2014/07/Clip-art-free-1.gif);
height:250px;
width:250px;
margin: auto;
}
I know there is a lot of same topics, but is there any CSS way to stick bottom a footer with an height in % without overflowing the body and the header because of absolute position ?
I'm trying to stick this one :
html,body{
height: 100%;
}
#header{
background-color: yellow;
height: 100px;
width: 100%;
}
#holder {
min-height: 100%;
position:relative;
}
#body {
padding-bottom: 100px;
}
#footer{
background-color: lime;
bottom: 0;
height: 100%;
left: 0;
position: relative;
right: 0;
}
with html :
<div id="holder">
<div id="header">Title</div>
<div id="body">Body</div>
<div id="footer">Footer</div>
</div>
Code here : http://jsfiddle.net/TsRkB/
Thanks !
if you use display:table as a base , then your sticky footer can be any size and will be pushed down if content grows.
http://dabblet.com/gist/5971212
html {
height:100%;
width:100%;
}
body {
height:100%;
width:100%;
display:table;
table-layout:fixed;
margin:0 auto;
width:80%;
}
.tr {
display:table-row;
background:turquoise
}
section.tr {
height:100%;
background:yellow
}
for
<header class="tr"> <h1>title</h1><p>make me grow</p></header>
<section class="tr"><article>article</article></section>
<footer class="tr"> <p>Footer</p><p>make me grow</p></footer>
All the other solutions are out of date and have a major shortcoming: they don't work if the height of the footer is variable or unknown.
With the advent of the CSS flex model, solving this problem become very, very easy: while mostly known for laying out content in the horizontal direction, Flexbox actually works just as well for vertical layout problems. All you have to do is wrap the vertical sections in a flex container and choose which ones you want to expand. They'll automatically take up all the available space in their container.
Note how simple the markup and the CSS are. No table hacks or anything.
The flex model is supported by all major browsers as well as allegedly IE11+, though my IE doesn't render this snippet correctly yet.
html, body {
height: 100%;
}
#header {
background: yellow;
height: 100px; /* can be variable as well */
}
#wrapper {
display: flex; /* use the flex model */
min-height: 100%;
flex-direction: column; /* learn more: http://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/ */
}
#body {
flex: 1;
border: 1px solid orange;
}
#footer{
background: lime;
}
<div id="wrapper">
<div id="header">Title</div>
<div id="body">Body</div>
<div id="footer">
Footer<br/>
of<br/>
variable<br/>
height<br/>
</div>
</div>
Fixed it for you, basically have to put the footer outside the wrapper and move it up...
http://jsfiddle.net/sMdmk/4/
#footer{
background-color: lime;
bottom: 0;
height: 10%;
left: 0;
position: relative;
right: 0;
top: -10%;
}
This question already has answers here:
How to center an element horizontally and vertically
(27 answers)
Closed 7 years ago.
Is there a way to CENTER A DIV vertically and horizontally but, and that is important, that the content will not be cut when the window is smaller than the content The div must have a background color and a width and hight.
I have always centered divs with the absolute positioning and negative margins like in the example provided. But it has the problem that it cuts the content on top. Is there a method to center the div .content without this problem?
I have the example here to play: http://jsbin.com/iquviq/1/edit
CSS:
body { margin: 0px; }
.background {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
background-color: yellow;
}
/*
is there a better way than the absolute positioning and negative margin to center the div .content: div with background color a width and a hight?:
*/
.content {
width: 200px;
height: 600px;
background-color: blue;
position:absolute;
top:50%;
left:50%;
margin-left:-100px;/* half width*/
margin-top:-300px;/* half height*/
}
HTML:
<div class="background">
<div class="content"> some text </div>
</div>
My question is not duplicate of "How to center an element horizontally and vertically? " 1- My question was asked before. (just check dates). 2- My question ask very clearly and in black as condition: "the content will not be cut when the window is smaller than the content"
For modern browsers
When you have that luxury. There's flexbox too, but that's not broadly supported at the time of this writing.
HTML:
<div class="content">This works with any content</div>
CSS:
.content {
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
Tinker with it further on Codepen or on JSBin
For older browser support, look elsewhere in this thread.
After trying a lot of things I find a way that works. I share it here if it is useful to anyone. You can see it here working: http://jsbin.com/iquviq/30/edit
.content {
width: 200px;
height: 600px;
background-color: blue;
position: absolute; /*Can also be `fixed`*/
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
/*Solves a problem in which the content is being cut when the div is smaller than its' wrapper:*/
max-width: 100%;
max-height: 100%;
overflow: auto;
}
Here's a demo:
http://www.w3.org/Style/Examples/007/center-example
A method (JSFiddle example)
CSS:
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
display: table
}
#content {
display: table-cell;
text-align: center;
vertical-align: middle;
}
HTML:
<div id="content">
Content goes here
</div>
Another method
(JSFiddle example)
CSS
body, html, #wrapper {
width: 100%;
height: 100%
}
#wrapper {
display: table
}
#main {
display: table-cell;
vertical-align: middle;
text-align:center
}
HTML
<div id="wrapper">
<div id="main">
Content goes here
</div>
</div>
The legitimate way to do that irrespective of size of the div for any browser size is :
div{
margin:auto;
height: 200px;
width: 200px;
position:fixed;
top:0;
bottom:0;
left:0;
right:0;
background:red;
}
Live Code
You can compare different methods very well explained on this page: http://blog.themeforest.net/tutorials/vertical-centering-with-css/
The method they recommend is adding a empty floating element before the content you cant centered, and clearing it. It doesn't have the downside you mentioned.
I forked your JSBin to apply it : http://jsbin.com/iquviq/7/edit
HTML
<div id="floater">
</div>
<div id="content">
Content here
</div>
CSS
#floater {
float: left;
height: 50%;
margin-bottom: -300px;
}
#content {
clear: both;
width: 200px;
height: 600px;
position: relative;
margin: auto;
}
I do not believe there is a way to do this strictly with CSS. The reason is your "important" qualifier to the question: forcing the parent element to expand with the contents of its child.
My guess is that you will have to use some bits of JavaScript to find the height of the child, and make adjustments.
So, with this HTML:
<div class="parentElement">
<div class="childElement">
...Some Contents...
</div>
</div>
This CSS:
.parentElement {
position:relative;
width:960px;
}
.childElement {
position:absolute;
top:50%;
left:50%;
}
This jQuery might be useful:
$('.childElement').each(function(){
// determine the real dimensions of the element: http://api.jquery.com/outerWidth/
var x = $(this).outerWidth();
var y = $(this).outerHeight();
// adjust parent dimensions to fit child
if($(this).parent().height() < y) {
$(this).parent().css({height: y + 'px'});
}
// offset the child element using negative margins to "center" in both axes
$(this).css({marginTop: 0-(y/2)+'px', marginLeft: 0-(x/2)+'px'});
});
Remember to load the jQ properly, either in the body below the affected elements, or in the head inside of $(document).ready(...).