We Keep Coding

Automatically Size a Container div to the Dimensions of an img element inside of it using only CSS?

I have a situation where I have a div container with an image inside of it. The image is a variable asset so I never know what the height and width of the image will be. I want the div container to always fit to the size of the image and then add some padding to it... so for example if the image inside is 200px by 100px then the container should stretch to be 200px by 100px and then have 30px padding around it.
Here is an example of the CSS I'm using.. (the image is meant to be centered within the div vertically and horizontally):
#container {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
background: red;
border-radius: 20px;
transform: translate(120px, 54px);
padding: calc(21px/2) calc(58px/2);
}
#container:hover {
background: pink;
}
Just for reference this is the html element:
<div id="container"><img src="image.png"></div>
So far I haven't been able to find any css trick that works. I tried using "fit-content" on the container, but it seems like fit-content is more for stretching the image to fit the container, not the other way around, so I resorted to using Javascript:
var container = document.getElementById("container");
container.style.width= container.querySelector('img').offsetWidth+"px";
container.style.height= container.querySelector('img').offsetHeight+"px";
I would rather not use JavaScript if I don't need to, so please let me know if there is a simpler way of doing this...

AFAIU, Your code is working as expected without the JavaScript:
#container {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
background: red;
border-radius: 20px;
transform: translate(120px, 54px);
padding: calc(21px/2) calc(58px/2);
}
#container:hover {
background: pink;
}
<div id="container">
<img src="https://picsum.photos/400">
</div>

Ok guys, I solved it...
I had this in my css:
#page img, #page div {position: absolute; border: 0;}
This was causing the image to have an absolute position which pulled it out of the document flow. Once I added position: relative to the img, it started working.
I appreciate the responses everyone. It was helpful! Thank you!

If I understand right this is what you want. No matter what size the image is the container will be 20px bigger.
#container {
float: left;
background: pink;
}
#image {
width: 500px;
height: 300px;
padding: 20px;
animation: size 5s linear infinite alternate;
}
#keyframes size {
from {width: 100px; height: auto;}
to {width:400px; height: auto;}
}
<div id="container">
<img src="https://static.toiimg.com/photo/72975551.cms" alt="pic" id="image"/>
</div>

How to align a website to the center of the screen top/bottom and right/left?

I want to have the effect like dropbox:https://www.dropbox.com/ where my website is centered in the exact middle of the page.

Achieving this effect is way more complicated than it should be. Here's a bare-bones working example: http://jsfiddle.net/JakobJingleheimer/UEsYM/
html, body { height: 100%; } // needed for vertical centre
html { width: 100%; } // needed for horizontal centre
body {
display: table; // needed for vertical centre
margin: 0 auto; // needed for horizontal centre
width: 50%; // needed for horizontal centre
}
.main-container {
background-color: #eee;
display: table-cell; // needed for vertical centre
height: 100%; // needed for vertical centre
// overflow: auto; // <- probably a good idea
vertical-align: middle; // needed for vertical centre
width: 100%; // needed for horizontal centre
}
.container {
background-color: #ccc;
padding: 20px;
}

If you want to achieve this:
Here are different methods, with the pros/cons of each one, for centering a page vertically. Choose which one you prefer:
http://blog.themeforest.net/tutorials/vertical-centering-with-css/
EDIT. As suggested, I will proceed to explain one of the methods. It only works if you already know the height/width of the element to center (the link includes more methods). Assuming all your content is within <body>, and that your content is 900px x 600px, you can do in your css:
html {
width: 100%;
height: 100%;
}
body {
width: 900px;
height: 600px;
position: absolute;
top: 50%;
margin-top: -300px; /* Half of the height of your body */
}
However, this falls short for dynamically generated content, since you don't know the height of it. I've used it succesfully on log-in box pop-up and settings pop-up.
Another method I've used in the past for the whole page is the Method 1 from the link. It makes a set of divs to behave as a table, which can vertical-align to the middle.

If you want to align it vertically center, please check this web page: http://www.jakpsatweb.cz/css/css-vertical-center-solution.html

If you know the width and height of your page
then wrap your contents in following div css
.center
{
position:absolute;
top:50%;
left:50%;
margin-left: -(yourPageWidth/2);
margin-top: -(YourPageHeight/2);
}

On your topmost div give margin:0 auto 0 auto; Also define some width to that div.

First create a main container of the desired width and then put all your code inside the main container. For Eg.
<body>
<div id="container">
......... your code
</div>
</body>
And in the css
#container{
width: 700px ;
margin-left: auto ;
margin-right: auto ;
}
You can change the width as per your needs

<body>
<div class="container">
......... your code
</div>
</body>
#container{
width: 700px ;
margin:0 auto ;
padding:0px;
}

Try this:
html
<span id="forceValign"></span><!--
--><div id="centerMiddleWrap">
<div id="centered">Hello this is some text. Hello this is some text. Hello this is some text.</div>
</div>
CSS
html {
height: 100%;
background: #eee;
}
body {
margin: 0;
height: 100%;
/*important*/
text-align: center;
}
#centerMiddleWrap {
/*important*/
display: inline-block;
vertical-align: middle;
}
#forceValign {
/*important*/
height: 100%;
display: inline-block;
vertical-align: middle;
}
#centered {
background: #000;
color: #fff;
font-size: 34px;
padding: 15px;
max-width: 50%;
/*important*/
display: inline-block;
}
Here is an demo

