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.
Related
I have two divs that I am trying to stack over each other but the one I want on top is not showing. I want the blue background div to lay on top of the red background div. Any advice? The reason why I want to overlay the blue div is because the container is a centered grid and I want the red div to be the background for the first half of the page.
JSFIDDLE
CSS
.buddy {
width: 50%;
height: 629px;
display: inline-block;
position: relative;
background: red;
}
.buddy-content {
position: absolute;
top: -629px;
z-index: 10;
background: blue;
}
.container {
max-width: 1000px;
margin: 0 auto;
overflow:hidden;
position:relative;
padding: 0 10px;}
You have made the second div absolute so you don't need to give the negative value for top. The second div is hiding because you top -629px; Try making the top:0 and see. And also for your current code. Remove the overflow hidden and put z-index like this:
.buddy {
width: 50%;
height: 629px;
display: inline-block;
position: relative;
z-index:9;
background: red;
}
.buddy-content {
position: absolute;
top: -629px;
z-index: 10;
background: blue;
}
.container {
max-width: 1000px;
margin: 0 auto;
width:200px;
height:200px;
position:relative;
padding: 0 10px;
}
.buddy {
width: 50%;
height: 629px;
display: inline-block;
position: absolute;
background: red;
}
.buddy-content {
position: absolute;
z-index: 10;
background: blue;
}
<div class="buddy BlueGradient">
</div>
<div class="container">
<div class="buddy-content">
ROGER
</div>
</div>
https://jsfiddle.net/kt77cp3e/6/
just add z-index : higher to the div that you want to show on top and set z-index low to the other one ..
ant one thing your code is working good just you need to remove " top : -629px;"
that thing is not allowing blue div to be on top just it is showing at the -629 px position..!!!!
If you can update your code like this, it may solve the issue:
Demo:https://jsfiddle.net/kt77cp3e/7/
CSS:
html, body {
height:100%;
width:100%:
}
.container {
width:50%;
height:100%;
background:red;
position:relative;
}
.container>div {
position:relative;
left:0;
right:0;
}
.container>div:first-child {
top:0;
height:50%;
background:blue
}
.container>div:last-child {
bottom:0;
height:50%;
background:green
}
HTML:
<div class="container">
<div></div>
<div></div>
</div>
Update: Considering the latest updated code, I think you should remove overflow:hidden from the container styles. That should do the trick
You should set the dimension on the .container div.
CSS:
.container {
position:relative;
width:100px; //You may modify these values
height:100px
}
Demo: https://jsfiddle.net/kt77cp3e/1/
.buddy { width: 50%; height: 629px; display: inline-block; position: relative; background: red;}
.buddy-content { position: absolute; top: 0px; z-index: 10; background: blue; }
.container {max-width: 1000px; margin: 0 auto; overflow:hidden; position:relative; padding: 0 10px; position: relative;}
<div class="container">
<div class="buddy BlueGradient">
<div class="buddy-content">ROGER</div>
</div>
</div>
This brings the text "Roger" with blue background on top of the red background
How to make a button be at the bottom of div and at the center of it at the same time?
.Center {
width: 200px;
height: 200px;
background: #0088cc;
margin: auto;
padding: 2%;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
.btn-bot {
position: absolute;
bottom: 0px;
}
<div class=Center align='center'>
<button class='btn-bot'>Bottom button</button>
</div>
Give the parent element…
display: table; text-align: center;
…and its child element…
display: table-cell; vertical-align: bottom;
This way you do not need to know the width of the child element in case it changes, thus requiring no negative margins or workarounds.
For example write like this if you have position absolute:
.btn-bot{
position:absolute;
margin-left:-50px;
left:50%;
width:100px;
bottom:0px;
}
Note: give margin-left half of the width of the button.
JSFiddle demo
Does the button need to be absolutely positioned? If so, you could specify a width and then a negative left margin:
.btn-bot{
position: absolute;
left: 50%;
width: 100px;
margin-left: -50px;
bottom:0px;
}
fiddle
You can use display: table-cell and vertical-align: bottom to achieve this, although you need a container div set to display: table.
HTML
<div class="boxContainer">
<div class="box">
<button>Bottom button</button>
</div>
</div>
CSS
.boxContainer {
display: table;
}
.box {
width: 200px;
height: 200px;
background: #0088cc;
padding: 2%;
display: table-cell;
text-align: center;
vertical-align: bottom;
}
Demo
One way of doing this would be to give it an absolute width and then a margin half of that:
width: 250px;
margin-left: -125px;
Another way would be to give the div the following line-height and remove all styles from the button:
line-height: 398px;
I know this has been answered a long time ago, but I couldn't use display:table on the parent container so I had to find another way around.
It turned out that this worked just fine:
.container{
position:absolute;
}
.button{
position:absolute;
bottom: 5px;
left: 0%;
right: 0%;
text-align: center;
}
Edit: This works if your button is a <div>, not for an actual <button>
I used table-row to combine text and button in one container:
#out{
display:table;
position:absolute;
}
#out div#textContainer{
display:table-row;
}
#out div#text{
display:table-cell;
vertical-align:top;
}
#out div#buttonContainer{
display:table-row;
text-align:center;
}
#out div#button{
display:table-cell;
vertical-align:bottom;
}
CodePen
This is what worked for me and I think is what several people were trying to get at.
Just use a full width wrapper div with the button centered inside it.
<div class="outer">
<div class="inner-button-container">
The Button
</div>
</div>
.outer{
position:relative;
height:200px;
width:500px;
background-color:lightgreen;
}
.inner-button-container{
background-color:grey;
position:absolute;
bottom:0;
right:0;
left:0;
text-align:center;
}
a{
margin:auto;
background-color:white;
}
Result:
Fiddle
You can use align-items: flex-end like so:
html,
body {
height: 100%;
}
.flex-container {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.center {
width: 200px;
height: 200px;
background: #0088cc;
display: flex;
align-items: flex-end;
}
.btn-bot {
margin: 0 auto;
display: block;
}
<div class="flex-container">
<div class="center">
<button class="btn-bot">Bottom button</button>
</div>
</div>
I have a main div (#homeGallery), in which i have a span(.imgClass) that is used to load one of a list of images.
I need the image to be centered not only vertically but horizontally in the div.
So far I have this code.
#homeGallery > .imgClass{
margin:auto;
position: relative;
top: 0;
bottom: 0;
display: block;
left: 0;
right: 0;
}
and
#homeGallery > .imgClass > img {
margin:auto;
float:center;
max-width:60%;
max-height:99%;
border: 2px solid;
}
Any help would be appreciated
This is a jewel I found recently. Use position: absolute with a top, left, bottom and right. You can center your span horizontally and vertically.
HTML:
<div class="wrapper">
<span class="image"></span>
</div>
CSS:
.wrapper {
width:400px;
height: 400px;
position: relative;
background-color: #afafaf;
}
.wrapper .image {
position: absolute;
top: 25%;
left: 25%;
right: 25%;
bottom: 25%;
background-color: #000;
}
http://jsfiddle.net/QTDrm/
You can try this code:-
#homeGallery > .imgClass > img {
position:absolute;
left:0;
right:0;
top:0;
bottom:0;
margin:auto;
max-width:100%;
max-height:100%;
overflow:auto;
}
You can try the following:
#homeGallery > .imgClass > img {
margin:0px auto;
display:block;
max-width:60%;
max-height:99%;
border: 2px solid;
}
Here's a Fiddle
#homeGallery .imgClass {
position: relative;
width: 200px;
height: 200px;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -100px;
}
If you dont know the image width & height than you could use jQuery solution
$(function() {
var imgW = $('.imgClass').outerWidth(),
imgH = $('.imgClass').outerHeight();
$('.imgClass').css({ marginLeft: - imgW / 2 + 'px', marginTop: - imgH / 2 + 'px' });
});
and this CSS
#homeGallery .imgClass {
position: relative;
top: 50%;
left: 50%;
}
This is my prefered method:
HTML
<div id="homeGallery">
<span class="imgClass">
<span class="fakeImg">You can use whatever img you want here</span>
</span>
</div>
CSS
#homeGallery{
height: 400px;
border: 1px solid #333;
text-align: center;
}
#homeGallery:before{
content: '';
height: 100%;
vertical-align: middle;
display: inline-block;
}
.imgClass{
display: inline-block;
vertical-align: middle;
text-align: left;
background-color: blue;
}
jsfiddle here.
The good side is that this is 100% css-based vertical alignment. You don't have to worry about screen size or DOM size change.
The cons is that it doesn't work on IE7 or lower.
If you want to both vertically and horizontally center an element, you should have a look at this approach:
jsFiddle
It works in all current browsers and IE8+.
HTML
<div>
<span class="element"></span> <!-- This can be any element -->
</div>
CSS
html, body {
width: 100%;
height: 100%;
display: table;
}
body > div {
display: table-cell;
vertical-align: middle;
}
body > div > .element {
display: block;
margin: 0px auto;
}
In your specific case with an img inside a span inside a div, I would solve it this way using the approach I have outlined above: jsFiddle
Note that I had to change some CSS classes to get it to work nicely with the image inside the span. I have set text-align: center on the div and display: inline-block; on the span. Below I have inserted the full classes which I have had to change to make it work for your situation.
CSS
body > div {
display: table-cell;
vertical-align: middle;
text-align: center;
}
body > div > .element {
display: inline-block;
}
My HTML structure is basically this -
<div id="header">
<div class="container">
</div>
</div>
<div id="content">
<div class="container">
</div>
</div>
<div id="footer">
<div class="container">
</div>
</div>
Ignore any elements except <div id="header">
I want to align <div class="container"> inside <div id="header"> at exactly bottom center. I'm using the following CSS code-
#header{ width:1062px; height:326px; background-color:#110000; text-align:center; position:relative; }
#header .container{ width:940px; height:262px; background-color:#220000; margin:0px auto; position:absolute; bottom:0px; }
There are height differences between the parent (#header) and child (#header .container) DIVs. Removing position:absolute; from the child centers it but it sticks to the parent's top instead of bottom. Keeping position:absolute; sticks it at the bottom but aligns it to the left.
How do I align it both center AND bottom at the same time?
I tried all the solution above but it didn't work when you resize the browser window. This solution is mostly to be applied when you don't know the element's width. Or if the width is changed on resize.
After making some research I tried the following and it worked perfectly on all screen sizes.
#somelement {
position: absolute;
left: 50%;
bottom: 0px;
-webkit-transform: translateX(-50%);
transform: translateX(-50%)
}
I shared this for anyone still facing this issue.
try in this way:
#header .container{
width: 940px;
height: 262px;
background-color: #220000;
position: absolute;
bottom: 0 ;
left: 50%;
margin-left: -470px;
}
try this
#header .container {
width: 940px;
height: 262px;
background-color: #220000;
margin: 0px auto;
position: absolute;
bottom: 0px;
left: 61px;
}
use this:
#header{
width:1062px; height:262px; background-color:#110000; text-align:center;
position:relative;text-align: center; vertical-align: bottom;padding-top:64px;
}
#header .container{
width:940px;
height:262px;
background-color:#999000;
margin:0px auto;
bottom:0px;
margin-bottom: 0px;
padding-top: 0px;
}
Here the jsfiddle
UPDATE:
As DenisVuyka said in comment, i should add that the above sample was as answer to this particular question with fixed height for DIV.
If you want that height of DIV don't break up things then for example you should use padding-top:10%; in the #header and height:100% in #header .container CSS.
#header{
width:462px; height:262px; background-color:#110000; text-align:center;
position:relative;text-align: center; vertical-align: bottom;padding-top:10%;
}
#header .container{
width:300px;
height:100%;
background-color:#999000;
margin:0px auto;
bottom:0px;
margin-bottom: 0px;
padding-top: 0px;
}
Here is a demo: http://jsfiddle.net/d6ct6/ .
I was trying to get this to work in my project as well. I've edited this jsfiddle:
http://jsfiddle.net/d6ct6/
<div id="header">
<div class="container">
</div>
</div>
#header {
height:100vh;
background-color:#110000;
position:relative;
}
#header .container{
width:300px;
height:40px;
background-color:#999000;
bottom:0px;
position:absolute;
left:calc((100% - 300px)/2);
}
But I've found this only works when the width of .container is fixed.
If the width of .container is not fixed you would need javascript to find it's width and then change that width in the calc.
When the widths are responsive, use this:
HTML
<div id="header">
<div id="container">
</div>
</div>
CSS
#header {
height:100vh;
background-color:#110000;
position:relative;
}
#container{
width:300px;
height:40px;
background-color:#999000;
bottom:0px;
position:absolute;
}
JS
$(document).ready(function () {
var parentWidth = $('#header').width();
var trapWidth = $('#container').width();
var deadCenter = (parentWidth - trapWidth);
var deadHalf = Number( deadCenter / 2 );
$('#container').css("right", deadHalf);
});
In case you care more about having the inside div aligned in the center and can manually set the vertical alignment.
DEMO Height I used was first div height - second div height.
#header .container{ width:940px; height:262px; background-color:red; margin:0 auto; position:relative; top: 64px; }
I would take advantage of CSS table display properties and do the following:
#header {
width:1062px;
height:326px;
background-color:#110000;
text-align:center;
display: table-cell;
vertical-align: bottom;
}
#header .container {
width:900px;
height:262px;
background-color:#cccccc;
color: white;
display: inline-block;
}
Set the #header block to display: table-cell and set vertical-align: bottom to align the child's bottom edge to the bottom edge of the parent.
The child .container element had display: inline-block and this will allow it to respond the text-align: center property of the parent.
This will work regardless of the width of the child .container.
Demo fiddle: http://jsfiddle.net/audetwebdesign/p9CxE/
This same problem was bedevilling me for an hour or so, until I realised I could add an intermediary div; this separated the vertical alignment issue from the centering.
.dparent {
border: 1px solid red;
width: 300px;
height: 300px;
position: absolute;
}
.dchild {
border: 1px solid blue;
margin-left: auto;
margin-right: auto;
width: 200px;
height: 100px;
bottom: 0px;
position: relative;
}
.dmid {
border: 1px solid green;
width: 100%;
position: absolute;
bottom: 0;
<div class="dparent">
<div class="dmid">
<div class="dchild"></div>
</div>
</div>
Do the vertical alignment first, with an absolute position and the 0 bottom. Then do the centering with margin-left and margin-right set to auto.
You might try this solution for any concerned width:
width:100%;
position:absolute;
bottom: 5px;
left:50%;
margin-left:-50%;
Good luck!
I've got two div containers.
Whilst one needs to be a specific width, I need to adjust it, so that, the other div takes up the rest of the space. Is there any way I can do this?
.left {
float: left;
width: 83%;
display: table-cell;
vertical-align: middle;
min-height: 50px;
margin-right: 10px;
overflow: auto;
}
.right {
float: right;
width: 16%;
text-align: right;
display: table-cell;
vertical-align: middle;
min-height: 50px;
height: 100%;
overflow: auto;
}
<div class="left"></div>
<div class="right"></div> <!-- needs to be 250px -->
See: http://jsfiddle.net/SpSjL/ (adjust the browser's width)
HTML:
<div class="right"></div>
<div class="left"></div>
CSS:
.left {
overflow: hidden;
min-height: 50px;
border: 2px dashed #f0f;
}
.right {
float: right;
width: 250px;
min-height: 50px;
margin-left: 10px;
border: 2px dashed #00f;
}
You can also do it with display: table, which is usually a better approach: How can I put an input element on the same line as its label?
It's 2017 and the best way to do it is by using flexbox, which is IE10+ compatible.
.box {
display: flex;
}
.left {
flex: 1; /* grow */
border: 1px dashed #f0f;
}
.right {
flex: 0 0 250px; /* do not grow, do not shrink, start at 250px */
border: 1px dashed #00f;
}
<div class="box">
<div class="left">Left</div>
<div class="right">Right 250px</div>
</div>
You can use calc() Function of CSS.
Demo: http://jsfiddle.net/A8zLY/543/
<div class="left"></div>
<div class="right"></div>
.left {
height:200px;
width:calc(100% - 200px);
background:blue;
float:left;
}
.right {
width:200px;
height:200px;
background:red;
float:right;
}
Hope this will help you!!
If you can flip the order in the source code, you can do it like this:
HTML:
<div class="right"></div> // needs to be 250px
<div class="left"></div>
CSS:
.right {
width: 250px;
float: right;
}
An example: http://jsfiddle.net/blineberry/VHcPT/
Add a container and you can do it with your current source code order and absolute positioning:
HTML:
<div id="container">
<div class="left"></div>
<div class="right"></div>
</div>
CSS:
#container {
/* set a width %, ems, px, whatever */
position: relative;
}
.left {
position: absolute;
top: 0;
left: 0;
right: 250px;
}
.right {
position: absolute;
background: red;
width: 250px;
top: 0;
right: 0;
}
Here, the .left div gets an implicitly set width from the top, left, and right styles that allows it to fill the remaining space in #container.
Example: http://jsfiddle.net/blineberry/VHcPT/3/
If you can wrap them in a container <div> you could use positioning to make the left <div> anchored at left:0;right:250px, see this demo. I'll say now that this will not work in IE6 as only one corner of a <div> can be absolutely positioned on a page (see here for full explanation).
1- Have a wrapper div, set the padding and margin as you like
2- Make the left side div the width you need and make it float left
3- Set the right side div margin equal to the left side width
.left
{
***width:300px;***
float: left;
overflow:hidden;
}
.right
{
overflow: visible;
***margin-left:300px;***
}
<div class="wrapper">
<div class="left">
...
</div>
<div class="right" >
...
</div>
</div>
Hope this works for you!
There are quite a few ways to accomplish, negative margins is one of my favorites:
http://www.alistapart.com/articles/negativemargins/
Good luck!
set your right to the specific width and float it, on your left just set the margin-right to 250px
.left {
vertical-align: middle;
min-height: 50px;
margin-right: 250px;
overflow: auto
}
.right {
width:250px;
text-align: right;
display: table-cell;
vertical-align: middle;
min-height: 50px;
height: 100%;
overflow: auto
}
If you need a cross browser solution, you can use my approach, clear and easy.
.left{
position: absolute;
height: 150px;
width:150px;
background: red;
overflow: hidden;
float:left;
}
.right{
position:relative;
height: 150px;
width:100%;
background: red;
margin-left:150px;
background: green;
float:right;
}
Use the simple this can help you
<table width="100%">
<tr>
<td width="200">fix width</td>
<td><div>ha ha, this is the rest!</div></td>
</tr>
</table>