Goal:
A wrapper div that is fixed height and variable width. This wrapper contains a picture, which will have variable height and width (Could be portrait or landscape).
The picture should resize automatically to be either 90% of the wrapper's width or 90% of the wrapper's height, whichever is the smallest. It should also be constantly centered, both horizontally and vertically.
It's somewhat hard to describe via text, so see the manipulated screenshot below for an example of three possible images, when the wrapper is three different possible widths:
What I've Got Now:
I'm using a structure of: div->span->div->img.
I've got the sizing working completely. I've got the horizontal positioning working. I've got the vertical positioning working when the image is constrained by height.
When the image starts to resize smaller (constrained by width), the vertical positioning doesn't work. This is because the inner div isn't resizing.
Code
Working Fiddle
HTML:
<div class="selected-thumb">
<span>
<div>
<img src="http://www.andymercer.net/wp-content/uploads/2014/01/tree26-300x225.jpg"></img>
</div>
</span>
</div>
<div class="selected-thumb">
<span>
<div>
<img src="http://www.andymercer.net/wp-content/uploads/2014/03/ada_complete-300x171.png"></img>
</div>
</span>
</div>
<div class="selected-thumb">
<span>
<div>
<img src="http://www.andymercer.net/wp-content/uploads/2013/12/employee_randy_fake-209x300.jpg"></img>
</div>
</span>
</div>
CSS:
.selected-thumb {
text-align: center;
background: #c0c0c0;
border: #a0a0a0 solid 1px;
margin: 20px;
height:200px;
}
.selected-thumb span {
display:block;
height:200px;
}
.selected-thumb span div {
position:relative;
max-height:90%;
max-width:90%;
height:200px;
top:50%;
margin:0 auto;
}
.selected-thumb span div img {
width:auto;
height:auto;
max-height:100%;
max-width:100%;
position:relative;
top:-50%;
}
What I Need:
I need to fix the vertical placement, and I am running into a wall. I've tried using display:table, I've tried creating a pseudo-element and using display:inline-block. I can't find a way to accomplish what I need. All useful info will be upvoted regardless of which I select as correct.
Check this:
html,body {height:100%;}
.selected-thumb {
text-align: center;
background: #c0c0c0;
border: #a0a0a0 solid 1px;
margin: 20px;
height:200px;
line-height: 200px;
}
.selected-thumb img {
display: inline-block;
vertical-align: middle;
width:auto;
height:auto;
max-height:90%;
max-width:90%;
}
fiddle: http://jsfiddle.net/Ts4W9/2/
Related
JS FIDDLE Example
http://jsfiddle.net/2adv2/
Update on Vertical Align
Vertical Align works until the max-width is not reached. When the image width is at max width, and if I resize to increase the window height, the image doesn't shift to the middle of the div, but the div expands.
I am facing 2 issues
Vertical align is not happening
The image moves down a little from the div and kinda overflows when I resize the window a lot - squishing the webpage vertically.
Tell me why this happens. Also vertical align just wont work.
CSS:
#heroimg {
position:relative;
top:0%;
height:auto;
vertical-align:middle;
max-height:100%;
max-width:100%;
}
#hero {
position:relative;
top:0%;
bottom:40%;
height:40%;
text-align:center;
overflow:hidden;
background-color:yellow;
}
HTML:
<div id='hero'><img id="heroimg" src="assets/images/dfb.jpg"></div>
I'm afraid you can't use vertical-align to vertically center things in containers.
However, you can use display:table and display:table-cell with vertical-align:middle to work as you are expecting.
This requires two wrapping div tags around the image that you want to center.
The following illustrates the basic technique:
CSS:
#outer-wrapper {
display: table;
width: 100%;
}
#inner-wrapper {
display: table-cell;
vertical-align: middle;
}
img {
margin: 0 auto;
max-width: 100%;
height: auto;
}
HTML:
<div id="outer-wrapper">
<div id="inner-wrapper">
<img src="image.jpg">
</div>
</div>
See fiddle with this technique applied to your example: http://jsfiddle.net/2adv2/1/
add max-height to the #hero so the div resizes together with the img
#hero {
position:relative;
top:0%;
bottom:40%;
max-height:40%;
text-align:center;
overflow:hidden;
background-color:yellow;
}
I have a div with some images inside:
<div>
<img><img><img><img>
<div>
The images would normally display in a row, however I have used some CSS to change their relative positions from left (-7px for the second one, -14px for the third, etc.) so they are stacked partially over each other. Is there a way to make the div to be only the width of the partially stacked images, rather than the width of where the images would be if they weren't moved?
If the content isn't dynamically generated then you can just manually set the div to the width you want using css.
<div class="overlap">
<img><img><img>
</div>
.overlap {
width: 200px;
}
If you set the css as
div img {position: absolute;}
they will all overlap without needing any repositioning.
It will set the size of the img, and div to 0 so it will only work if there is nothing below it on the page.
To center the images try wrapping them in another div. Not sure what you have in all of your css but you can get the idea anyway. Something Like:
.overlap{
width:200px;
outline:1px solid red;
position:relative;
}
.overlap img{
outline:1px solid blue;
display:block;
height:50px;
width:25px;
position:relative;
float:right;
}
.overlap img{
left:-7px;
}
.overlap img + img{
left:-14px;
}
.overlap img + img + img{
left:-21px;
}
#center{
width:100px;
margin:0px auto;
}
<div class="overlap">
<div id="center">
<img><img><img>
</div>
</div>
Creating a gallery of divs with links images and text. problem is- can't get the inner wrapper to center everything. margin:0 auto; isnt working because i havent set a width for it. but i want the width to change with different browser sizes but that the inner .prjctwrap divs will be centered within it. here's my markup:
HTML :
<div id="wrapper">
<div id="innerprjctwrap">
<div class="prjctwrap">
<a href="http://www.google.com">
<div class="imageCont" style="background-image:url(image1.jpg);">
</div>
<div class="text">Text Text Text</div> </a> </div>
...this reapeats from prjctwrap with other images, text and links
</div></div>
CSS:
#wrapper {
background-color: #FFFFFF;
width:100%;
height:1000px; }
.prjctwrap {
display:inline-block;
width: 130px;
height:180px;
overflow:hidden;
margin:15px; }
.prjctwrap .imageCont{
width: 130px;
height: 100px;
background-size: cover; }
.prjctwrap .text {
text-align: center;
color: black;
text-decoration: none;
height:80px; }
.prjctwrap a {
text-decoration:none; }
#innerprjctwrap {
margin:0px auto; }
You haven't set any size on the #innerprjctwrap element, so it will have the default setting width: auto;. That means that it will use the full width available, so you can't see that it's actually centered.
Set a width on the element, and you will see that it is centered:
#innerprjctwrap {
width: 130px;
margin: 0 auto;
}
If you want to use text alignment to center the content inside the element, you shouldn't use margins to center the element, you should use text-align to center what's inside it:
#innerprjctwrap {
text-align: center;
}
Add a width for #innerprjctwrap other ways margin:0 auto; not detected
Eg:
#innerprjctwrap {
margin:0px auto;
width:200px;
}
Using JsFiddle for explaining such problems will be much clear.
Is this fiddle what you want?
If so, then you want is actually to center elements inside #innerprjctwrap like #Guffa says, simply add:
#innerprjctwrap{
text-align:center;
}
add width. if no progress, try removing 'px'. if there's still no progress, use padding in the wrapper div.
I have logo and logo name as text to display. Please see the image below to understand my problem clearly.
Most tips and answers found are using absolute positioning but this doesnt match my requirements.
div class boxes:
Yellow: container , Green: for logo, blue: logo text or logo name as text
All the correct display to achieve are found on the right side of the sample div layout image above.
Problem Summary:
Everything will be working fine if both div(logo and logo text) are floated left BUT the only problem is its floated on top. How will I display the "logo text" at the bottom of the "container"?
Is this possible without positioning the "logo text" to absolute?
For now the div container, logo, and logo text classes are floated left.
I think display: inline-block with vertical-align: bottom; gets you where you want to be;
<div class=logo>logo</div>
<div class=name>name</div>
.logo {
display: inline-block;
vertical-align: bottom;
width: 200px;
height: 200px;
background-color: red;
}
.name {
display: inline-block;
vertical-align: bttom;
width: 300px;
height: 50px;
background-color: blue;
}
Here it is in action: http://jsfiddle.net/hajpoj/CDBHT/
Resize the result window to see the effect.
DEMO
Making your child div's inline-block is the solution. Also you will need to give a max-width and min-height attributes to your container so that it re-sizes to fit your contents. See this solution-
HTML-
<div id="con">
<div id="lo"></div>
<div id="tex"></div>
</div>
CSS-
#con
{
max-width:310px;
min-height:140px;
background:yellow;
border: 1px solid aqua;
}
#lo
{
width:140px;
height:140px;
background:green;
display:inline-block;
vertical-align:bottom;
}
#tex
{
width:160px;
height:60px;
background:orange;
display:inline-block;
vertical-align: bottom;
}
I have a box of fixed width and height, I have a link in it, i want to display the link in the center of box (vertically). Please see this jsfiddle to see the problem
Demo: http://jsfiddle.net/a5hP3/
Here's code anyway:
HTML:
<div class="box">
put it down, in center of box
</div>
CSS:
.box
{
width: 200px;
height: 300px;
border:1px solid green;
}
.box a{
vertical-align:middle; //doesnt work
}
You can set the line-height equal to the height:
.box
{
width: 200px;
height: 300px;
border:1px solid green;
line-height: 300px;
}
http://jsfiddle.net/a5hP3/3
There are two solutions:
First you can set the line-height of your div equal to its height. Unfortunately for this, you need to remember to update the line-height whenever you change the div's height dimension.
Another solution is to place your text within a div that's styled to be displayed as a table-cell with a vertical alignement. This would be similar to placing your text within a table and setting the vertical alignment on its cells:
<div style="outline:#000 thin solid; display:table-cell; height:300px; width:700px; vertical-align:middle">
Some Text
</div>
SEE DEMO
CSS:
.box
{
width: 200px;
height: 300px;
border:1px solid green;
position:relative;
}
.box a{
display:block;
position:absolute;
top:45%;
left:10% /* adjust based on link width */
}
Make the line-height the same as the container height...
http://jsfiddle.net/a5hP3/1/
Note: This solution only works when there is one line of text.
This is a problem better handled by javascript. (I'm using jQuery here):
http://jsfiddle.net/a5hP3/15/