Need to show the div width in percentage when the image is missing. Since images are loading dynamically I cant fix the image size. All image sizes are mentioned in percentage. So how do we get the div proper width when there is no image loaded.
Here is the demo.
http://jsfiddle.net/7LfMV/2/
Try to change table-cell to inline-block - http://jsfiddle.net/7LfMV/4/
.wraptocenter {
display: inline-block;
text-align: center;
vertical-align: middle;
width: 60% /*Div should take this width*/;
background-color:#999
}
http://jsfiddle.net/7LfMV/5/
remove display: table-cell; and add an height to the div
Use min-height, min-width to set the height, width when there is no image.
Since you are using display:table-cell I guess you are centering the image inside the div, this will do it.
.wraptocenter {
display: table-cell;
text-align: center;
vertical-align: middle;
border: 1px solid red;
min-height:300px;
min.width:300px;
}
Fiddle Here http://jsfiddle.net/7LfMV/6/
Related
I am using a bootstrap carousel. Inside of this, I put images (with unknown width and heigth). The width of the carousel is also unknown because the page is responsive. The heigth is know, for large screens is 500px and for small screens is 300px.
I want to center the images horizontally and vertically in the carousel, for that, I am using this:
HTML
<div class="item">
<div class="containerOut"><div class="containerIn"><img src...></div></div>
</div>
CSS
.item
{
heigth: 500px; /*for small screens is 300px*/
position: relative;
}
.containerOut
{
display: table;
heigth: 100%;
margin: 0 auto; /*for horizontal align*/
}
.containerIn
{
display: table-cell;
vertical-align: middle;
}
img
{
max-width: 100%;
display: block;
vertical-align: middle;
}
This works fine when the img dimensions are smaller than the width and heigth. But when the heigth img is more than 500px or when the img width is more than the width of the carousel, the img overflows the carousel. And I want to resize the image to completely enter in the carousel, in large and small screens.
I try to put max-width: 100% in the containers, but not works because the display: table attribute. I need the display: table attribute to vertical align, because I try other options but anything works.
What can I do to specify the max-width and max-heigth of 100% of the carousel images? Thanks!
Does this plunker solve the problem?
Here's the summary of changes:
img
{
width: 100%;
}
.item
{
height: 500px;
background: blue; /*added a color only to see the height*/
}
Since vertical-align is already on your .containerIn div, you shouldn't need to also apply it to the images.
I have elements from a div that goes out of their container because I use line-height. But the only way I found to make vertical-align work is by using line-height.
Can anyone explain me why I have that behavior and how to fix it ?
Also do anyone have advices or best practices on how to use vertical-align ?
Here is the code :
#resources {
background-color: green;
width: 100%;
height: 64px;
}
.resourceContainer {
float: left;
text-align: center;
vertical-align: middle;
line-height: 64px;
width: 33.3%;
}
Example (Don't pay intention to images path)
You just need to reset the line-height for the inner div (because the line-height is inheritant):
.resourceContainer > div {
display:inline-block;
line-height:100%;
vertical-align:middle;
}
Demo
NOTE: The vertical-align is applied to the element itself not to the child elements. So you don't need to set vertical-align:middle for the .resourceContainer, instead set it for the direct inner div.
I would like to center and clamp the dimensions of a child div inside its parent.
<style type='text/css'>
.parent {
width: 100%;
height: 100%;
}
.child {
max-width: 100%;
max-height: 100%;
}
</style>
<div class="parent">
<div class="child">
<img src='dog.jpg' />
</div>
</div>
Here are the constraints:
The parent div is set to occupy the entire screen (of unknown size), so width:100% and height:100%.
The width and height of the child div are unknown. In one use case, the child div contains an image. In another, it contains a video.
The width and height of the child div must be constrained to the size of the parent, so max-width: 100% and max-height: 100%.
The child div must be vertically and horizontally centered inside the parent.
Ideally, this should work without javascript.
IE can be left unsupported :)
I've tried all the techniques listed in this excellent article, 'Absolute Centering in CSS' , and none of them pan out. Here's why:
Absolute centering: In order for this technique to work with a child of unknown size, you must set display:table on the child. You can then constrain the max-width of the child's contents, but not the max-height, because by CSS 2.1 rules, tables render to fit their contents.
Negative margins: Doesn't allow for variable height.
Transforms: Undesirable because it can result in blurry rendering.
Table-cell: Fails for the same reason that absolute centering fails, i.e. table rendering.
Inline-block: Doesn't work in the important case where the child is 100% width.
Flexbox: Works well until a window resize occurs, at which point you have to force a Webkit redraw to propagate the centering changes. This hack does the job, but it's still a hack. I want to believe there's a more elegant solution to this.
Best solution here is to use :before pseudo element. Check out this article on centering the unknown, http://css-tricks.com/centering-in-the-unknown/
SEE THE DEMO HERE
body,html {
width: 100%;
height: 100%;
margin: 0;
}
.container {
text-align: center;
background: #ccc;
width: 100%;
height: 100%;
}
.container:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -0.25em; /* Adjusts for spacing */
}
.image {
display: inline-block;
max-width: 100%;
max-height: 100%;
vertical-align: middle;
padding: 10px 15px;
border: #a0a0a0 solid 1px;
background: #f5f5f5;
}
You could use display:table and display:table-cell like so Jsfiddle. Though this will just center the image of the child div.
If you need to have a centered div around the image you could always add another div inside of the child div with the style display: inline-block example
i know that this question has been asked many time but none of the solution is working for me. i simply want to align one label inside one div that is associated with a twitter-bootstrap class. but it is not being aligned. I have tried horizontal alignment with this and it was working fine. without bootstrap it was working fine but with bootstrap it stopped working.
any idea how it will work ?
Address the label instead
.center{
width: 100px;
height: 100px;
border: 1px solid red;
display: table;
}
.center label {
display: table-cell;
vertical-align: middle;
}
forked jsFiddle http://jsfiddle.net/s5dJH/
Here you go
with the use of
display:table;
and
display:table-cell;
vertical-align:middle;
This way the label will always be centered, even if you resize the box
http://jsfiddle.net/s7Wb4/2/
You can use line-height to your label and set it the same height as your div. This will align it perfectly.
See this demo.
try this
http://jsfiddle.net/s7Wb4/9/
.center{
width : 100px;
height : 100px;
display : table-cell;
float:none !important;
vertical-align : middle;
border : 1px solid red;
}
I have set a CSS property table-cell for a div. I have also specified the width for the div and set overflow hidden, but because of the table-cell property the div does not care about the width. If I place any large image, it goes out of the width.
How can I use the table-cell and use the fixed width for the div?
.right{
display: table-cell;
overflow: hidden !important;
vertical-align: top;
width: 400px;
}
Strange, this JSFiddle seems to work for me.
What browser are you having problems in?
Also, to force a maximum width for your table cells, use the max-width property. You can see it here, and the code is below.
HTML:
<div class='table'>
<div class='tr'>
<div class='right'>hey</div>
</div>
</div>
CSS:
.table {
display: table;
}
.tr {
display: table-row;
}
.right{
display: table-cell;
overflow: hidden !important;
vertical-align: top;
max-width: 400px;
outline: 1px solid #888;
}
display: table-cell will follow the table sizing rules - if the content is too big, it will expand to make it fit.
Do you really need to use display: table-cell? To make it work, you'd have to wrap it in another div, give it a width of 400 and set it to overflow: hidden but that seems counter-productive.