This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
Vertical centering variable height image while maintaining max-width/height
So here is a question, I've got image of not fixed size, I know only that the height or width must be 200px. Now I want to put this image in div which is fixed size 200px x 200px and center it vertically and horizontally. Is it possible?
I searched a lot of questions but none of them answered mine, which should be crushial to solve them all.
Basic idea taken from this answer. Doesn't rely on display:table-cell; which isn't supported by IE7.
The Code (demo)
<div class="image-wrapper"><img src="http://example.com/image.png"></div>
.image-wrapper {
position:relative;
width:200px;
height:200px;
}
.image-wrapper img {
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
margin:auto;
}
You can make it display like a table cell:
http://jsbin.com/ijoved/1/
/* This is item wrapping each image */
.item {
height: 200px;
width: 200px;
display:table-cell;
vertical-align:middle;
text-align: center;
}
Related
This question already has answers here:
Limit flexbox height to browser window (currently it's overflowing causing vertical scroll)
(2 answers)
Closed 3 years ago.
Is there a way to make a flexbox container the same size as the window?
If you want some element, flex or not to be the same size as your window, then you are looking for viewport units, wich are vh and vw.
If you want to achieve the height of the window, you want height: 100vh;, and if you want the width of the window, you want width: 100vw;
You can also use bouth.
Use the snippet below. This will fit the element to the size of the entire page.
.flexbox-container {
background-color:blue; // just to show element filling page.
position:fixed !important;
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
height:100%;
width:100%;
}
<div class="flexbox-container"></div>
To make flexbox container the same size as the window add the below given properties to the flexbox container :
height:100vh;
width:100%;
*{
margin:0;
padding:0;
}
.flexdiv{
height:100vh;
width:100%;
background-color:lightgreen;
}
<div class="flexdiv"></div>
I am trying to bring the .day_line columns on the bottom of .lines_container. I tried to set extra .lines in the .day_line colmn and give them
position:absolute;
bottom:0
and to parent
position:relative;
but it doesn't push the lines on the bottom...
Any reason/solution?
My codes here http://jsfiddle.net/BqDfn/
Thnx!
If the container is going to keep that fixed height, you could do this:
.day_line {
height: 100%;
}
I didn't understand your question very well, but i guess you want those strips to go all the way down, if so set the Height: 100%
.day_line{
float:left;
margin-left:50px;
position:relative;
width:10px;
height:100%; // Changed to 100%
background:red;
overflow: hidden;
}
I know there are a million questions about CSS vertical alignment but I believe I have a slightly new flavour of problem.
I have a container layer and a sublayer inside that, the internal layer has fixed size, however my wrapper layer has a variable height, percentage, with a fixed minimum height.
The issue I have is that I'm able to align it vertically middle either for the min-height scenario or the percentage height scenario but not both.
I have a feeling that the solution will most likely be involving jQuery to determine the height of the wrapper layer in pixels and applying the negative margin to the internal layer on the fly, using position:rel; top:50%; but thought I would asking incase anyone has come across this before.
My css has the following properties:
#container {
height:82%;
min-height:600px;
width:938px;
}
#container div {
width:400px;
height:400px;
padding:70px;
border-radius:100%;
text-align:center;
}
Give the container layer a css property value of display: table. I think that would fix your issue.
#container {
display: table;
}
There is nothing new to this question.
Still, here is the answer:
#container {
height:82%;
min-height:600px;
width:938px;
position: relative;
}
#container div {
width:400px;
height:400px;
padding:70px;
border-radius:100%;
text-align:center;
position: absolute;
top: 50%;
left: 50%
margin-top: -270px;
margin-left: -270px;
}
Another posiibility would be to set the container to display: table and the inner div to display: table-cell and vertical-align: middle.
This question already has answers here:
Set position absolute and margin
(10 answers)
Closed 9 years ago.
I have a div along the left side of my webpage that expands to varying heights depending on its contents. Sometimes its inner contents causes the div to expand to the bottom of the page. However, I want there to be a margin at the bottom, so it doesn't actually go to the bottom of the page. How can I add the necessary margin? I tried adding margin-bottom:50px to .wrap, but it didn't work.
HTML:
<div class="wrap">Contents</div>
CSS:
.wrap {
position:absolute;
top:40px;
min-width:220px;
left:0;
}
use bottom:50px; to .wrap div. you positioned div so you can set position by left,right,top,bottom. It will be always 50px up from bottom.
.wrap {
position:absolute;
top:40px;
min-width:220px;
left:0;
bottom: 50px;
}
I had overflow:hidden; in the class wrap. That was the problem.
I'm trying to place 6 images one next to another with css,
the whole thing should be able to scale pretty well in most displays (except for mobile for the moment)
so I've made this:
http://pelloponisos.telesto.gr/galleryTest/test/gallery.php#
(apparently I'm trying to make yet another carousel)
most of my images have a bigger width than height so when I scaled them I just put
width:x% in the li container and 100% for the image width.
but the sixth image is different and it causes quite a bit of trouble
I tried setting the height too but you can only scale the images based on one of the two.
The only thing that worked so far was to put a static height in the ul and then scale in both width and height but then it's not a fluid grid.
is there any way to make all li elements have a fluid height and then scale all images based on that? or if not
is there any way to make any image with different ratio scale to the one I specify in the css?
I stripped down your code a little bit, but this seems to get closer to the idea. The trick is to set the width in the container (.upper ul li) then for the images use: max-width:100%; height:auto. Also, the padding is now in %.
#carousel{
position:relative;
}
#wrapper{
margin:0 auto;
}
#slides{
width: 100%;
}
.upper ul li{
width: 200px;
max-width: 100%;
list-style:none outside none;
float:left;
padding-bottom:5px;
padding:2%;
}
img.galleryThumbnail{
max-width:100%;
height:auto;
}
.info{
display:none;
}
#buttons img{
position:absolute;
top:90px;
}
#buttons #prev img{
position:absolute;
left:29px;}
#buttons #next img{
position:absolute;
right:21px;
}