This question already has answers here:
How to set the margin or padding as percentage of height of parent container?
(9 answers)
Closed 7 years ago.
I have very simple markup and style rules that should put my div in the middle of the page, but it does not (actually, the top of the div would be at the middle, not 100% truly centered vertically) when the viewport is of a small enough height.
HTML:
<div>adf</div>
CSS:
div {
background-color:red;
margin-top:50%;
}
You can look at my Fiddle to see this. It will require you shrink the rendered window (bottom right) a bit, as it is correct initially.
Instead of 50% try 50vh
50% doesn't do what you think it would - it actually uses the width of the parent container, not the height to calculate.
Try replacing percentages with vh
div {
background-color:red;
margin-top:50vh;
}
<div>adf</div>
Here are more cool stuff about viewport sized measures
Here is another solution:
http://jsfiddle.net/nb6pq14v/
html, body{height:100%; margin:0;padding:0}
.container-fluid{
height:100%;
display:table;
width: 100%;
padding: 0;
}
.row-fluid {height: 100%; display:table-cell; vertical-align: middle;}
.centering {
float:none;
margin:0 auto;
background: #abc;
height: 25px;
}
<div class="container-fluid">
<div class="row-fluid">
<div class="centering text-center">
</div>
</div>
</div>
Related
This question already has answers here:
How to set the margin or padding as percentage of height of parent container?
(8 answers)
Closed 5 years ago.
I have the following css in a page to always make my picture centered:
img {
padding: calc(49% - 306px);
}
The problem I have is that the "49%" is basing off the page width, and not height as I want. Is there a way I can change that? Thanks!
Note: My picture is in a <div align="center"> to center it horizontally
Without having full context of what you're trying to do, I'd guess CSS Flex is your best bet. The snippet I've attached shows you one method of centering an image inside a div when the image is not a full-sized background.
Keep in mind that this solution will need to be re-worked a little for your application.
.container {
border:1px solid red;
margin:0 auto;
display:flex;
height:500px;
width:500px;
justify-content:center;
align-items:center;
}
<div class="container">
<img src="https://www.w3schools.com/howto/img_fjords.jpg" width="100px" height="100px">
</div>
You could change the img element to a div and get the image as a background image like this:
div {
width:100%;
height:100%;
background:url(logo.png) center center no-repeat;
}
Can you use flexbox?
html, body, div.center {margin: 0;height: 100%;}
div.center {display:flex; align-items: center;}
img {
flex: 0 0 auto;
margin: auto;
}
<div class="center">
<img src="//placehold.it/306x100" alt="">
</div>
Demo: http://output.jsbin.com/xotupegove
This question already has answers here:
Percentage Height HTML 5/CSS
(7 answers)
Closed 7 years ago.
I'm creating a website as a project and have run into a problem regarding the header. Basically the header is meant to be set height at 50% of the browser window, however, it only seems be as big as the content inside the header (2 headings).
I've uploaded this website to here
The HTML
<header role="banner" id="banner">
<div class="not-fullscreen background bgheader1"" data-img-width="1600" data-img-height="1064">
<div class="content-a">
<div class="content-b">
<h1>Manchester Metropolitan University</h1>
<h2>Course Information</h2>
</div>
</div>
</div>
</header>
The CSS -
header {
min-height:50%;
height:50%;
width:100%;
}
.fullscreen,
.content-a {
width:100%;
min-height:100%;
}
.not-fullscreen,
.not-fullscreen .content-a,
.fullscreen.not-overflow,
.fullscreen.not-overflow .content-a {
height:100%;
overflow:hidden;
min-height:50%;
}
/* content centering styles */
.content-a {
display:table;
height:50%;
}
.content-b {
display:table-cell;
position:relative;
vertical-align:middle;
text-align:center;
}
The rest of the information can be extracted from the website
Any help will be appreciated
Thanks.
EDIT - It has to work with bootstraps sticky footer / fixed nav. Although html / body height does fix it, it also messes the footer up.
Define a 100% height for your html and body elements:
html, body {
height: 100%;
}
By default, the body only takes a height of the content within it, unless that content is more than the height of the window, in which case it'll overflow and you get your scrollbar.
You need to have your body take up 100% of the window, even when there's no/little content, using height:
html, body{
height: 100%;
}
JSFiddle
This question already has answers here:
How do I vertically align text in a div?
(34 answers)
Closed 9 years ago.
I was wondering what would be the best way to vertically center a div inside another div. The only constraint I have is that .anim needs to remain relative! I lsited the current code I have now down below. Thanks guys!
HTML:
<div class="anim">
<div class="spacer">
<p>CONTENT</p>
<p>more content</p>
</div>
</div>
CSS:
.anim {
position:relative;
width:75%;
margin:auto;
height:50%;
}
.spacer{
position:absolute;
height:300px;
top:0;
bottom:0;
}
.anim{display:table;}
.spacer {display:table-cell; vertical-align:middle;}
would have it vertically aligned
An easy way to do this is to give your .anim div a fixed height of, let's say, 500px.
Then you can just add a margin-top :
.anim {
margin-top: 100px; // (500 - 300) / 2 = 100
}
demo
according to w3: http://www.w3.org/Style/Examples/007/center.en.html#vertical
CSS level 2 doesn't have a property for centering things vertically. There will probably be one in CSS level 3. But even in CSS2 you can center blocks vertically, by combining a few properties. The trick is to specify that the outer block is to be formatted as a table cell, because the contents of a table cell can be centered vertically.
so the code is really simple
.anim {
display: table-cell;
vertical-align: middle;
height: 200px;
}
here is the demo http://jsfiddle.net/AbTxS/
From your question it looks like you want something like this... div.spacer is vertically centered and div.anim remains relative.
The div.spacer top margin must be negative half of the .spacer height.
This solution only works with a fixed height for .spacer.
CSS
.anim {
position:relative;
width:75%;
margin:auto;
height:800px;
background:#FF0
}
.spacer {
position:absolute;
top:50%;
margin:-150px 0 0;
width:300px;
height:300px;
background:red
}
HTML
<div class="anim spacer">
<p>
Content
</p>
<p>
More content
</p>
</div>
This question already has answers here:
How can I vertically center a div element for all browsers using CSS?
(48 answers)
Closed 8 years ago.
Here's my situation: I'm trying to make a page with two DIVsfilling whole page (height 100%, width 50% each). Also, the content in the DIVs is to be vertically aligned to middle.
Is there an easy way to achieve this without hacks or javascript?
I've tried body,html{height:100%;} .mydiv {display:table-cell;height:100%;vertical-align-middle}
but that doesn't work...and with that code, i have to specify width in pixels instead of percentage
Live Demo
I just made a jsFiddle showing my suggestion to a solution. Here I take into account that you want two <div>s filling 50% of the width each, 100% height, and that you want the content to be vertically aligned in the middle. Here is the simplified working solution with source code.
HTML
<div id="outer">
<div id="table-container">
<div id="table-cell">
This content is vertically centered.
</div>
</div>
</div>
CSS
#outer {
position:absolute;
top:0;
left:0;
width:50%;
height:100%;
}
#table-container {
height:100%;
width:100%;
display:table;
}
#table-cell {
vertical-align:middle;
height:100%;
display:table-cell;
border:1px solid #000;
}
For reference, I used this tutorial.
position: absolute;
top: 0;
bottom: 0;
Will give you a box that fills to 100% height. Make sure your HTML and BODY tags are large enough:
html, body {
height: 100%;
}
Do you want this type of design ? => Example Fiddle
To describe my item- I have a div element which grows in size if more content is added- also the parent div grows in size as it should be.
Then I have 2 div elements one floated left and the other on the right. I set height to 100% but that don't work. How could I achieve such behavior?
http://109.91.124.194/nucleareducated_2/index.php
This is a typical problem that unfortunately does not have a simple solution. Do a quick Google search for equal height columns and you will see what I mean. Your code is not working because height:100% does not work unless the parent container has a specified height to calculate what 100% is. Without a specified height set, then height:100% defaults to height:auto and you end up with divs that do not expand to the size of the parent.
As you have probably guessed, it's pretty hard to set the height of the parent div because it changes. The answers include setting the height dynamically with Javascript, or more often than not, just faking it so that it appears that the columns expand to the size of the parent.
IMO the best way is to use the css table attribute if you only care about newer browsers, it does not work on IE7 or older.
#containerdiv {
display:table;
}
#childdivleft, #childdivcenter, #childdivright {
display: table-cell;
}
The next best is to use large values for padding and a corresping negative margin on the bottom of the child containers.
#leftdiv,#rightdiv {
padding-bottom: 32767px;
margin-bottom: -32767px;
}
You can also use -
jQuery - Columns of Equal Height with JQuery
several other solutions - CSS - Equal Height Columns?
let me know if this is what you are looking for: tested in chrome*
<html>
<head>
<style>
html, body {
height:100%;
}
</style>
</head>
<body>
<div style="clear: both; height:100%;">
<div class="pageShadow" style="background-color: blue; height: 100%; width: 47px; float: left;"></div>
<div class="pageShadow" style="background-color: blue; height: 100%; width: 52px; float: right;"></div>
<div class="pageShadow" style="background-color: green; margin-left: 47px; margin-right: 52px;"></div>
</div>
</body>
</html>
Maybe this is what you mean? You can add a div around the left and right div if you want an area with 100% height.
CSS:
* { margin:0; padding:0 }
#around { background:yellow; float:left }
#left { float:left; width:40%; background:red }
#right { float:right; width:60%; background:green }
#bottom { clear:both; background:blue }
HTML:
<div>
<div id="around">
<div id="left"></div>
<div id="right"></div>
</div>
<div id="bottom"></div>
</div>