I think flex is a good solution to develop a responsive video player control bar. The example is the control bar of the amazon player.
On the left and right I want squared buttons. The progress bar gets the rest of the space.
I thought about setting padding-top equal to height but it is not working.
What is wrong?
<html lang="en" class="no-js">
<head>
<meta charset="UTF-8"/>
<meta http-equiv="Content-Type" content="image/svg+xml"/>
<meta http-equiv="X-UA-Compartible" content="IE=edge,chrome=1"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Video Player flex</title>
<style>
html {
margin: 0px;
padding: 0px;
border: 0px;
}
body {
margin: 0px;
padding: 0px;
border: 0px;
}
.pic {
position: relative;
width: 100%;
height: 100%;
}
.pic img {
object-fit: contain;
}
.control-bar {
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
display: -ms-flexbox; /* TWEENER - IE 10 */
display: -webkit-flex; /* NEW - Chrome */
display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 10%;
}
.pause_btn {
flex-grow:1;
background-color: DD88EE;
background-image: url(media/pause-icon-white-48.svg);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
min-height: 40px;
min-width: 40px;
}
.time {
flex-grow:1;
background-color: #CB8C1D;
min-height: 40px;
min-width: 40px;
}
.fullscreen_btn {
flex-grow:1;
background-color: #4C3327;
background-image: url(media/fullscreen-icon-off-white-48_160.svg);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
.sound_btn {
flex-grow:1;
background-color: #BD3632;
background-image: url(media/speaker_loud_white_48.svg);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
.progress {
flex-basis:50%;
flex-grow:1;
background-color: #4C3327;
min-height: 40px;
min-width: 40px;
}
#media (min-width: 769px) {
.duration{
flex-grow:1;
background-color: #CB8CEE;
min-height: 40px;
min-width: 40px;
}
}
</style>
</head>
<body style="background-color:black; text-align: center;">
<div class="pic">
<img src="media/vorschaubild.png" alt="Smiley face" height="100%" width="100%">
</div>
<div class="">
<div class="control-bar-wrapper">
<div class="control-bar">
<div class="pause_btn">pause</div>
<div class="time">time</div>
<div class="duration"></div>
<div class="progress">progress</div>
<div class="sound_btn">sound</div>
<div class="fullscreen_btn">full</div>
</div>
</div>
</div>
</body>
If you wish to have the height and width of the bottom as a ratio of the page width, you have to use a wrapper for the buttons:
.square {
width: 10%; // Width = 10% of page with
}
.square div {
padding-bottom: 100%; // So height = 10% of page width
line-height: 0px; // Avoid additional height
}
And the button elements wrapped like this:
<div class="square">
<div class="pause_btn"></div>
</div>
Also, the padding-bottom technique implies that the elements don't contain any non-absolute elements (which otherwise add to the height of the element, breaking its squareness)
That's why I removed captions and set line-height to 0
Here is the result: https://jsfiddle.net/jsfmb9at/3/
Edit: I removed flex-grow: 1 from these non-expanding elements, and added a max-width to the .square css, otherwise the control bar is too big on horizontal players, which is weird...
Other solutions :
For buttons which width is a ratio of page height, the easiest way would be to just set control-bar height as a percentage of height, and square <img> elements as buttons (I see you use images, as background) and setting their wrapper as 'display: inline-block'
To get rid of images or image requests, you can even use <img> elements with transparent images data provided inline with a data: URI with the required ratio (1:1 for square)
Related
I wish to have a div section that fills its div parent as much as possible while maintaining a ratio.
the render result would be like this :
What I do have so far :
html,
body {
height: 100%;
}
.parent {
/* Parent's height and width are unknown,
it could be dynamic, e.g. parent is part of a flex layout. */
height: 80%;
width: 90%;
border-style: solid;
border-width: 2px;
border-color: black;
}
.child {
width: 90vw;
/* 90% of viewport vidth */
height: 50.625vw;
/* ratio = 9/16 * 90 = 50.625 */
max-height: 90vh;
max-width: 160vh;
/* 16/9 * 90 = 160 */
margin: auto;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: #A0522D;
}
<div class="parent">
<div class="child">
content that is not images...
</div>
</div>
This css behaves like the way I want BUT this is using the viewport instead of the parent div which is a problem in real conditions.
I am looking for a way to fill based on the parent div.
Using aspect-ratio: 16 / 9; overflow: hidden; (aspect-ratio MDN docs) should give you the exact result you're looking for without needing to use the padding trick. Make sure the parent is set to display: grid or else it may not scale properly.
The aspect-ratio CSS property is supported by all major browsers (caniuse.com) except Safari, though Safari plans to add support this year. This is the best/correct way to achieve this effect, without having to resort to JavaScript or any hack solutions.
Related questions and answers here on Stack Overflow:
https://stackoverflow.com/a/66786774/3824249 (very similar to my solution)
https://stackoverflow.com/a/20593342/3824249 (another CSS-only alternative, though hackier using position: absolute for element positioning)
Here is my solution in action:
html, body { height: 100%; }
.parent {
display: grid;
resize: both;
height: 50%;
width: 90%;
border: 2px solid #000;
overflow: hidden;
}
.child {
width: 100%;
max-height: 100%;
margin: auto;
aspect-ratio: 16 / 9;
overflow: hidden;
box-sizing: border-box;
position: relative;
background: #a0522d;
text-align: center;
font-size: 20px;
color: white;
/* using the below to center the text, optional */
display: flex;
align-items: center;
justify-content: center;
}
<div style="padding: 5px 10px; margin-bottom: 10px; background: #f00; color: #fff; text-align: center; z-index: 1;">Resize the block below using the resize controls to see this in action.</div>
<div class="parent">
<div class="child">content that is not images...</div>
</div>
maybe add position absolute and it works, by setting top, right ,bottom,left to 0 with margin auto. you could as well use flex to center it or absolute with left 50% and transform -50% too.
body {
padding: 0;
margin: 0;
height: 100vh;
width: 100vh;
}
.child {
width: 90vw;
/* 90% of viewport vidth */
height: 50.625vw;
max-height: 90vh;
max-width: 160vh;
/* Adding this maybe min-width and min-height */
min-height: 90vh;
min-width: 160vh;
/* 16/9 * 90 = 160 */
background: #f7f7f7;
box-shadow: 0px 5px 30px 0px rgba(0, 0, 0, 0.18);
border-radius: 4px;
margin: auto;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Parent Child</title>
</head>
<body> <!-- parent -->
<div class="child"></div>
</body>
</html>
Use flexbox and padding. Use media queries to determine if the min-aspect-ratio of the viewport. Then adjust accordingly.
html,
body {
height: 100%;
}
.parent {
height: 100%;
width: 100%;
border-style: solid;
border-width: 2px;
border-color: black;
/* to center */
display: flex;
align-items: center;
justify-content: center;
}
.child {
width: 100vw;
/* 16:9 aspect ratio = 9 / 16 = 0.5625 = padding-bottom*/
padding-bottom: 56.25%;
background: #A0522D;
}
#media (min-aspect-ratio: 16/9) {
.child {
height: 100vh;
/*16:9 aspect ratio = 9 / 16 = 177.77 = width*/
width: 177.77vh;
padding: 0;
margin: 0px;
background: red;
}
}
<div class="parent">
<!-- the viewbox will provide the desired aspect ratio -->
<div class="child">
content that is not images...
</div>
</div>
Here's a fiddle.
So as to make child's dimensions dependent on parent container set position:relative of the parent container.
Normally when we make an element position:absolute it is positioned relative to initial containing block(i.e the <body>) unless any other closest parent container is given a position other than static(which is by default).So, by giving relative position to parent container we positioned .child element relative to .parent which was earlier positioned relative to the document or body.
This will work for you
html,
body {
height: 100%;
}
.parent {
/* Parent's height and width are unknown,
it could be dynamic, e.g. parent is part of a flex layout. */
position:relative;
height: 80%;
width: 90%;
border-style: solid;
border-width: 2px;
border-color: black;
}
.child {
width: 90%;
/* 90% of viewport vidth */
height: 50.625%;
/* ratio = 9/16 * 90 = 50.625 */
max-height: 90%;
max-width: 160%;
/* 16/9 * 90 = 160 */
margin: auto;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: #A0522D;
}
<div class="parent">
<div class="child">
content that is not images...
</div>
</div>
I wish to have a div section that fills its div parent as much as possible while maintaining a ratio.
the render result would be like this :
What I do have so far :
html,
body {
height: 100%;
}
.parent {
/* Parent's height and width are unknown,
it could be dynamic, e.g. parent is part of a flex layout. */
height: 80%;
width: 90%;
border-style: solid;
border-width: 2px;
border-color: black;
}
.child {
width: 90vw;
/* 90% of viewport vidth */
height: 50.625vw;
/* ratio = 9/16 * 90 = 50.625 */
max-height: 90vh;
max-width: 160vh;
/* 16/9 * 90 = 160 */
margin: auto;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: #A0522D;
}
<div class="parent">
<div class="child">
content that is not images...
</div>
</div>
This css behaves like the way I want BUT this is using the viewport instead of the parent div which is a problem in real conditions.
I am looking for a way to fill based on the parent div.
Using aspect-ratio: 16 / 9; overflow: hidden; (aspect-ratio MDN docs) should give you the exact result you're looking for without needing to use the padding trick. Make sure the parent is set to display: grid or else it may not scale properly.
The aspect-ratio CSS property is supported by all major browsers (caniuse.com) except Safari, though Safari plans to add support this year. This is the best/correct way to achieve this effect, without having to resort to JavaScript or any hack solutions.
Related questions and answers here on Stack Overflow:
https://stackoverflow.com/a/66786774/3824249 (very similar to my solution)
https://stackoverflow.com/a/20593342/3824249 (another CSS-only alternative, though hackier using position: absolute for element positioning)
Here is my solution in action:
html, body { height: 100%; }
.parent {
display: grid;
resize: both;
height: 50%;
width: 90%;
border: 2px solid #000;
overflow: hidden;
}
.child {
width: 100%;
max-height: 100%;
margin: auto;
aspect-ratio: 16 / 9;
overflow: hidden;
box-sizing: border-box;
position: relative;
background: #a0522d;
text-align: center;
font-size: 20px;
color: white;
/* using the below to center the text, optional */
display: flex;
align-items: center;
justify-content: center;
}
<div style="padding: 5px 10px; margin-bottom: 10px; background: #f00; color: #fff; text-align: center; z-index: 1;">Resize the block below using the resize controls to see this in action.</div>
<div class="parent">
<div class="child">content that is not images...</div>
</div>
maybe add position absolute and it works, by setting top, right ,bottom,left to 0 with margin auto. you could as well use flex to center it or absolute with left 50% and transform -50% too.
body {
padding: 0;
margin: 0;
height: 100vh;
width: 100vh;
}
.child {
width: 90vw;
/* 90% of viewport vidth */
height: 50.625vw;
max-height: 90vh;
max-width: 160vh;
/* Adding this maybe min-width and min-height */
min-height: 90vh;
min-width: 160vh;
/* 16/9 * 90 = 160 */
background: #f7f7f7;
box-shadow: 0px 5px 30px 0px rgba(0, 0, 0, 0.18);
border-radius: 4px;
margin: auto;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Parent Child</title>
</head>
<body> <!-- parent -->
<div class="child"></div>
</body>
</html>
Use flexbox and padding. Use media queries to determine if the min-aspect-ratio of the viewport. Then adjust accordingly.
html,
body {
height: 100%;
}
.parent {
height: 100%;
width: 100%;
border-style: solid;
border-width: 2px;
border-color: black;
/* to center */
display: flex;
align-items: center;
justify-content: center;
}
.child {
width: 100vw;
/* 16:9 aspect ratio = 9 / 16 = 0.5625 = padding-bottom*/
padding-bottom: 56.25%;
background: #A0522D;
}
#media (min-aspect-ratio: 16/9) {
.child {
height: 100vh;
/*16:9 aspect ratio = 9 / 16 = 177.77 = width*/
width: 177.77vh;
padding: 0;
margin: 0px;
background: red;
}
}
<div class="parent">
<!-- the viewbox will provide the desired aspect ratio -->
<div class="child">
content that is not images...
</div>
</div>
Here's a fiddle.
So as to make child's dimensions dependent on parent container set position:relative of the parent container.
Normally when we make an element position:absolute it is positioned relative to initial containing block(i.e the <body>) unless any other closest parent container is given a position other than static(which is by default).So, by giving relative position to parent container we positioned .child element relative to .parent which was earlier positioned relative to the document or body.
This will work for you
html,
body {
height: 100%;
}
.parent {
/* Parent's height and width are unknown,
it could be dynamic, e.g. parent is part of a flex layout. */
position:relative;
height: 80%;
width: 90%;
border-style: solid;
border-width: 2px;
border-color: black;
}
.child {
width: 90%;
/* 90% of viewport vidth */
height: 50.625%;
/* ratio = 9/16 * 90 = 50.625 */
max-height: 90%;
max-width: 160%;
/* 16/9 * 90 = 160 */
margin: auto;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: #A0522D;
}
<div class="parent">
<div class="child">
content that is not images...
</div>
</div>
I am very new to web design, so I might be completely over my head here.. but I can not seem to figure out how to work this. I have an image inside my first div, underneath this I want to have to more divs with the background colors in which I will add content. But for some reason my divs are not adjusting with the browser. Everytime I adjust the browser to be smaller, the divs backgrounds are separating and a white space is coming in between them.
Any help would be highly appreciated.. Also any critical feedback on my obvious coding skills, would be highly appreciated.
<!DOCTYPE html>
<html>
<head> <link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<div class="container">
<div class= "header">
<div class="large-logo-wrap">
<img src="Assets/Giadaslogoindexwhitebig.png" draggable="false"></img>
</div>
<div class="middle">
</div>
<div class="end">
</div>
</body>
</html>
CSS
body{
margin: 0px;
padding: 0px;
overflow: hidden;
}
.container{
width:100%;
margin: 0px;
padding: 0px;
}
.header{
width:100%;
height:768px;
background-image: url('Assets/header.jpg');
background-size: 100%;
background-repeat: no-repeat;
margin: 0px;
padding: 0px;
}
.large-logo-wrap {
margin-left: auto;
margin-right: auto;
width: 100%;
height: 100%;
max-width: 700px;
}
.middle{
position: absolute;
top: 768px;
background-color: rgb(229,225,209);
width: 100%;
height:100%;
background-size: 100%;
overflow-y: auto;
}
.end{
position: absolute;
top: 1500px;
background-color: rgb(29,25,29);
width: 100%;
height:768px;
background-size: 100%;
}
be nice. Cheers!
I suggest you take a closer look at the code and strip out as much as you can to see what is actually necessary to get where you are going. Here is a fiddle with some cleaned up code that does what I think you are going for. Hopefully it helps.
HTML
<header class="container global-header">
<div class="inner-w">
<div class="large-logo-wrap">
<img src="http://placehold.it/400x300" />
</div>
</div>
</header>
<section class="container section01">
<div class="inner-w">
Middle - arbitrary set height - I suggest you let the content decide the height
</div>
</section>
<section class="container section02">
<div class="inner-w">
Other section - arbitrary set height
</div>
</section>
CSS
*, *:before, *:after { /* get your box model so that padding and margins go inside the box instead of outside, and add to the overall size of the box */
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body {
margin: 0;
}
.container { /* things the sections have in common */
width: 100%;
float: left;
}
.inner-w {
max-width: 700px;
margin-right: auto;
margin-left: auto;
padding: 1em;
border: 1px solid rgba(0,0,0,.05); /* just so you can see */
/* by using an inner div in your container... you allow yourself to maintain a background-color across the whole page if you wish. If you don't want that, then you just style the inner div for each section with the background color */
}
.global-header {
background-color: lightblue;
text-align: center; /* centers inline, and inline-block elements (logo) */
}
.large-logo-wrap {
display: inline-block;
max-width: 8em; /* set max image size */
}
.large-logo-wrap img { /* responsive image */
display: block;
width: 100%; /* fits whatever you set the wrapper to */
height: auto;
}
.section01 { /* arbitray section */
background-color: rgb(229,225,209);
color: rgb(0,0,0);
min-height: 234px; /* if you absolutly must - choose a height... use min */
}
.section02 { /* arbitray section */
background-color: rgb(29,25,29);
color: rgb(229,225,209);
min-height: 346px; /* if you absolutly must - choose a height... use min */
}
Please change your css with this one:
body{
margin: 0px;
padding: 0px;
overflow: hidden;
}
.container{
width:100%;
margin: 0px;
padding: 0px;
}
.header{
width:100%;
height:768px;
background-image: url('Assets/header.jpg');
background-repeat: no-repeat;
margin: 0px;
padding: 0px;
}
.large-logo-wrap {
margin-left: auto;
margin-right: auto;
max-width: 700px;
}
.middle{
margin-left: auto;
margin-right: auto;
max-width: 700px;
background-color: rgb(229,225,209);
}
.end{
margin-left: auto;
margin-right: auto;
max-width: 700px;
background-color: rgb(29,25,29);
}
Some of your css styles were wrong, for example you used width and height with %100 which is wrong and effects on all of your css styles.
Also, you used position:absolute for all of div which effects on div to be nonadjustable.
I'm trying to make some decoration outside the main content div,
that would be getting hidden if the window size is small.
I thought for a while and came up with the following markup, (you can copy paste and see it),
and that's best I could think of right now. The problem however is that because I used percentage margins, the decoration gets unstable and shaky while resizing, and sometimes is even stepping on the content div.
Here's the code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style>
body {
padding: 0px;
margin: 0px;
width: 100%;
height: 100%;
background-color: yellow;
}
div.content {
display: block;
width: 958px;
height: 400px;
background-color: #CCC;
margin: 0px auto;
}
div.wrap {
margin: 0px auto;
min-width: 958px;
max-width: 1058px;
overflow: hidden;
position: relative;
background-image: url(http://www.ephotobay.com/image/ooo-ml.png);
background-position: center;
}
div.left, div.right {
background-image: url(http://www.laserpros.com/images/site/HP_Circle_Logo_Vector1_small.jpg);
width: 50px;
display: block;
height: 50px;
bottom: 0px;
position: absolute;
}
div.left {
right: 479px;
margin-right: 50%;
}
div.right {
left: 479px;
margin-left: 50%;
}
</style>
</head>
<body>
<div class="wrap">
<div class="left"></div>
<div class="right"></div>
<div class="content">
<-- Content
</div>
</div>
</body>
</html>
So, could you recommend guys for some other way around without using percentage margins, to make it more flexible..? Thanks!
EDIT:
This is what happens in Google Chrome on resize:
As the browser has to re-calculate the margins based on the parent's width changes, this is kind of expected behaviour.
If you want to keep content centralized on the screen without playing with max-width, min-width and margins as percentage, and there won't be any element that should be affected by the .wrap position in the document flow, you could do something like this:
div.wrap {
width: 1058px;
overflow: hidden;
position: absolute;
left: 50%;
top: 0;
margin-left: -529px; /* 1058/2 * -1 */
background-image: url(http://www.ephotobay.com/image/ooo-ml.png);
background-position: center;
}
This will centralize the content horizontally in every situation.
Hope it helps.
Clear your floats:
<div>
<div class="left"></div>
<div class="right"></div>
<div class="clear"></div>
</div>
<style>
.clear{clear:both;}
</style>
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';
});
}