I use display: table to center the image, but It seems not work? why?
Any answer I will be appriciatelly. Thank you very much ！I can not find my mistake, could you help me?
.wrapper4 {
width: 300px;
height: 300px;
border: 1px solid green;
margin-left: auto;
margin-right: auto;
display: table;
margin-bottom: 60px;
text-align: center;
}
.wrapper4 img {
width: 100px;
height: 100px;
display: table-cell;
vertical-align: middle;
}
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="垂直居中demo" />
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div class="wrapper4">
<img src="http://listenwallstreet.com/wp-content/uploads/2016/03/xiaogou.jpg" alt="小狗">
</div>
</body>
</html>
To vertically center this 100px image in this 300px div, you can add a 100px top margin to the image (because 300-100 = 200; 200/2 = 100), and set its horizontal margin to auto. No need for display: table etc.
.wrapper4 img {
width: 100px;
height: 100px;
margin: 100px auto;
}
However, that is not very reusable. Will your images always be 100px? Will they always be square?
If not, you have to account for centering landscape & portrait images of different sizes.
The easiest way to do this, with modern web browsers (anything newer than IE9 from about 2013) is to use Flexbox, as explained in this answer by tombul.
You could apply the flex rules directly to your div element, but again this is not very reusable. Another option is to create a CSS class for an element that centers its contents in a flex container. This CSS class is then applied in the HTML. The wrapper class now just handles the dimensions and appearance of the wrapper; the wrapper img class just handles the dimensions and appearance of the image. The alignment of the image is controlled by the centerFlex class. If you wanted multiple images with left, centered, or right-justification, you could create & apply similar rules to accomplish that.
FYI, you can include all margins with the shorthand syntax margin: top right bottom left, or in pairs margin: top&bottom left&right
.wrapper4 {
width: 300px;
height: 300px;
border: 1px solid green;
margin: 0px auto;
}
.centerFlex {
align-items: center;
display: flex;
justify-content: center;
}
.wrapper4 img {
width: 100px;
height: 100px;
}
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="垂直居中demo" />
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div class="wrapper4 centerFlex">
<img src="http://listenwallstreet.com/wp-content/uploads/2016/03/xiaogou.jpg" alt="小狗">
</div>
</body>
</html>
Try this :
.wrapper4 {
width: 300px;
height: 300px;
border: 1px solid green;
margin-left: auto;
margin-right: auto;
display: flex;
margin-bottom: 60px;
align-items: center;
}
.wrapper4 img {
width: 100px;
height: 100px;
margin: 0 auto;
}
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="垂直居中demo" />
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div class="wrapper4">
<img src="http://listenwallstreet.com/wp-content/uploads/2016/03/xiaogou.jpg" alt="小狗">
</div>
</body>
</html>
The table-cell alignment rules need to be declared on the containing element of the nested element you need to align.
div class="wrapper4"> <!-- containing element (should be table-cell) --->
<!-- element to align -->
<img src="http://listenwallstreet.com/wp-content/uploads/2016/03/xiaogou.jpg" alt="小狗">
</div>
Code Snippet Demonstration:
An additional containing element has been inserted to wrap the nested img tag - we'll use this contiaining element to declare the table-cell rules to
.wrapper4 {
width: 300px;
height: 300px;
border: 1px solid green;
margin-left: auto;
margin-right: auto;
display: table;
margin-bottom: 60px;
}
.wrapper4 .wrapper-cell {
text-align: center;
display: table-cell;
vertical-align: middle;
}
.wrapper4 img {
width: 100px;
height: 100px;
}
<div class="wrapper4">
<div class="wrapper-cell">
<img src="http://listenwallstreet.com/wp-content/uploads/2016/03/xiaogou.jpg" alt="小狗">
</div>
</div>
Alternatives
Flex-Box
.wrapper4 {
width: 300px;
height: 300px;
border: 1px solid green;
margin-left: auto;
margin-right: auto;
display: flex; /* Adjusted */
margin-bottom: 60px;
/* Additional */
justify-content: center;
align-items: center;
}
.wrapper4 img {
width: 100px;
height: 100px;
}
<div class="wrapper4">
<img src="http://listenwallstreet.com/wp-content/uploads/2016/03/xiaogou.jpg" alt="小狗">
</div>
Absolute Positioning
.wrapper4 {
width: 300px;
height: 300px;
border: 1px solid green;
margin-left: auto;
margin-right: auto;
display: block; /* Adjusted */
margin-bottom: 60px;
/* Additional */
position: relative;
}
.wrapper4 img {
width: 100px;
height: 100px;
/* Additional */
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
<div class="wrapper4">
<img src="http://listenwallstreet.com/wp-content/uploads/2016/03/xiaogou.jpg" alt="小狗">
</div>
Relative Positioning
.wrapper4 {
width: 300px;
height: 300px;
border: 1px solid green;
margin-left: auto;
margin-right: auto;
display: block; /* Adjusted */
margin-bottom: 60px;
}
.wrapper4 img {
width: 100px;
height: 100px;
/* Additional */
display: block;
margin: auto;
position: relative;
top: 50%;
transform: translateY(-50%);
}
<div class="wrapper4">
<img src="http://listenwallstreet.com/wp-content/uploads/2016/03/xiaogou.jpg" alt="小狗">
</div>
CodePen Demonstrations
Horizontal Alignment (Arbitrary Elements)
Vertical Alignment (Arbitrary Elements)
Related
I have code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style>
html, body {
height: 100%;
}
.container {
min-height: 200px;
max-height: 500px;
display: -ms-flexbox;
display: flex;
-ms-flex-pack: justify;
justify-content: space-between;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
box-sizing: border-box;
max-width: 1440px;
margin: auto;
height: 100%;
}
header, footer {
height: 150px;
background: #ccc;
}
footer {
position: absolute;
width: 100%;
height: 50px;
bottom: 0;
}
</style>
</head>
<body>
<header></header>
<div class="container">
content blah blah blah
</div>
<footer>
fsdfsdfsdfsdfsdffdsadsfasd
</footer>
</body>
</html>
How I Can vertically align center this container, considering header height and footer (position: absolute and height). I think, what this we can do with display: flex, are how?
I use Bootstrap 3 grid
Example jsbin: http://jsbin.com/timatozuco/edit?html,output
Here try.. Just configure updated code based on your adjustment..
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style>
html, body {
height: 100%;
}
.container {
display: -ms-flexbox;
display: flex;
top: 10%;
left: 50%;
position: absolute;
box-sizing: border-box;
}
header, footer {
height: 150px;
background: #ccc;
}
footer {
position: absolute;
width: 100%;
height: 50px;
bottom: 0;
}
</style>
</head>
<body>
<header></header>
<div class="container">
content blah blah blah
</div>
<footer>
fsdfsdfsdfsdfsdffdsadsfasd
</footer>
</body>
</html>
If I understand your question correctly, then I guess you want to make the whole container in the center of the page on the basis of header and footer size.
So below code is the solution
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style>
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
body {
font-family: arial, sans-serif;
font-size: 14px;
color: #000;
line-height: 22px;
text-decoration: none;
}
.wrapper {
width: 100%;
background: #fff;
margin: -128px auto 0;
height: 100%;
text-align: left;
clear: both;
display: table;
position: relative;
z-index: 1;
}
header {
width: 100%;
margin: auto;
background: #ccc;
height: 66px;
position: relative;
z-index: 2;
border-bottom: 20px solid #fff;
}
footer {
background: #ccc;
width: 100%;
margin: auto;
height: 22px;
clear: both;
border-top: 20px solid #fff;
position: relative;
z-index: 2;
}
.container {
vertical-align: middle;
display: table-cell;
padding: 128px 0 0;
}
.container .content {
text-align: center;
background: yellow;
padding: 0 10px;
width: 300px;
height: 200px;
margin: 0 auto;
}
</style>
</head>
<body>
<header>
Header content
</header>
<div class="wrapper">
<div class="container">
<div class="content">
Container content
</div>
</div>
</div>
<footer>
Footer content
</footer>
</body>
</html>
or you can also visit this link : Codepen - centered container based on header & footer
I'm currently creating a single page video playing for store advertisement.
My problem is how can i set the video tag to full height relative to its parent div? I used vh dimension but still no luck to solve that.
As you can see on the image the video portion has gaps on both its top and bottom. already set the padding and margin to 0.
Code:
<!DOCTYPE html>
<!-- http://www.101computing.net/html-website-layout/ -->
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<style>
BODY {
background-color: #FFF;
overflow: hidden;
width: 100%;
margin: 0px;
}
.page {
display: block;
width: 100%;
min-height: 800px;
overflow: auto;
margin: 0px auto 0px auto;
box-sizing: border-box;
}
.pageClockPanel {
background-color: #333;
position: fixed;
top: 0px;
left: 0px;
clear: none;
width: 60%;
height: 10%;
padding: 10px;
}
.pageRightPanel {
background-color: #1A237E;
position: fixed;
top: 0px;
right: 0px;
clear: none;
width: 40%;
height: 87%;
box-sizing: border-box;
padding: 10px;
}
.pageLeftPanel {
background-color: #E64A19;
position: fixed;
top: 10%;
left: 0px;
clear: none;
width: 60%;
height: 77%;
box-sizing: border-box;
padding: 0px;
}
.pageBottomPanel {
background-color: #333;
position: fixed;
bottom: 0px;
right: 0px;
clear: none;
height: 13%;
width: 100%;
box-sizing: border-box;
padding: 10px;
}
.item img {
width: 100%;
min-height: 77vh
}
.item video,
source {
width: 100%;
min-height: 77vh;
}
</style>
<title>Page Title</title>
<!-- https://www.bootply.com/59900 -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="page">
<div class="pageClockPanel">
</div>
<div class="pageRightPanel">
</div>
<div class="pageLeftPanel">
<div class="row">
<div class="col-md-12">
<div class="item">
<video video autobuffer autoplay>
<source src=http://techslides.com/demos/sample-videos/small.webm type=video/webm>
</video>
</div>
</div>
</div>
</div>
<div class="pageBottomPanel">
</div>
</div>
</body>
</html>
I solved my problem by adding this css
.item{
position:absolute;
height:100%;
width:100%;
overflow: hidden;
}
.item video {
min-width: 100%;
min-height: 100%;
height:auto;
}
css explanation here
The video tag get always the same ratios (width/height) as the video file.
It would looks like stretched if you want to fit the width and the height - if this is just possible.You can try to set the height attribute of the video tag
I have a very not typical site where content is aligned by the middle of screen I mean vertically and horizontally, for getting this result used vertical-align: middle; for each item and for the main container
text-align: center; height: calc(100% - header - footer ))
but when the user is changing size
for the window the footer is also change his position but should not do it
Js fiddle
https://jsfiddle.net/hm97o1sa/
is there any way to fix it without "flex" ?
updated:
expected behavior
scrolled to the top
scrolled to the bottom
A possible solution would be to use calc together with Viewport units vh.
With calc(), you can perform calculations to determine CSS property values.
With Viewport units, you can get work with Viewport size, for example in this case 100% of the Viewport height (vh).
html,
body {
margin: 0;
padding: 0;
height: 100%;
}
#header {
height: 100px;
background: blue;
}
#content {
height: calc(100vh - 150px);
min-height: 250px;
text-align: center;
}
#vert-align {
display: inline-block;
height: 100%;
vertical-align: middle;
}
#item_1 {
background: yellow;
height: 250px;
width: 250px;
display: inline-block;
vertical-align: middle;
margin-right: 50px;
}
#item_2 {
background: red;
height: 250px;
width: 250px;
display: inline-block;
vertical-align: middle;
}
#footer {
height: 50px;
background: green;
}
<div id="header">HEADER</div>
<div id="content">
<div id="vert-align"></div>
<div id="item_1"></div>
<div id="item_2"></div>
</div>
<div id="footer">FOOTER</div>
Modify your CSS and your Final code will be:
html, body {
margin: 0;
padding: 0;
height: 100%;
}
#header {
height: 100px;
background: blue;
}
#content {
height: calc(100% - 150px);
text-align: center;
overflow-y: auto;
}
#vert-align {
display: inline-block;
height: 100%;
vertical-align: middle;
}
#item_1 {
background: yellow;
height: 250px;
width: 250px;
display: inline-block;
vertical-align: middle;
margin-right: 50px;
}
#item_2 {
background: red;
height: 250px;
width: 250px;
display: inline-block;
vertical-align: middle;
}
#footer {
height: 50px;
background: green;
}
<!DOCTYPE html>
<html>
<head>
<title>TA</title>
</head>
<body>
<div id="header">HEADER</div>
<div id="content">
<div id="vert-align"></div>
<div id="item_1"></div>
<div id="item_2"></div>
</div>
<div id="footer">FOOTER</div>
</body>
</html>
A quick fix is to apply a min-height: 250px on your #content
#content {
height: calc(100% - 150px);
min-height: 250px;
text-align: center;
}
I need your help,
How can the existing code below be modified such that the height of my css boxes are then liquified (as it needs to be this way to adjust to the height of my users screen resolution)?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
* { margin:0; padding: 0 }
#container {
width: 100%;
margin: 0 auto;
}
#primary {
float: left;
width: 10%;
background: red;
height: 600px;
}
#content {
float: left;
width: 80%;
background: blue;
height: 600px;
}
#secondary {
float: left;
width: 10%;
background: green;
height: 600px;
}
</style>
</head>
<body>
<div id="container">
<div id="primary">
<p>left</p>
</div>
<div id="content">
<p>center</p>
</div>
<div id="secondary">
<p>right</p>
</div>
</div>
</body>
</html>
Equal height columns can easily be achieved by using the table* display properties.
http://cssdeck.com/labs/2iy6anjy
#container {
display: table;
width: 100%;
margin: 0 auto;
}
#primary {
display: table-cell;
width: 10%;
background: red;
}
#content {
display: table-cell;
width: 80%;
background: blue;
}
#secondary {
display: table-cell;
width: 10%;
background: green;
}
Have a look at the jQuery Equal Heights plugin by Filament:
https://github.com/filamentgroup/jQuery-Equal-Heights
Initialise it:
$('#container div').equalHeights();
remove fixed height and give overflow:hidden
I've been trying various techniques to implement Ryan Fait's Sticky Footer technique and none seem to work. My footer content always overlaps my main content when the browser is vertically challenged. It could be because I have many fixed positioned DIVs nested within the footer. When I wrap these DIVs around a parent DIV (#footer), this parent DIV doesn't seem to even appear, nor can I apply styles to it to control its position (and the content within).
HTML:
<body>
<div class="wrapper">
<div id="content"> Juicy stuff goes here</div>
<div class="push"></div>
<div class="footer">
<div id="print_blank"></div>
<div id="logo"></div>
<div id="nav_bar"></div>
<div id="footerarea">Contains other Text</div>
</div><!-- Footer Area -->
</body>
CSS:
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -240px;
}
.footer, .push {
height: 240px;
}
#print_blank {
padding-top: 0px;
bottom: 160px;
position: fixed;
z-index: 11000;
width: 100% !important;
text-align: center;
min-width: 980px;
}
#logo {
width: 180px;
padding-top: 5px;
bottom: 86px;
position: fixed;
z-index: 9999999;
left: 45px;
}
#nav_bar {
padding-top: 0px;
bottom: 77px;
position: fixed;
z-index: 99999;
width: 100% !important;
text-align: center;
min-width: 980px;
}
#footerarea {
bottom: 0px;
position: fixed;
width: 100%;
padding-top: 20px;
background-color: #F16924;
height: auto;
text-align: justify;
min-width: 960px;
z-index: 999999;
}
Thanks!
This is a better way to do it:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style media="all">
html, body {height: 100%; margin: 0; padding: 0;}
* html #outer {/* ie6 and under only*/
height:100%;
}
.wrapper {
min-height: 100%;
margin: -240px auto 0;
}
.content {padding-top: 240px;}
.footer {
height: 240px; background: #F16924;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="content">Juicy stuff goes here</div>
<div class="push"></div>
<!-- end wrapper --></div>
<div class="footer"></div>
</body>
</html>
The limitation of sticky footers is that the footer must stay at a fixed height. But the elements you have in there shouldn't affect the layout as long as you are careful.
EDIT: Here's a revised template with the footer elements included:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style media="all">
html, body {height: 100%; margin: 0; padding: 0;}
* html #outer {/* ie6 and under only*/
height:100%;
}
.wrapper {
min-height: 100%;
margin: -240px auto 0;
}
.content {padding-top: 240px;}
.footer {
height: 240px; background: #F16924; position: relative;
}
#print_blank {
padding-top: 0px;
bottom: 160px;
position: absolute;;
z-index: 11000;
width: 100% !important;
text-align: center;
min-width: 980px;
}
#logo {
width: 180px;
padding-top: 5px;
bottom: 86px;
position: absolute;;
z-index: 9999999;
left: 45px;
}
#nav_bar {
padding-top: 0px;
bottom: 77px;
position: absolute;;
z-index: 99999;
width: 100% !important;
text-align: center;
min-width: 980px;
}
#footerarea {
bottom: 0px;
position: absolute;
width: 100%;
padding-top: 20px;
background-color: #F16924;
height: auto;
text-align: justify;
min-width: 960px;
z-index: 999999;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="content">Juicy stuff goes here</div>
<div class="push"></div>
<!-- end wrapper --></div>
<div class="footer">
<div id="print_blank"></div>
<div id="logo"></div>
<div id="nav_bar"></div>
<div id="footerarea">Contains other Text</div>
</div>
</body>
</html>