Assume that I have a div having the following styles:
#container {
position: fixed;
width: 100%;
height: 100%;
}
Also I have an image of unknown size (the size may vary), which I want to align both vertically and horizontally.
What is the best way of doing that?
The background image method will work, with background-position:center center, unfortunately you'll lose control of scaling your image.
You can set your image as follows:
position:absolute;
margin:auto;
top:0;
bottom:0;
left:0;
right:0;
PS. Keep in mind that this will be centered relative to its closest positioned parent.
Add the following:
The first two lines center it vertically, the last horizontally.
display: table-cell;
vertical-align: middle ;
text-align: center;
more info can be found here: http://www.w3.org/Style/Examples/007/center
The easiest cross-browser way would be to set your dynamic image as a background property on the #container:
<div id="container" style="background: url(path/to/image.png) no-repeat 50% 50%"></div>
This will center vertically and horizontally.
#container {
text-align: center;
vertical-align: middle;
display: table-cell;
}
http://jsfiddle.net/nfBDT/
i believe the easiest way is to do this:
.container img {
display:block;
margin:auto;
}
adjust .container to suit your div (not sure if yours was a class or ID)
oh I didn't read all of your question.
this appears to work:
<style type="text/css">
.wraptocenter {
display: table-cell;
text-align: center;
vertical-align: middle;
width: ...;
height: ...;
}
.wraptocenter * {
vertical-align: middle;
}
/*\*//*/
.wraptocenter {
display: block;
}
.wraptocenter span {
display: inline-block;
height: 100%;
width: 1px;
}
/**/
</style>
<!--[if lt IE 8]><style>
.wraptocenter span {
display: inline-block;
height: 100%;
}
</style><![endif]-->
full credit: http://www.brunildo.org/test/img_center.html
http://zoffix.com/new/absolute-center-random-width-height.html
This is a pretty decent example. Usually you use table/vertical-align for modern browsers and positioning+%s for IE.
Related
I have a jsfiddle here - http://jsfiddle.net/j4zvyz7h/1/
I need a overlay the full width and height of the page and text to be dead center.
I can do this with display: table; but I need height: 100%; on the html and body.
This is causing problems in the actual code.
Is it possible to have the 100% overlay with centered text without display: table;
I have an example here - http://jsfiddle.net/j4zvyz7h/2/
I can center it horizontally but not vertically.
Is it possible to center the text horizontally in the second example.
html, body{
height: 100%;
}
.block{
background: rgba(230, 97, 97, 0.4);
display: table;
width: 100%;
height: 100%;
text-align: center;
}
.text{
display: table-cell;
vertical-align: middle;
}
You can also do this:
.text{
position: absolute;
top: 50%;
left: 0;
right: 0;
}
http://jsfiddle.net/j4zvyz7h/5/
You would have to adjust the margins a bit to perfectly center it though. A negative margin-top with values exactly half of your element's height will do it.
The 'correct' way of achieving this is using display: flex;
JS Fiddle
.box {
display: flex;
align-items: center;
justify-content: center;
background-color: brown;
height: 350px;
}
.box > p {
font-family: sans-serif;
color: yellow;
}
<div class="box">
<p>Centered content goes here</p>
</div>
EDIT:
Demo for full screen centered content
You could use a combination of absolute positioning and transforms. Here's an example forked from your code.
https://jsfiddle.net/dwkn5563/
.text{
position:absolute;
top:50%;
left:50%;
transform:translateY(-50%) translateX(-50%);
}
I am trying to center an image inside a div in the exact middle - horizontally and vertically, but this is not working for me:
#col_as_table
{
float:left;
position:relative;
width:14%;
min-height:100px;
height:auto;
display: table;
display: table-cell;
text-align: center;
vertical-align: middle;
}
HTML
<div id="col_as_table"><img src="test.png"></div>
Give this a shot. You'll need an extra div.
Fiddle!
HTML:
<div class="divTable">
<div class="innerDivTable">
<img src="test.png"/>
</div>
</div>
CSS:
.divTable {
width: 200px; /* purely for demonstration */
height: 200px; /* purely for demonstration */
display: table;
border: 1px solid black;
}
.innerDivTable {
display: table-cell;
vertical-align: middle;
text-align: center;
}
Fiddle: http://jsfiddle.net/4mYj3/1/
CSS:
#col_as_table
{
position:relative;
margin: auto;
text-align: center;
vertical-align: middle;
display: table;
height:500px;
}
img{
position: absolute;
top: 50%;
left: 0;
bottom: 0;
right: 0;
}
I wrote a Pen some time ago for the same purpose. It shows 3 methods on how you can center an image vertically as well as horizontally.
I'd personally use absolute positioning or table cell depending upon the situation.
#div3{
display:table-cell;
vertical-align:middle;
}
#div1 img{
height:100px;
position:absolute;
top:50%;
left:50%;
-webkit-transform:translateY(-50%) translateX(-50%);
}
Here's a fiddle:
http://jsfiddle.net/C4DC7/
There are many ways to accomplish this. My example expands on the idea that you can afford your images to expand the parent div element.
Was wondering if anyone can show me best way to vertically align my image in image col and have the column equal in height to the text col?
CSS
*{padding:0;margin:0;}
.col{
width: 50%;
float: left;
height: 100%;
}
.col-text {
background: silver;
}
.col-img {
background: red;
display: inline-block;
text-align: center;
}
.col-img img {
display: inline-block;
vertical-align: middle;
}
.cf:after{
content:"";
display:table;
clear:both;
}
}
JSFiddle http://jsfiddle.net/LUpmG/1/
This is my version: http://jsfiddle.net/LUpmG/2/
In short, you need to get rid of floats, use display: table-cell, and apply vertical-align: middle to the container.
I used the JsFiddle at jsfiddle.net/5tzk3/10. I changed it to display the div as square shaped dialog (both horizontally and vertically centered). The result is at jsfiddle.net/5tzk3/548.
As you see, centering horizontally was easy, but I could not get it centered vertically. Anyone who knows how to do that with pure CSS?
Edited code below:
<div class="blind">
<div class="wrapper">
<div class="main">
I'm your div with an aspect-ratio of 1:1!
</div>
</div>
</div>
html, body, .blind {
height: 100%;
width: 100%;
}
.blind {
left: 0;
position: fixed;
text-align: center;
top: 0;
}
.wrapper {
display: inline-block;
margin: auto;
position: relative;
width: 50%;
}
.wrapper:after {
content: '';
display: block;
padding-top: 100%;
}
.main {
background-color: rgb(0, 162, 232);
bottom: 0;
left: 0;
margin: auto;
position: absolute;
right: 0;
top: 0;
}
Use display: table for the parent div, and display:table-cell; vertical-align: middle for the content div which you want to vertically center.
The most common way of doing this if you've got an element with known dimensions is to use positioning to firstly position it top: 50% (which places the top edge of the element 50% of the way down) and then use a negative top-margin of half the height of the element (pulling it back up by half it's height).
To give you an example, to absolutely position a 200x200 element dead-centre on the page you would use:
.element{
display: block;
width: 200px;
height: 200px;
position: absolute;
top: 50%;
margin-top: -100px
}
Alternatively, you can use a combination of display: table and then display: table-cell on the parents to open up the ability to use vertical-align although this is a bit nasty when it comes to laying out elements around it.
you can drop absolute positionning and use either display:table or inline-block with pseudo elements.
here is a mixed of the 2 methods
1) html/body as a table one cell
2) inner content with ratio preserved and content as inline box set in the middle.
.ratio1-1 {
width:25%;
vertical-align:middle;
margin:auto;
background:turquoise;
}
.ratio1-1:before {
content:'';
padding:50% 0;
width:0;
display:inline-block;
vertical-align:middle;
}
.ib {
display:inline-block;
vertical-align:middle;
}
/* center body content as a table cell */
html {
height:100%;
width:100%;
display:table;
}
body {
display:table-cell;
vertical-align:middle;
text-align:center;
}
<div class="ratio1-1">
<div class="ib">content in middle</div>
</div>
demo: http://codepen.io/gc-nomade/pen/pubFm
This may sound weird but i have some css which aligns mys divs. In one place i also use http://www.brunildo.org/test/img_center.html which centers images.
Now i want my divs inside a larger div to go to another line if this one gets full. float: left seems to be the answer. The problem is it ruins my formatting. Including solution in the above link. I have this test code. If i remove the width and float it looks fine except it may take up too much space and not go to another line.
I was thinking i could use float on an outerdiv and center the image within. However float: left is still breaking it. I am hoping there is a way to remove the float so each div does go left but the div inside centers correctly not breaking my formatting.
<style type="text/css">
.wraptocenter {
display: table-cell;
text-align: center;
vertical-align: middle;
width: 200px;
height: 200px;
background: blue;
}
.wraptocenter * {
vertical-align: middle;
}
/*\*//*/
.wraptocenter {
display: block;
}
.wraptocenter span {
display: inline-block;
height: 100%;
width: 1px;
}
/**/
div.c
{
background: red;
overflow: hidden;
min-width: 400px;
max-width: 400px;
}
div.c div
{
float: left;
}
</style>
<!--[if lt IE 8]><style>
.wraptocenter span {
display: inline-block;
height: 100%;
}
</style><![endif]-->
<div class="c">
<div>
<div>
<div class="wraptocenter"><span></span><img src="a.jpg" alt="/a.jpg"></div>
<div class="wraptocenter"><span></span><img src="a.jpg" alt="/a.jpg"></div>
<div class="wraptocenter"><span></span><img src="a.jpg" alt="/a.jpg"></div>
</div></div></div>
regular old display:inline can be used on the images themselves (or a container div). this will let the items flow onto multiple lines depending on the width of the enclosing div.
to center the top-level div, something like margin: 0 auto should do it (if the parent has a width) or the good old <center> tag if not.