Okay here is the problem, I have images of different sizes, but that doesn't really matter because their width is always greater then their height, and all images are resized to a 100px width (height still is different in each image)
I am trying to vertical align the images inside a div of 100px x 100px. I tried all kinds of things. line-height, margin's auto, table cell methods all don't work for me...
Here's the html:
<div class="kassabon_product_image">
<img src="product1.png" />
</div>
and here's the CSS
.kassabon_product_image{
float: left;
display:table-cell;
width: 100px;
height: 100px;
background-color: red;
border: 1px solid #D5D0C6;
line-height: 100px;
vertical-align:middle;
}
.kassabon_product_image img{
width: 100px;
}
.kassabon_product_image{
display:table-cell;
vertical-align:middle;
}
Remove the vertical-align from the img and that should do the trick.
see comments
.kassabon_product_image{
float: left;
text-align: center; /*using text-align:center in the outer div will center all elements inside the div*/
display:inline-block;
width: 100px;
height: 100px;
background-color: red;
border: 1px solid #D5D0C6;
line-height: 100px;
}
.kassabon_product_image img{
width: 100px;
/*vertical-align:middle;*/ /*this is the wrong place to align*/
}
Related
My question I would imagine is solved by some basic css, however I cannot seem to make it work. I simply have an larger image with text underneath. I want them to fit/scale into a fixed size of a div with a border, however I want it to be responsive in the way that I can change the div size, and it will still adjust appropriately. My problem is that the image pushes the text outside of my border div. Any help? I have a JSFiddle with a random google image for example, you can edit and repost if you'd like. Thank you.
https://jsfiddle.net/ehuwg7w2/1/
<div class="a">
<img src="https://kremalicious.com/media/gen/Free-Monkey-Breath-Not-Soylent-Green-800by1200-47ce3e.jpg">
<p>I want to be inside the div height, not outside!</p>
</div>
If You don't want to fix the height of div.a you can only use height:100%; instead of height:500px;
.a {
width: 400px;
height: 100%;
border: 1px solid black;
display: block;
margin: 0 auto;
text-align: center;
padding: 5px;
}
.a img { max-width: 100%;
}
<div class="a">
<img src="https://kremalicious.com/media/gen/Free-Monkey-Breath-Not-Soylent-Green-800by1200-47ce3e.jpg">
<p>I want to be inside the div height, not outside!</p>
</div>
But if you need div.a to have fixed height and want to fit the image and the text inside its height, you can do it like this:
.a {
width: 400px;
height: 500px;
border: 1px solid black;
margin: 0 auto;
text-align: center;
padding: 5px;
display:table;
}
.a img {
width: 100%;
display:table-row;
height:100%;
}
.a p{
display:table-row;
height:1px;
}
<div class="a">
<img src="https://kremalicious.com/media/gen/Free-Monkey-Breath-Not-Soylent-Green-800by1200-47ce3e.jpg">
<p>I want to be inside the div height, not outside!</p>
</div>
try this css
.a {
width: 400px;
height: 100%;
border: 1px solid black;
display: block;
margin: 0 auto;
text-align: center;
padding: 5px;
}
.a img { max-width: 100%;
}
Please try the following:
.a {
width: 400px;
height: auto;
border: 1px solid black;
display: block;
margin: 0 auto;
text-align: center;
padding: 5px;
}
.a img {
max-width: 100%;
}
<div class="a">
<img src="https://kremalicious.com/media/gen/Free-Monkey-Breath-Not-Soylent-Green-800by1200-47ce3e.jpg">
<p>I want to be inside the div height, not outside!</p>
</div>
Just set height to 100% instead 500px
.a {
width: 400px;
height:100%;
border: 1px solid black;
display: block;
margin: 0 auto;
text-align: center;
padding: 5px;
}
.a img { max-width: 100%;
}
Just set your parent div height to auto i.e .a height. Thus this automatically take your div and text inside of your div border.
.a {
width: 400px;
height: auto;/*Changed this to auto*/
border: 1px solid black;
display: block;
margin: 0 auto;
text-align: center;
padding: 5px;
}
.a img { max-width: 100%;
}
<div class="a">
<img src="https://kremalicious.com/media/gen/Free-Monkey-Breath-Not-Soylent-Green-800by1200-47ce3e.jpg">
<p>I want to be inside the div height, not outside!</p>
</div>
FIDDLE
.a,.c
{
width: 100px;
height: 300px;
background-color: red;
display:inline-block;
}
.b
{
background-color: gray;
display:inline-block;
border: 1px solid;
}
.main
{
width:100%;
display:inline-block;
height: 300px;
}
Why does the div b is at the bottom. Please set height at the fiddle and check. It ll grow down. Does anybody know the reason?
inline-block default value for vertical-align in CSS is baseline. You need to set the vertical-align property to fix that.
.b
{
background-color: gray;
display:inline-block;
border: 1px solid #ccc;
vertical-align:top;
}
DEMO
Add vertical-align: top; rule to class b or all the classes that have the rule display: inline-block. display: inline-block is by default bottom aligned.
you can use table-cell instead of inline-block;
.a,.c
{
width: 100px;
height: 300px;
background-color: red;
display:table-cell;
}
.b
{
background-color: gray;
display:table-cell;
position: relative;
border: 1px solid;
vertical-align:middle;
}
.main
{
width:100%;
display:table;
height: 300px;
}
Jsfiddle
inline-block behave as the block level when your browser will be re-sized larger or if your contents exceeds than its width while display: table-cell; won't. You'll also find the gap between block when you apply display: inline-block;
more can be read on this question.
question
There are rules in display: in-line block that mess it up in your case. Just change them to float: left as in this jsfiddle
.a,.c
{
width: 100px;
height: 300px;
background-color: red;
float: left;
}
.b
{
background-color: gray;
float: left;
border: 1px solid;
}
.main
{
width:100%;
float: left;
height: 300px;
}
You don't have any contents on first and last divs.
Because all the divs are displayed inline-block the default position will go to baseline. Try adding some contents to the .a and .c divs, you will see different behaviors.
When you are all setup with the contents you need to adjust the vertical-align to have your desired look.
I've looked at several other posts on vertically aligning divs but the solutions I'm finding don't seem to be working for my use case. I'd like to vertically center the div with the class "I-want-to-center-this-while-ignoring-the-other-two-divs".
I have a very simple example on jsfiddle here.
Can anyone help me out with this?
Code:
HTML:
<div id="container">
<div class="I-want-to-ignore-this"></div>
<div class="I-want-to-ignore-this float-right"></div>
<div class="I-want-to-center-this-while-ignoring-the-other-two-divs"></div>
</div>
CSS:
#container {
height: 300px;
width: 100%;
border: 2px solid black;
}
.I-want-to-ignore-this{
float:left;
height: 75px;
width: 100px;
border: 2px solid grey;
}
.float-right {
float: right;
}
.I-want-to-center-this-while-ignoring-the-other-two-divs{
border: 2px solid green;
height: 150px;
width: 150px;
margin: auto;
vertical-align: center;
}
In the comment section you specified that your container will be fixed height. The simplest solution is to just make the position of the center div relative and move it down toward the center of the box with the "top" CSS attribute.
.I-want-to-center-this-while-ignoring-the-other-two-divs{
border: 2px solid green;
height: 150px;
width: 150px;
position:relative;
top:70px;
margin: auto;
vertical-align: center;
}
Here is the updated JSFiddle.
(NOTE: If your container changes size you would need to update the variable; but being fixed this solution should work fine)
I would simply add a top margin to your center div:
.I-want-to-center-this-while-ignoring-the-other-two-divs {
border: 2px solid green;
height: 150px;
width: 150px;
margin: auto;
margin-top: 73px;
}
Since you have a fixed height on your parent container and your div has known height, this is the simplest way of doing it.
The math is: ( parent-height - (child-height+top-border+bottom-border) ) / 2
http://jsfiddle.net/audetwebdesign/7SfKW/10/
Add this to center div css:
position:absolute;
top:50%;
right:50%;
margin-top:-75px;
margin-right:-75px;
Remove margin from there
Add this to container:
position:relative;
Edit: JSFiddle
.I-want-to-center-this-while-ignoring-the-other-two-divs{
position:relative;
top:25%;
border: 2px solid green;
height: 150px;
width: 150px;
margin: auto;
}
check this: JSFIDDLE
Your container is 300px height and the div you want to center is 150px. By applying simple math to center the div you need pad 50px above and 50px below to center the div. so top:25% would do that.
Just add position and top property to your css as shown above
I have 2 divs side by side.
The left div has all different heights, how can I make the right div automatically resize to the size of left div? If the content of the right div is larger than the left div there should be a scroll bar added to it.
The HTML
<div class="wrapper">
<div class="left"><!-- PHP Generated Content --></div>
<div class="right"><!-- PHP Generated Content --></div>
</div>
The CSS
.left{
width: 70%;
float: left;
}
.right{
width: 29%;
float: right;
border: solid 1px #000000;
height: 100%;
min-height: 200px;
overflow: auto;
}
.wrapper{
height: auto;
float: left;
border: solid 1px red;
}
http://jsfiddle.net/userdude/MJrS9/
Easy equal height columns:
.left{
width: 70%;
display: table-cell;
}
.right{
width: 29%;
border: solid 1px #000000;
display: table-cell;
}
.wrapper{
display: table;
border: solid 1px red;
width: 100%;
}
http://jsfiddle.net/g5mvs/
Without giving a pre-defined height to the parent '.wrapper', there is no way (that I can see) of detecting the height set against '.left' and applying it to '.right'. Even setting the height of the right div to 'inherit' would only pick up the height which is adjusting dynamically anyway. Perhaps someone could suggest a solution using javascript.
Given this css:
#parent {
width: 100px;
height: 100px;
background-color: #090;
}
.childs {
width: 50px;
height: 50px;
background-color: #009;
border: 1px solid #999;
}
and this html:
<div id="parent">
<div class="childs"><p>aaa</p></div>
<div class="childs"></div>
<div class="childs"></div>
</div>
this is demo
http://jsfiddle.net/A3PJu/2/
I want that children divs placing in horizontal and not in vertical (as are they now), how make this?
float: left for children tags, not working in this case
You can use display:inline-block with white-space:nowrap. Write like this:
#parent {
width: 100px;
height: 100px;
background-color: #090;
white-space:nowrap;
font-size:0;
}
.childs {
width: 50px;
height: 50px;
background-color: #008;
border: 1px solid #999;
display:inline-block;
*display:inline;/* For IE7 */
*zoom:1;/* For IE7 */
white-space:normal;
font-size:13px;
vertical-align:top;
}
Check this http://jsfiddle.net/A3PJu/3/
The problem is that the width of the parent element is not big enough for 3 times 50px .childs. If you increase the #parent width to say 200px, float: left will work.