I have a login page and I want to center it both horizontally and vertically.
I have written this code but it's not working.
HTML:
<div class='loginMainDiv'>
<div class="loginTable">
</div>
</div>
CSS:
.loginMainDiv {
height:550px;
width:100%;
text-align:center;
}
.loginTable {
display: block;
margin-left: auto;
margin-right: auto;
}
This is an example of what you can do:
http://jsfiddle.net/jUN83/
Play around with the margin of .loginTable until it fits your requirements.
Used CSS:
.loginMainDiv {
height: 550px;
text-align:center;
background: #FFDDDD; /* For clarity */
}
.loginTable {
width: 75%;
margin: 50% auto;
background: #DDDDFF; /* For clarity */
}
Both background: #... statements can be deleted without any consequences.
use the code like this
html
<body>
<div id="loginMainDiv">
<div id="loginTable">Content goes here</div>
</div>
</body>
css
body, html, #loginMainDiv {
width: 100%;
height: 100%
}
#loginTable{
width: 200px;
height: 200px;
background-color: blue;
position:absolute;
left:0; right:0;
top:0; bottom:0;
margin:auto;
max-width:100%;
max-height:100%;
overflow:auto;
}
demo link
Try this. 7 percent from top. Right and left is auto that will make the div center align. You can set your width accordingly.
.loginMainDiv {
height:550px;
width: 40%;
background: #fff;
margin: 7% auto 0 auto;
}
Give the parent display: table; and the element which has to be centered display: table-cell; Vertical center via vertical-align: middle;
Example: http://jsbin.com/epaxob/1/edit
.loginMainDiv {
height: 550px;
width: 100%;
text-align: center;
display: table;
vertical-align: middle;
}
.loginTable {
display: block;
display: table-cell;
}
Try the following:
.loginTable {
top: 50%;
left: 50%;
position: absolute;
}
$(document).ready(function(){
var windowWidth = $(window).width(); //retrieve current window width
var windowHeight = $(window).height(); //retrieve current window height
$('.loginTable').css('top',(windowHeight/2)+'px');
$('.loginTable').css('left',(windowWidth /2)+'px');
});
this code will always fix your div in the center of any screen..
if you face any problem please let me know
Related
I need all divs to be 100% document height. It works till some of them has a top margin. In this case remaining divs loses its full height.
How can I stretch all div's height to full document height, regardless of margin of any of them?
* {
.margin: 0;
}
html {
background: red;
height: 100%;
}
body {
max-width: 1366px;
background: blue;
height: 100%;
}
#divleft {
float: left;
background: lightblue;
width: 40%;
height: 100%;
}
#divmiddle {
float: left;
margin-top: 25px;
background: lightgreen;
width: 40%;
height: 100%;
}
#divright {
float: right;
background: green;
width: 20%;
height: 100%;
}
<div id='divleft'>left</div>
<div id='divmiddle'>middle</div>
<div id='divright'>right</div>
Here is the fiddle
You don't necessarily need height: 100% for your divs to be full height. You can achieve this layout, making the divs fully dynamic, with CSS flexbox.
All you need is display: flex on the container.
You can get rid of all float rules and don't need to use calc().
html {
background: red;
height: 100%;
}
body {
display: flex; /* NEW */
max-width: 1366px;
background: blue;
height: 100%;
}
#divleft {
background: lightblue;
width: 40%;
}
#divmiddle {
margin-top: 25px;
width: 40%;
background: lightgreen;
}
#divright {
width: 20%;
background: green;
}
<div id='divleft'>left</div>
<div id='divmiddle'>middle</div>
<div id='divright'>right</div>
revised fiddle
An initial setting of a flex container is align-items: stretch. This means that child elements of the container (aka "flex items"), will consume the free space in the cross-axis, which in this case is vertical / height.
You can use CSS calc() function, like:
#divmiddle{
margin-top: 25px;
height: calc(100% - 25px);
}
Have a look at the snippet below (let me know if this works for you):
html{
background:red;
height:100%;
}
body{
max-width:1366px;
background:blue;
height:100%;
margin: 0;
}
#divleft{
float:left;
background:lightblue;
width:40%;
height:100%;
}
#divmiddle{
float:left;
margin-top:25px;
background:lightgreen;
width:40%;
height:calc(100% - 25px);
}
#divright{
float:right;
background:green;
width:20%;
height:100%;
}
<body>
<div id='divleft'>left</div>
<div id='divmiddle'>middle</div>
<div id='divright'>right</div>
</body>
Hope this helps!
Just remove margin property from middle div..
#divmiddle{
float:left;
background:lightgreen;
width:40%;
height:100%;
}
You can simply deduct the margin percentage from the height. Instead of height: 100%, use something like width: 98%; height: 98%; margin: 1%; or width: 23%; height: 23%; margin: 1%;, etc.
I have a responsive design with a header image which is placed in a container. The image has width:100%; and height:auto; so it grows as you enlarge the viewport. I don't want to exceed a certain height so the container has a max-height. The image still grows but now the bottom part is cut off now because it aligns to the top of the container.
I would like the image to stay vertically centered in it's container so that parts of the image are cut off at the top and at the bottom. The outcome should look like this:
The header images are uploaded by users so they might have different heights therefore I cannot work with specific pixel-values. Is there a CSS-solution for this or do I have to use JavaScript?
Here is the code:
.wrapper {
width: 90%;
max-width: 600px;
margin: 1em auto;
background-color: #E9ADAD;
}
.container {
text-align: center;
height: auto;
line-height: 200px;
max-height: 200px;
overflow: hidden;
}
img {
width: 100%;
height: auto !important;
vertical-align: middle;
}
<div class="wrapper">
<div class="container">
<img src="http://placehold.it/600x300/C00000/FFFFFF&text=Image+vertically+centered">
</div>
</div>
And I prepared a fiddle.
You can use absolute positioning for your image , negative top/bottom values and margin:auto; to verticaly center the image in the container :
.wrapper {
width: 90%;
max-width: 600px;
margin: 1em auto;
background-color: #E9ADAD;
max-height: 200px;
}
.container {
position:relative;
padding-bottom:40%;
overflow: hidden;
}
img {
position:absolute;
top:-50%; bottom:-50%;
margin:auto;
width: 100%;
height: auto;
}
<div class="wrapper">
<div class="container">
<img src="http://placehold.it/600x300/C00000/FFFFFF&text=Image+vertically+centered">
</div>
</div>
Not so long ago there was only a javascript way to do this but now we have some css rules: object-fit and object-position
They work just like the background-size rules cover and contain:
.container img{
width: 100%;
height: auto;
}
#supports(object-fit: cover){
.container img{
height: 100%;
object-fit: cover;
object-position: center center;
}
}
The problem with this approach is that is very new and doesn't work on ie or Edge yet.
Pen here: http://codepen.io/vandervals/pen/MwKKrm
EDIT: Please, see that you need to declare the width and the height of the image, or it won't work.
.wrapper {
width: 90%;
max-width: 600px;
margin: 1em auto;
}
.container {
height: 200px;
overflow: hidden;
}
.imgWrapper {
position: relative;
width: 200%;
height: 200%;
top: -50%;
left: -50%;
}
img {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
height: auto;
width: 50%;
}
<div class="wrapper">
<div class="container">
<div class="imgWrapper"><img src="http://placehold.it/600x300"></div>
</div>
</div>
http://jsfiddle.net/ghygpw8t/5/
inspired by: https://css-tricks.com/perfect-full-page-background-image/
Try like this: Demo
If image size is small it will be arranged in vertical middle and if its big, it will fit in box.
CSS:
.wrapper {
width: 90%;
max-width: 600px;
margin: 1em auto;
}
.container {
text-align: center;
line-height: 200px;
overflow: hidden;
background-color:#ccc;
vertical-align:middle;
height: 200px;
border:2px solid green;
display: flex;
width: 100%;
align-items: center;
justify-content: center;
}
img {
width: 100%;
max-height: 196px;
border:2px solid red;
vertical-align: middle;
line-height: 196px;
}
Hope this is what you want!
On the element you want centered.
.element {
position: relative;
top: 50%;
transform: translateY(-50%);
}
on its parent.
.parent { transform-style: preserve-3d; }
Use a polyfill to render cross browser styles.
I have 2 divs in a container, one in the center and one to the right. I want the width of the right div to be responsive. Currently, only the max-width on the centered one works.
See this jsFiddle.
How do I make the right div responsive too?
HTML:
<div id="container">
<div id="middle">Centered</div>
<div id="right">Make me responsive</div>
</div>
CSS:
#container {
width: 100%;
text-align: center;
position: relative;
}
#middle {
background: #ddd;
margin: 0 auto;
position: relative;
width: 100%;
max-width:300px;
height:300px;
display: inline-block;
vertical-align: top;
}
#right {
background:yellow;
width:100%;
max-width:300px;
display: inline-block;
vertical-align: top;
position: absolute;
}
#media screen and (max-width: 350px) {
#right {
display: none;
}
}
The idea is to use flexbox. And add a pseudo element for left column, in order to make the middle one in the center with your existing markup.
JSFiddle Demo
#container {
display: flex;
}
#container:before, #middle, #right {
border: 1px solid red;
flex: 1 1 0;
}
#container:before {
content:"";
}
#middle {
max-width: 100px;
}
<div id="container">
<div id="middle">Centered</div>
<div id="right">Responsive</div>
</div>
You can accomplish what you want by doing something like this: JSFiddle
Only problem is your middle div has to have a fixed width but using media queries you can forget about that. Keep in mind that calc browser support could be better (although there are polyfills).
#middle {
position: relative;
margin: 0 auto;
height: 300px;
width: 340px;
background: #ddd;
text-align: center;
}
#right {
position: absolute;
top: 0; right: 0;
width: calc(50% - 170px);
background: red;
}
#media screen and (max-width: 340px) {
#middle {
width: auto;
max-width: 340px;
}
#right {
display: none;
}
}
BEFORE EDIT
max-width is not working on elements where position is set to absolute.
What exactly do you want do accomplish with absolute and also, what kind of layout do you want to get in the end?
remove the max-width from right div. also you have to set a percent less than 100% but totally 100% to make sense to responsive divs:
#container {
width: 100%;
text-align: center;
position: relative;
}
#middle {
background: #ddd;
margin: 0 auto;
position: relative;
width: 80%;
max-width: 300px;
height: 300px;
display: inline-block;
vertical-align: top;
}
#right {
background: yellow;
width: 20%;
display: inline-block;
vertical-align: top;
position: absolute;
}
#media screen and (max-width: 350px) {
#right {
display: none;
}
#middle {
width: 100%;
}
}
<div id="container">
<div id="middle">Centered</div>
<div id="right">Make me responsive</div>
</div>
Working on a fullpage ("locked") design.
Here's what I'm working with:
http://jsfiddle.net/5yex5nfu/
<div id="wrapper">
<div id="navigation">
Nav
</div>
<div id="main">
Main
</div>
<div id="footer">
Footer
</div>
</div>
body {
height: 100%;
width: 100%;
margin: 0px;
}
#wrapper {
display: block;
position:absolute;
height:auto;
bottom:0;
top:0;
left:0;
right:0;
margin-top:50px;
margin-bottom:50px;
margin-right:50px;
margin-left:50px;
background-color: lightblue;
}
#navigation, #footer {
width: 100%;
height: 70px;
background: pink;
}
#main {
height: auto;
background: lightgreen;
}
I want the main div to fill out the rest of the "locked" div, with a %-value; whilst the footer and navigation hade assigned px-values.
Have seen a few solutions for my problem, but none of them seems to work. Have tried to set a %-value for every div, and it works, but as expected: The whole thing scales and messes up the layout.
For a pure css solution you can use calc to calculate the height of main
Example http://jsfiddle.net/5yex5nfu/2/
Just change #main height from auto to this
#main {
height: calc(100% - 140px);
}
Read more about calc and a-couple-of-use-cases-for-calc
You can use just css, with display:table propriety!
http://jsfiddle.net/Monteduro/5yex5nfu/5/
#wrapper {
position: absolute;
top: 0;
left: 0;
background-color: lightblue;
display: table;
height: 100%;
width: 100%;
box-sizing: border-box;
padding:50px;
}
#navigation, #footer {
width: 100%;
height: 70px;
background: pink;
display:table-row;
}
#main {
height: auto;
background: lightgreen;
display:table-row;
}
I need to vertically center content within HTML container that has next properties:
height: auto;
min-height: 50%;
I tried different alignment techniques without success. For example:
table: http://jsfiddle.net/7g461sne/
ghost element: http://jsfiddle.net/7g461sne/1/
Could you advice how to vertically center content in a such container? I'm interested in pure HTML/CSS solution.
First I am going with the table structure. Update your CSS like below.
.main-container {
border: 1px solid;
height: auto;
min-height: 50%; /* important */
display:table;
width:100%;
}
.child-container {
display: inline-table;
height: 100%;
width: 100%;
}
.content {
display: table-cell;
text-align: center;
vertical-align: middle;
}
DEMO
I have updated the css:
html, body {
height: 100%;
}
.main-container {
display:table;
border: 1px solid;
height: auto;
min-height: 50%; /* important */
width:100%;
}
.child-container {
display: table-row;
height: 100%;
width: 100%;
}
.content {
display: table-cell;
text-align: center;
vertical-align: middle;
}
Please see the updated JSFIDDLE
Fiddle Link : http://jsfiddle.net/theharsh/k7uwnnfb/
You should try the CSS3 technique if IE8 or below is not the issue there.
Element can be set vertically centered without the concern of Height.
HTML :
<div class="box">
<div class="vcenter">
Yo! This is Centered !
</div>
</div>
CSS :
.box{
height:200px;
background:tomato;
color:#fff;
width:200px;
}
.vcenter{
position: relative;
top:50%;
background:purple;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
}