How do I center align the image to vertically and horizontally to the div.
I need to get this without fixing height or padding because the image sizes are not constant so it should be flexible with all the images.
Here is my trail
http://jsfiddle.net/yHdAx/2/
To center align an image, you have to set it's display to block, and then the left and right margins to auto. I also did this with the top and bottom margins, in the new code example. Here is the code required to make this work:
CSS
.test {
background-color:#999;
height:60%;
display:block;
vertical-align:middle;
padding-top: 25%;
padding-botton: 25%;
}
.test img {
max-width:50%;
vertical-align: ;
display: block;
margin: auto auto auto auto;
}
HTML
<div style="height:800px; background-color:#CCC">
<div class="test">
<img src="http://static.clickbd.com/global/classified/item_img/607724_0_original.jpg" />
</div>
</div>
Hey now you can used to table-cell properties in your div as like this
live demo http://jsfiddle.net/yHdAx/3/
HTML
<div style="height:800px; background-color:#CCC">
<div class="test">
<img src="http://static.clickbd.com/global/classified/item_img/607724_0_original.jpg" />
</div>
Css
.test{
background-color:red;
height:600px; display:table-cell; vertical-align:middle;
text-align:center;
}
.test img{
max-width:50%;
}
more info http://www.brunildo.org/test/img_center.html
Apply display:block to the image and set its margins to auto.
.test {
background-color:#999;
padding: 50px 0;
}
.test img {
display: block;
margin: auto;
}
Here is the fiddle, http://jsfiddle.net/yHdAx/5/
I tried to play with only one div
div {
display:table-cell;
background:red;
width:500px;
height:500px;
vertical-align:middle;
text-align:center;
}
I hope this will also help you :- http://jsbin.com/ihunuq/3/edit
What if you don't set a height on the containing div, would the desig break then?
To center the image just use
.test img {
display:block;
width:25%;
margin:0 auto;
}
You can use position: absolute.
Something like that: jsfiddle.
.test{
background-color:#999;
height:60%;
width: 100%;
position: relative;
}
.test img{
max-width:50%;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
Related
I m trying to center an image in a div while keeping the aspect ratio - I m using this code but somehow its not aligning the item in the center (top/bottom center). If possible using only CSS.
The size of the image is not known since its using max widths!
JSfiddle: http://jsfiddle.net/L41wpza6/2/
#imageHolder {
width: 400px;
height: 400px;
line-height: 400px;
background-color:#CCCCCC;
}
#imageHolder img {
max-width: 100%;
max-height:100%;
display: block;
margin: 0 auto;
vertical-align: middle;
}
Any help is appreciated! I am not sure what I am missing to make this work.
JSFiddle - DEMO
You should use display: inline-block; to #imageHolder img to vertical-align middle.
CSS display inline-block property allows elements to flow like inline elements but respect properties, such as width, like block elements and you can use display Inline-block to set vertical-align middle.
HTML:
<div id="imageHolder">
<img src="http://www.discoverjb.com/wp-content/uploads/2014/07/IMG_1399.jpg">
</div>
CSS:
#imageHolder {
width: 400px;
height: 400px;
line-height: 400px;
background-color:#CCCCCC;
}
#imageHolder img {
max-width: 100%;
max-height:100%;
display: inline-block; /* Instead of display: block; */
margin: 0 auto;
vertical-align: middle;
}
for one looking for horizontally center.
Solution of #sibbl worked, but there is still some pixels on the top of image in horizontal case.
I have imporoved #Anoymous code
HTML:
<div class="imageHolder">
<img src="http://lorempixel.com/g/800/400">
</div>
<div class="imageHolder">
<img src="http://lorempixel.com/g/800/800">
</div>
<div class="imageHolder">
<img src="http://lorempixel.com/g/400/800">
</div>
CSS:
.imageHolder {
width: 300px;
height: 300px;
background-color:#CCCCCC;
margin:10px;
display:inline-block;
float:left;
position:relative;
}
.imageHolder img {
max-width: 100%;
max-height:100%;
margin: auto;
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
}
JSFiddle - DEMO
On a fluid site I am using a Wrap to center the content and its CSS is:
#Wrap {
margin: 0 auto;
width: 90%;
}
Is it possible to have a centered fluid wrap but with fixed margins in pixels?
Thank You,
Miguel
Is this what you are looking for?
Apply text-align:center; on the parent element and display:inline-block; on the child element
FIDDLE
<div class="outer" >
<div id="Wrap"></div>
</div>
css
.outer
{
background:yellow;
text-align:center;
width: 100%;
height: 100%;
}
#Wrap {
margin: 15px;
width: 90%;
height: 100px;
background:pink;
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!
How can I center an img in a parent div tag which is set to overflow: hidden. That is, what I want is to clip the image but clip on both the left/right so the middle of the image is shown.
<div class='wrapper'>
<img/>
</div>
Then styles something like:
.wrapper {
position: absolute;
/* position details here */
overflow: hidden;
}
.wrapper img {
height: 100%;
margin-left: -??; //what here?
}
-50% would be the width of the parent, but I want the width of the img itself.
Firefox supported CSS is acceptable.
http://codepen.io/gcyrillus/pen/BdtEj
use text-align , line-height , vertical-align and negative margin. img virtually reduced to zero, will center itself.
.wrapper {
width:300px;
text-align:center;
line-height:300px;
height:300px;
border:solid;
margin:2em auto;
overflow:visible; /* let's see what we slice off */
}
img {margin:-100%;vertical-align:middle;
/* to show whats been cut off */
position:relative;
z-index:-1;
}
For horizontal only :
.wrapper {
width:300px;
text-align:center;
border:solid;
margin:2em auto;
overflow:hidden
}
img {
margin:0 -100%;
vertical-align:middle;
}
Try to add
display:block;
margin:0px auto;
to ".wrapper img"
Hi please check example
its solve your problem
HTML
<div class='wrapper'>
<img border="3"/>
</div>
CSS
.wrapper {
/*position: absolute;*/
/* position details here */
overflow: hidden;
text-align:center
}
.wrapper img {
height: 100%;
}
I have a two column layout:
<html>
<head></head>
<body>
<div id="container">
<div id="header"></div>
<div id="sidewrapper"></div>
<div id="contentwrapper"></div>
</div>
</body>
</html>
I want to have both sidebar and content be 100% in height but the most top container's min-height should be 100%.
I tried to solve it with the following css:
* {
margin: 0;
padding: 0;
}
html {
font-family: Georgia, serif;
color: #000; height:100%; min-height:100px;
}
body {
background: #fff; height:100%; min-height:100px; overflow:hidden;
}
#header {
width: 100%;
position: relative;
float: left;
height: 23px;
}
#container {
position:relative;
width: 100%; height:100%;
margin: auto; background:blue;
}
#contentwrapper {
float:left;
background:red;
position: relative;
width: 700px; padding:0px; margin:0px;
height: auto;
}
#sidewrapper {
float:left;
position: relative;
width: 159px; height:100%;
padding:0px; margin:0px;
}
...but I get a scrollbar because of the header's 23px height. I tried to solve it with overflow:hidden for the body element but I do not know if that is the right solution.
Any ideas?
If my assumption I put forward in my comment to the question is right, then sidebar is 100% high, and on top of that you have a 23px header, so that causs your container to be 100% + 23px high.
In the future you will have in css calc() http://hacks.mozilla.org/2010/06/css3-calc/ . This will solve your problem.
Now, I guess you should calculate the height of the sidebar ( = height of container - 23px), by javascript.
Make #header position absolute. This will cut that block out of the normal flow and you'll be able to make heights of other blocks equal to their parent.
#header {
position: absolute;
width: 100%; height: 23px;
top: 0; left: 0;
}
#sidewrapper,
#contentwrapper {
float: left;
width: 50%;
height: 100%;
}
#sidewrapper .content,
#contentwrapper .content {
margin-top: 23px;
}
The height of an element is compared with its father element. In your case, I recommend you specify the concrete width & height for "containter", because it'll be hard to pretend the size of the screen on many machines.
If you insists use percent, I recommend you use for both element, such as header 25% height and content 75% height.
Lets say I've a html body and a div inside and I want to make the height of the div to the entire browser without scroll bar and side gaps. Then understand the following example below, and implement your own.
Html:
<body>
<div id="yellowDiv">
<div>
</body>
CSS:
body{
margin:0px;
}
yellowDiv{
background-color:yellow;
height:100vh;
}