html:
<div id="main">
<div id="foo">foo</div>
</div>
css:
html,body{
height: 100%;
}
#main{
height: 100%;
}
#foo{
height: auto;
/* height: 100%; I cannot use height 100% or fixed height for this element*/
}
#foo:before{
content: "bar";
/*I want to use the height in percentage which won't work but work with px*/
height: 100%;
display: block;/* or inline-block*/
}
demo
I cannot use flexbox css for some reason. And I also tried with transform css technique and various techniques such as table but even couldn't get vertical center.
I cannot change the markup and please if possible without touching the css for #main would be great for me.
You can center an element vertically within it's container using this technique:
#foo{
position: absolute;
top: 50%; // move down 50% of parent
transform: translateY(-50%); // move back up 50% of own height
}
Set position: relative; on the #main container to make #foo relate to it.
Demo
Try this:
#foo {
height: auto;
margin:auto;
position:absolute;
top:50%;
}
Related
I have a div called #text, inside another div #box. Right now I've tried to center #text by doing this:
#box {
width: 50%;
#text {position: relative; margin-left: 48%;}
}
This code puts #text approximately in the center of #box, but when I resize the screen, the size of #text changes relative to the size of the screen, so the size of its margin-right changes, and it is no longer exactly in the center.
I've heard there is a "hack" for this involving a few wrapper divs, but I don't want to overcomplicate my css or html. Is there a simple way to horizontally position a div exactly in the center of its parent?
Using flexbox is IMO the best way to center child horizontaly and verticaly. Its support is good.
First off the CSS you posted is not valid. You can accomplish what you are looking for with something like this:
CSS
body {
width:100%;
height: 100%;
margin: 0;
padding: 0;
}
#box {
width:100%;
height: 500px;
background: lightblue
}
#test {
width: 300px;
height: 300px;
border: 1px solid red;
margin: 0 auto
}
HTML
<div id="box">
<div id="test">
hello
</div>
</div>
See the JS.Fiddle
use margin: 0 auto; in the css of #text
You want exact center of page, regardless of content? Do something like this:
p {
position: absolute;
left: 50%;
transform: translateX(-50%);
}
Relative to the parent, set the following attribute on the container for your element:
div.containerOfPs {
position: relative;
}
Height was not respected on this fiddle
I want the image to have a height and width of 80% relative to its parent, vertically and horizontally aligned. For some reason, it does not work.
HTML:
<div id="menu_header_new_orig">
<img id="menu_logo_orig" src="https://imagizer.imageshack.us/v2/849x565q90/833/uua2.jpg" />
</div>
CSS:
#menu_header_new_orig {
margin-top: 2.5%;
height:40%;
width:100%;
overflow: hidden;
position: relative;
border: 1px solid green;
text-align: center;
}
#menu_logo_orig {
width: 80%;
height: 80%;
position: relative;
}
I have figured it out here, but just in case somebody have better solution.
If I understand you correct :
The parent #menu_header_new_orig own parent must also have a height (obviously 100%)
html, body {
height: 100%;
}
set display to inline, 10% top to get vertical alignment
#menu_logo_orig {
top: 10%;
display: inline;
position: relative;
width: 80%;
height: 80%;
}
Is that what you were heading for? [not really sure] - try to set #menu_header_new_orig height to other things than 40% to get it in another perspective.
forked fiddle -> http://jsfiddle.net/Dmc7j/
I know that margin-top in percentages are relative to the width... That's why, I can't always vertically and horizontally center a div that is 50% height, and 50% width of the full screen.
http://jsfiddle.net/8BJ94/
When you resize, the margin-top is relative to the width
CSS
#mini {
height : 50%;
width : 50%;
background-color : #FFFFFF;
margin-top : 25%;
margin-left : 25%;
}
Demo
http://jsfiddle.net/8BJ94/1/
Code
#hello {
position : absolute;
width : 100%;
height : 100%;
background-color : #123456;
text-align: center;
}
#hello:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
}
#mini {
height : 50%;
width : 50%;
background-color : #FFFFFF;
display: inline-block;
vertical-align: middle;
}
Based on http://css-tricks.com/centering-in-the-unknown/
How does it work?
Horizontal centering (easy):
#hello {
text-align: center;
}
#mini {
display: inline-block;
}
Vertical centering:
Make line's height to be 100% height with a ghost element:
#hello:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
}
Center #mini vertically (relatively to that line) with vertical-align:
#mini {
display: inline-block;
vertical-align: middle;
}
Browser support
Essentially everything and IE 8+.
You can support IE7 too if you use a real element as a ghost, instead of a :before pseudo element. But it isn't semantically correct.
Here is the best approach: (live example). It is supported in all modern browsers. Reference.
Set the html/body elements to height:100% and width:100%.
Then set the display of the body, or the parent element to table.
Finally, use display:table-cell, and vertical-align:middle on the child element.
That will take care of the vertical alignment.
In order to center horizontally, set margin:0px auto on the child element.
In certain cases where the width of the child isn't defined or is dynamically generated, you can also use text-align:center assuming it is an inline element.
HTML
<div id="parent">
<div id="child"></div>
</div>
CSS
html, body {
height:100%;
width:100%;
margin:0px;
}
body {
display:table;
}
#parent {
display:table-cell;
vertical-align:middle;
background:#123456;
}
#child {
height:50%;
width:50%;
background:white;
margin:0px auto;
}
Here is a pure CSS workaround without relying on table layouts, or using inline-block elements. The trick is to position the #mini element absolutely within its parent halfway from the left and halfway from the top. After that, we offset the element itself by half of its own width and height by using CSS transform:
#mini {
height: 50%;
width: 50%;
background-color : #FFFFFF;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
See Fiddle
CSS 2D transform is quite widely supported among browsers today, with a global support of around 80%. You might want to include the -ms- vendor prefix if you want to support IE9 users, too.
Looks like you need to use some javascript. Using jQuery:
$(document).ready(function() {
var topMargin = $(window).height()*.25;
$("#mini").css('margin-top', topMargin);
})
$(window).resize(function() {
var topMargin = $(window).height()*.25;
$("#mini").css('margin-top', topMargin);
})
Fiddle here: http://jsfiddle.net/dphaener/2n4PL/
The first function sets the margin on page load, and the second sets it every time the window is resized.
I'm using Chris Coyier's full width hack on a site I am building, but stumped on how I can get the div to have the height of whatever it is containing.
Usually I would achieve this by adding overflow:auto to the container, but if I do that it breaks the hack. Is it possible to achieve a height and still use this hack?
You can see my problem here: http://beta.revival.tv/
Here is my CSS:
#content-wrap:before, #content-wrap:after {content: ""; position: absolute; top: 0; bottom: 0; width: 9999px;}
#content-wrap:before {right: 100%;}
#content-wrap:after {left: 100%;}
#content-wrap, #content-wrap:before, #content-wrap:after {background:#666;}
#content-wrap {
position: relative;
width:1000px;
margin:0 auto;
padding:25px 0;
}
You can add another div to contain the content inside of the #content-wrap div and then apply overflow: auto; and width: 100%; to it
<div id="content-wrap">
<div id="content"></div>
</div>
#content {
overflow: auto;
width: 100%;
}
I don't know your html, but if the problem is caused by floating elements inside of the div, you may also want to try using display: inline-block; instead
So I have three div's
One parent and two child.
The parent is as follows:
#parent {
overflow:auto;
margin: 0 auto;
margin-top:37px;
min-height: 100%;
width:875px;
}
the two child divs are as follows
#child1 {
overflow:auto;
min-height:150px;
border-bottom:1px solid #bbb;
background-color:#eee;
opacity:0.4;
}
#child2 {
height:100%;
background-color:white;
}
The parent div extends 100% as I can see the borders of it till the end of the page but the child2 is not extending down to the end of the page like the parent div.
height doesn't behave the way you seem to be anticipating. When you specify height: 100% that percentage is calculated by looking up the DOM for the first parent of said element with a height specified that has absolute or relative positioning.
You can cheat when it comes to the body tag, so if you had something like this:
<body>
<div style="height: 100%">
</div>
</body>
Some browsers/versions will behave the way you expect by taking up the total height of the page. But it won't work when you go any deeper than that.
Here is the approach I use to strech a div to the bottom of the page, it involves absolute positioning (nice thing about this one is that it is pretty cross-browser compliant and doesn't require javascript to pull it off):
<div id="parent">
<div id="childNorm"></div>
<div id="childStrech"></div>
</div>
#parent
{
position: absolute;
width: 1000px;
bottom: 0;
top: 0;
margin: auto;
background-color: black;
}
#childNorm
{
position: absolute;
width: 1000px;
top: 0;
height: 50px;
background-color: blue;
color: white;
}
#childStrech
{
position: absolute;
width: 1000px;
top: 50px;
bottom: 0;
background-color: red;
color: white;
}
Here is a Jsfiddle for demo: http://jsfiddle.net/t7ZpX/
The trick:
When you specify absolute positioning and then put in bottom: 0; that causes the element to stretch to the bottom of the page; You just have to worry about positioning the elements as a trade off.
Yes, this is one of the annoying things in css. min-height is not considered a "height" for purposes of calculating height. See http://jsfiddle.net/3raLu/3/. You need to have height: 100% on the parent div to make the child full height. Or, if you can have it be absolutely positioned, then this works: http://jsfiddle.net/3raLu/6/.