Wrap a div and define its width, use margin:0 auto for centering the div.
You can check a site's CSS by using Firebug or browser extensions.

How can a text responsively aligned middle vertically within a div

I know how to vertically align a text center within a div when the height of text is known. Say the text's height is 20px.
Wrap the text with a span. Style div & span.
div {
position: relative;
}
span {
display: block
position: absolute;
top: 50%;
height: 20px;
margin-top: -10px;
}
Now I want to responsively align the text. What I want is the font-size of the text be in proportion to the height of the body. Say I have the following style:
body {
font-size: 100%;
}
span {
font-size: 1.5em;
}
Then I will change the font-size of body when the window size changed. In this situation, the height of the text is not determined. Then how to vertically align the text middle?
I know I can use JavaScript to dynamically change the height and margin-top of the span. But I have to do this after the window size changed. Then there is a chance that the window size changed, then the user see the the text not in the middle, then the JS code executed and the text jumped to the middle of the div. This may not be an acceptable solution.
I want to know if there is a pure CSS solution.
I guess I can use the following style to vertically align the text center.
div {
display: table-cell;
vertical-align: middle;
}
But with this solution, the margin of the div is not rendered properly. And the semantic is not right.
So is there a perfect solution?

Another purely CSS (CSS3) solution without table display properties would be to use the transform: translateY() property.
You'll need a container div and the inner span for you text:
HTML
<div id="container">
<span>Your Text</span>
</div>
CSS
#container{
position: relative;
}
#container span{
position: absolute;
top: 50%;
transform: translateY(-50%);
/* Your font-size CSS */
}
JsFiddle example:
https://jsfiddle.net/a0m4xnex/1/
You can use the same strategy for horizontal centering as well with translateX.

Helper Div can help you vertically align div
Works best for me, you can alter it accordingly
.DivParent {
height: 100px;
border: 1px solid lime;
white-space: nowrap;
}
.verticallyAlignedDiv {
display: inline-block;
vertical-align: middle;
white-space: normal;
}
.DivHelper {
display: inline-block;
vertical-align: middle;
height:100%;
}
<div class="DivParent">
<div class="verticallyAlignedDiv">
<p>Isnt it good!</p>
</div><div class="DivHelper"></div>
</div>

With flex box, you can do this: JSBIN
Essentially, here is the code (remember to add prefixes if needed):
html, body { height: 100%; margin: 0px; }
body {
display: flex;
justify-content: center; /* horizontal centering */
}
div {
align-self: center; /* vertical centering */
}
<body>
<div>Centered</div>
</body>

Making CSS generic for image centering

Below is my CSS. It is used to centre an image. (This code works)
.imagecentre{
width: 25px;
position:relative;
margin:0 auto;
}
In order for it to work, you need to state the width. However, not all my images are 25px.
How can I make this css generic enough to accommodate all images using javascript?

If you only want to center an image in a container, you can set text-align: center on the container, regardless of what styles you have on the image:
<div style="width: 100%; border: 1px solid black; text-align: center">
<img src="https://www.google.com/logos/2012/vets_day-12-hp.jpg">
</div>​

You can use the following structure:
.image-wrapper {
display: block;
text-align: center;
}
.image-wrapper > img {
display: inline;
}

In the jquery set the widht dynamically to ".imagecentre" class
$(function(){
$(".imagecentre").css("width", $(this).width());
});
Hope this will help !!

you can use margin: 0px auto, only if the element is block element (div,p,h1 etc..) and not inline elements (images and span for example are inline elements) so you need to add text-align:center; to the parent element of the inline element..)
if it's more than one picture into the div..
img.imagecentre{
width: 25px;
display:block;
float:left;
margin: 0 10px 0 0; /* change the 10 to the space you want.. */
}
if it's one picture... (div_warp = the parent div of the image, imagecentre = the img element)..
#div_warp {
text-align center;
...
...
}
.imagecentre{
width: 25px;
}

How to vertically and horizontally align an image in a DIV without altering width/height?

Is there any way? Using Javascript/JQuery? I really really really need it. Any help is appreciated.

Don't use JavaScript when you aren't required to....
Background method
You could set it as the background...
div {
background: url(/path/to/img.png) no-repeat center center;
}
jsFiddle.
position: absolute method
Or you could position the img absolutely...
div {
position: relative;
}
div img {
position: absolute;
top: 50%;
left: 50%;
margin-left: -50px;
margin-top: -50px;
}
jsFiddle.
Where -50px is half the respected dimension of the image.
display:table-cell and vertical-align: middle method
You could also use vertical-align: middle.
div {
display: table-cell;
vertical-align: middle;
text-align: center;
}
jsFiddle.
Keep in mind this won't work < IE8.
There are even more ways to achieve this too...