I have a box that is a variable width and height. In my example I want to center the picture halfway down the box. What is the best way to approach this with just CSS? I'd rather not use any JavaScript if I dont have to.
Example at: http://codepen.io/wesbos/pen/Ehour
my HTML:
<div class="box">
<img src="http://placekitten.com/200/200">
</div>
My CSS:
.box {
width:400px;
height:400px;
border:1px solid red;
text-align:center;
}
You could make the DIV a table-cell and then use vertical-align property:
.box {
width:400px;
height:400px;
border:1px solid red;
text-align:center;
vertical-align:middle;
display: table-cell;
}
img{
display: inline-block;
}
Simplest way is just by making the image as background for the div centered and with no-repeat value and without the need to use text-align attribute, here is how:
HTML
<div class="box">
</div>
CSS
.box {
width:400px;
height:400px;
border:1px solid red;
background:url(http://placekitten.com/200/200) no-repeat center center;
}
You can replace the link in url() with the image you want either on the local machine or a link for the image on a web server like the one above
Related
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/
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>
I am working on a site where a 3rd party in-line HTML editor is being used (CKEditor). I have the editor control wrapped in a DIV that is relatively positioned and has a z-index that places is at the top of the visible stack. The problem is that on some pages there are images that are floating (float: right) on the right side. Some of the CKEditor styles are setting elements overflow property to hidden (overflow: hidden).
So although my containing DIV has a larger z-index than the floating image the CKEditor elements are not overflowing on top of the image. This creates the a result that looks as if the top right corner of the editor has been cut out.
Is there a way I can work around this without trying to edit CKEditor styles? Check out this example sinario:
http://jsfiddle.net/nmartin867/StHJA/
HTML
<body>
<div class="floating">
I'm floating!
</div>
<div class="container">
<div class="inner">
Why am I not overlapping?
</div>
</div>
CSS:
div{
border: solid 1px red;
}
.container{
height:300px;
position: relative;
overflow: visible;
z-index: 1;
background-color:black;
color: blue;
}
.inner{
background-color:yellow;
overflow:hidden;
/*overflow:visible;*/ <--This would work
text-align: right;
}
.floating{
color:black;
width:100px;
height:100px;
background-color:green;
float:right;
}
You could do this but I am not sure if it applies to your situation.
.inner{
background-color:yellow;
position: absolute;
width:100%;
text-align: right;
}
Alternatively when you want to override third party styles but do not wish to edit them in the third party application you can recreate the same css class in your own stylesheet and force it to overwrite the third parties by using important! eg:
float: none !important;
Have you tried absolute positioning instead? Because you are floating a DIV that is not in the same container you want to overlap, it will position outside in the body itself. Also, you did not set the z-index for the floated DIV, so it will be layered behind because it is ahead of the other container in sequential order.
div{
border: solid 1px red;
}
.container{
height:300px;
position: relative;
overflow: visible;
z-index: 1;
background-color:black;
color: blue;
}
.inner{
background-color:yellow;
overflow:hidden;
/*overflow:hidden;*/
text-align: right;
}
.floating{
color:black;
width:100px;
height:100px;
background-color:green;
/* float:right;*/
position:absolute;
top:0px;
right:0px;
z-index:2;
}
I am not sure if this is the effect you want to accomplish, but this will position the first container on the top.
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
Image center align vertically and horizontally
I'm uploading images to a php file so I can resize them to a certain width or height, which ever is smaller. The image resizer I'm using is a class from phpclasses.org and it seems to be working pretty good. The problem is, not all images are the same size. Some are wide and narrow while some are almost square. So this is causing all the images to position on the top of my div and not the middle. My thought is to have CSS perfectly center the images so the different sizes look decent when viewed, but I can get them to center horizontally but not vertically. Here's a screenshot of what I"m trying to center:
As you can see the guns are aligned on top of the div? I can't use a hard coded figure to push it center since other images will have different heights. I need some way of determining the size of the image and figuring it from there.
Here's the code for the div's that the images are in:
#product {
float:left;
margin:5px;
width:200px;
height:200px;
border:1px solid #999;
}
#product-image {
margin:2px auto;
width:194px;
height:145px;
border:1px solid #999;
text-align:center;
}
Thanks for having a look.
#product
{
width: 200px;
height: 200px;
line-height: 200px;
text-align: center;
}
#product img
{
vertical-align: middle;
max-height: 200px;
max-width: 200px;
}
Max-Height / Max-Width is used to handle images that may be too large.
For dynamic vertical alignment where you cant use position absolute i suggest using javascript for an absolute fix across all situations but you can use several techniques seen in the following Guide for vertical alignment
$(document).ready(function(){
var image = $('#product-image');
var container = $(image).parent();
var margin = (container.height() - image.height()) / 2;
image.css('margin-top', margin);
});
with the following CSS
#product
{
float:left;
margin:5px;
width:200px;
height:200px;
border:1px solid #999;
text-align:center;
}
#product-image
{
margin:2px auto;
width:194px;
height:145px;
border:1px solid #999;
}
<div id="product">
<div id="product-Inner">
<img id="product-image" src="imageURL" />
<div>
<div>
style css
#product {
float:left;
display: table;
box-sizing: border-box;
margin:5px;
width:200px;
height:200px;
border:1px solid #999;
text-align:center;
}
#product-Inner {
display: table-cell;
vertical-align: middle;
text-align:center;
}
#product-image {
box-sizing: border-box;
max-height: 100%;
max-width: 100%;
border:1px solid #999;
}
you can easily get your desired results through display:table-cell & vertical-align:middle;
CSS
#parent {
width:200px;
height:200px;
display:table;
background-color: black;
float:left;
margin:5px;
}
#parent-image {
display:table-cell;
vertical-align:middle;
text-align:center;
}
DEMO
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/