I'd like to vertically align a div centrally inside a larger div. How do I do this?
HTML:
<div class="outer">
<div class="middle">
<h1>test</h1>
<h2>Test</h2>
</div>
</div>
CSS:
.middle {height:160px;display: table-cell; vertical-align: middle;text-align:center;background:red}
.outer {height:550px;background:#eee}
http://jsfiddle.net/zc09442a/
You can use a rather simple technique taking advantage of css transforms, like this:
HTML
<div class="outer">
<div class="middle">
<h1>Test</h1>
<h2>Test</h2>
</div>
</div>
CSS
.middle {
margin: auto;
position: absolute;
top: 50%;
-webkit-transform: translate(0, -50%);
transform: translate(0, -50%);
background-color: #ccc;
}
.outer {
height:550px;
width:100%;
background-color:#eee;
position: relative;
}
Your updated fiddle here.
You can also center the element both vertically and horizontally by adding a left: 50% property and changing the transform: translate(0, -50%); line to transform: translate(-50%, -50%);.
Vertical and horizontal centering here
See if this helps
.outer{ background:tomato; height:20em; vertical-align:middle; display:table-cell; width:50em; }
.middle{ background:green; width:50%; margin: auto; }
http://codepen.io/jmonit/pen/LEzppM
Related
I want to align a div centered horizontally in the page. The div contains several html content like, images, links, texts etc.
For the sake of it I cannot use display:table, which would align the div in center. How could I else align the content, without having to give an explicit width?
You will need to use justify-content: center in flexbox layout. No need of setting a width.
.center {
display: flex;
justify-content: center;
}
<div class="center">
<img src="http://placehold.it/300x300">
<span class="text">Test text</span>
Test link
</div>
Or without using flex, translate or absolute positioning:
#container {
text-align:center;
}
#center {
padding:20px;
display:inline-block;
background:#ccc;
}
<div id="container">
<div id="center">
this is a test
</div>
</div>
You can center horizontally and vertically (as you like) with a translate so easy, and without know the width or the height:
<div class="parent">
<div class="center">
Centered
</div>
</div>
CSS
.parent {
position: relative;
}
.center {
position: absolute;
left:50%;
transform: translateX(-50%);
-webkit-transform: translateX(-50%);
}
To center vertically use translateY()
Snippet:
.parent {
position: relative;
width: 100%;
height: 500px;
border: 1px solid black;
}
.center {
height: 240px;
position: absolute;
left:50%;
top: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
}
<div class="parent">
<div class="center">
Centered
</div>
</div>
I am struggling aligning 2 imgs in the same div. I want one to be aligned on the left, and the other to be in the center. Any suggestion?
div {
background: red;
text-align: center;
}
div img{
vertical-align: middle;
}
.left {
float:left;
}
<div>
<img src="//placehold.it/50x50" class="left" />
<img src="//placehold.it/50x50" />
</div>
div {
text-align: center;
background: red;
}
.left {
float: left;
}
.center {
clear: left;
}
<div>
<img class="left" src="http://www.nasa.gov/sites/default/files/images/facebook-icon(3).png">
<img class="center" src="http://www.nasa.gov/sites/default/files/images/facebook-icon(3).png">
</div>
Fiddle
Its easy, just specify your div , and maybe give it a class
<div class="mydiv">
<img src="(your-image)" width="(size)" height="(size)" class="leftAlign">
<img src="(your second image)" width="(size)" height="(size)" class="centerAlign" >
</div>
And here is a stylesheet for alignment
.mydiv{
width:100%;
}
.leftAlign{
position:absolute;
top:20px;
left:0px;
}
.centerAlign{
position:absolute;
top:20px;
left:0;
right:0;
margin:auto;
}
This might work out for you.
I hope it helps.
Actually, bpeterson76, your code does not center the .center.
Check this out:
div {
position: relative;
}
.left {
position: absolute;
left: 0;
}
.center {
position: absolute;
left: 50%;
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
}
http://jsfiddle.net/4h8g9prb/
It works perfect, the only downside is browser support IE9 or later.
div {
position: relative;
text-align: center;
}
.left {
position: absolute;
left: 0;
}
<div>
<img src="http://placehold.it/50x50" class="left">
<img src="http://placehold.it/50x50">
</div>
I have a main div (the red div in the fiddle) that has a smaller vertical tab on the side (the blue div in the fiddle).
The RED div is standard BUT the Blue div is rotated through 90 degrees (as I need to have vertical text in it). This is where the problems starts.
The red div is vertically positioned at 50% so it is in the middle of the page and locked with scrolling etc.
I want to align the blue div so that the top edge of the blue div is at the same Y position as the top edge of the red div.
I would prefer NOT to use jQuery but can do if required.
Desired output :
Fiddle is here : http://jsfiddle.net/kBKf6/
Here is the code I am using :
<div id="main" style="position: fixed; top: 50%; margin-top: -250px; left:0; height: 500px; width: 450px; background-color:red;">
Main Content Div
</div>
<div id="vertical_div" style="overflow:hidden; position: fixed; left:350px; height:40px; width:200px; margin: auto; background-color:blue; text-align:center; color:white; -webkit-transform: rotate(90deg) translate(-50%, -50%); -moz-transform: rotate(90deg) translate(-50%, -50%); -ms-transform: rotate(90deg) translate(-50%, -50%); -o-transform: rotate(90deg) translate(-50%, -50%); transform: rotate(90deg) translate(-50%, -50%);">
Side Tab
</div>
You don't need JS to align the rotated div. You can define a transform origin in CSS then, it becomes easy to align.
Side note : You can remove the -moz- and -o- vendor prefixes see caniuse
DEMO
HTML :
<div id="main">Main Content Div
<div id="verticaldiv">Side Tab</div>
</div>
CSS :
#main {
position: fixed;
top: 50%;
margin-top: -250px;
left:0;
height: 500px;
width: 450px;
background-color:red;
}
#verticaldiv {
overflow:hidden;
position: absolute;
left:100%;
bottom:100%;
height:40px;
width:200px;
background-color:blue;
text-align:center;
color:white;
-webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
-ms-transform-origin:0 100%;
-webkit-transform-origin: 0 100%;
transform-origin: 0 100%;
}
You can also do it without relying on hardcoded sizes that move your div into position, but you need a wrapper around your .verticaldiv
demo:
http://jsfiddle.net/MCr6f/
demo 2:
http://jsfiddle.net/9LtKw/ (to show that different sizes don't matter)
html:
<div class="one">
Hello
<div class="pivot">
<div class="two">
Pretty!
</div>
</div>
</div>
css:
.one {
background: red;
position: relative;
float: left;
/*strange and difficult sizes*/
font-size: 3.237827em;
padding: 10px;
}
.pivot {
position: absolute;
top: 0;
right: 0;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
transform: rotate(90deg);
width: 0px;
height: 0px;
}
.two {
background: blue;
color: white;
position: absolute;
left: 0;
bottom: 0;
/*strange and difficult sizes*/
font-size: 12px;
padding: 0.3em;
}
How to center align img with absolute positioning in div or table cell if I dont know width of image?
for example
<div style="position: relative">
<img style="position: absolute" />
</div>
Aligns the element horizontal and vertical to the relative parent.
<div style="position: relative">
<img class="centered" />
</div>
.centered {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
'top' and 'left' set to 50% will center the top-left-corner of the element. Translating is by -50% for both X and Y sets the element to the exact center of the parent.
For browser support take a look here:
Translate2d - caniuse.com
You can use the negative margin trick, assumed you know the dimensions of the image:
img{
top:50%;
left:50%;
margin-left : -(<imagewidth>/2)px;
margin-height: -(<imageheight>/2)px;
}
when you only target browsers which support the calc() feature you could do:
img{
top: calc(50% - <imagewidth>/2px);
left: calc(50% - <imageheight>/2px);
}
When the browser supports translation you can translate it -50% of the image-dimensions:
img{
top: 50%;
left: 50%;
position: absolute;
transform: translate(-50%, -50%);
}
If none of that is possible, your last resort is altered markup and display:table:
<div>
<div>
<img />
</div>
</div>
div{height:100%;width:100%;
display:table;
text-align: center;
vertical-align: middle;}
div>div{
display:table-cell;
}
see Demo for latest case
img {
display: block;
margin: 0 auto;
}
Check this JSFIDDLE1
or
div {
position: relative;
text-aligm: center;
width:2000px;
}
img {
position: absolute;
}
Check this JSFIDDLE2
Simple way to center an image vertically
if you know the height of div. then you can do image as vertical align.
div{
text-align:center;
height:150px;
line-height: 150px;
}
img{
vertical-align: middle;
}
My HTML looks like this:
<div class="item">
<div class="check">
<input type="checkbox">
</div>
<div class="descr"> ... </div>
<div class="details"> ... </div>
</div>
How do I align the checkbox in the middle of the div.check, both horizontally and vertically? (the height of the ".item" div is dynamic)
Here is an edit of Kilian Stinson code that does not require CSS3 support.
Instead of translate I use em's:
HTML:
<div class="check">
<input class="center" type="checkbox">
</div>
CSS:
.check {
width: 40px;
height: 80px;
outline: 1px solid red;
position: relative;
}
.center {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
margin-left: -.5em;
margin-top: -.5em;
}
JSFiddle: http://jsfiddle.net/Yzhnf/4/
Try to translate it with css3
HTML
<input class="center" type="checkbox">
CSS
.check {
position: relative;
}
.center {
position: absolute;
margin: 0;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
See this Fiddle with a working example.
At first, the element is positioned 50% from the left and 50% from the top. Then it's set back 50% of its own width and height.
For browser support get more information on caniuse.com.
position:relative; margin-left:auto; margin-right:auto; top..bottom etc
if that doesnt work
position:absolute; left:50%; right:50%;