I have searched for a solution for this CSS issue but the solutions I have found do not seem to work in my situation.
I am pulling in random images from Flickr. Some of them are portrait, some are landscape.
When the pictures selected include both portrait and landscape images I want to ensure they are all centred vertically.
I have read that
vertical-align:middle;
display:table-cell;
on the container should make this work, but in my case it doesn't - perhaps some of the other CSS in place is stopping this working.
I have created a JSFiddle to show my problem: http://jsfiddle.net/alexbfree/C35DR/2/
Can you help?
Alex
The code with table-cell can do the trick but you need to remove the float property:
div.flickr_badge_image {
width:23.8%;
margin: 0 1.5% 1.5% 0;
/*float:left; Remove this*/
}
Check this Demo Fiddle
Now if you want to keep the float you can also do this to center the a tags inside:
div.flickr_badge_image:before {
content:" ";
display:inline-block;
height:100%;
background:red;
vertical-align:middle;
}
div.flickr_badge_image a {
display:inline-block;
vertical-align:middle;
}
Check Demo Fiddle2
Sorry I cant comment yet.
Do you want something like this?
<center>
<div id="box-2148-0-0-0" class="module ui rounded embossed shadow yellow module-box">
http://jsfiddle.net/C35DR/4/
Related
I have an image and text that I want to center vertically using this method:
position:relative;
top:50%;
transform:translateY(-50%);
It works great on in most cases on both images and text.
However, I want to make both the text and images links (using <a href="">) AND I want to resize the image from large to small so as to look good on Retina (e.g. MacBook) screens.
Here is an example of what I have written so far, with dummy content and logo:
HTML:
<div class="logo">
<div class="logo-image">
<img src="//upload.wikimedia.org/wikipedia/commons/thumb/8/85/Smiley.svg/240px-Smiley.svg.png">
</div>
<div class="logo-text">
Logo text here
</div>
</div>
and CSS:
.logo {
height:64px;
margin:0;
padding:0;
float:left;
background-color:blue
}
.logo-image {
margin:0;
padding:0;
height:32px;
position:relative;
top:50%;
transform:translateY(-50%);
display:inline-block
}
.logo-text {
margin:0;
padding:0;
position:relative;
top:50%;
transform:translateY(-50%);
display:inline-block
}
This code is basically what I have so far (with the real logo and text substituted).
You can find a live version on jsfiddle.net here: http://jsfiddle.net/kLq28h17/
I would really appreciate the help if someone could tell me what I am doing wrong - why does the image not resize and center properly as I would like it to?
Thanks in advance for any help.
EDIT 1: Managed to get the logo resized correctly thanks to Stephan Muller. See here: http://jsfiddle.net/0f5rncqd - Now I just need to get the text centered correctly.
EDIT 2 - FIXED! : Stephan Muller managed to fix the problem. See his comments and here: http://jsfiddle.net/0f5rncqd/1/
You're styling the div that contains the image, but you're not styling the image itself in any way. The image has no way to know how to adapt to its surroundings, so it doesn't.
This rule should always resize the image to have a maximum height of whatever container around it that has a set size:
.logo-image img {
max-height: 100%;
}
http://jsfiddle.net/kLq28h17/1/
-edit-
That only fixed the image sizing. The vertical centering is a separate problem. The easiest way to fix this is not by having each in their own box and vertically centering those, but by vertically centering the logo contents as a whole and then relying on the intrinsic vertical-align-property that images already have.
By putting the image and link in a box with your translateY trick I got the contents as a whole vertically centered. To align the image and text both in the center of that box I just set vertical-align: middle to the image:
http://jsfiddle.net/0f5rncqd/1/
So I know this is another centering question but I've been roaming around Google and SO for a couple days now without a solution so I'll ask now.
What I'm trying to do is horizontally center a fluid section element with a max width that has absolutely positioned elements inside it. The problem is, as you can see in my jsFiddle, the margins take up 50% of the available space with the other 50% used by the section. What I would like to do is keep the section perfectly centered but make the margins get smaller as the browser window closes in while keeping the section from re-sizing until the edges of the window gets to it.
I'd like to keep from using any table, table-cell solution because I read on CSS-Tricks that absolutely positioning elements inside table cells can be a real pain.
Edit Basically, the goal is to have the content take up as much space as possible without resizing until the view port width forces the content to be responsive.
Thank you for any bump in the right direction.
HTML:
<section id="wrapper">
<section id="content">
<p>Absolutely positioned imgs, btns, etc. go in here</p>
</section>
</section>
CSS:
#wrapper {
position:absolute;
width:50%;
height:300px;
margin-left:25%;
margin-right:25%;
outline:1px solid red;
}
#content {
position:absolute;
width:100%;
height:100%;
max-width:500px;
background:rgb(225, 112, 75);
}
You can use
#content {
display:inline-block;
text-align:center;
}
to center your elements that will have a display:inline-block; property too.
EDIT: Now that I've better read your question, you can also use
#content {
margin:0 25%;
}
to center your second section.
here's your fiddle updated. As you can see by this fiddle everything is centered AND responsive now.
EDIT-2: Maybe you want to add some media query to reach your goal. Just add something like this at the end of your CSS file:
#media screen and (max-width:720px){
#content{width:100%; margin:0px;}
}
this says that when screen reaches the width of 720 and under, #content (and every ID/CLASS you put in there) will behave as declared.
NOTE that #media queries are not crossbrowser, you may want to add a script to make them work on every browser, I find respond.js a nice tool to do this job.
Also note that the #media queries must be placed at least under the default properties that you are about to change on screen resizing, that is why is suggested to add them at the bottom of your css file.
HERE is another fiddle with media applied (just try to resize the box to see the effect)
I wonder if this is what you were looking for: jsfiddle
I changed your wrapper to this:
#wrapper {
position: fixed;
top: 50%;
left: 50%;
margin-top: -150px;
margin-left: -200px;
width:400px;
height:300px;
outline:1px solid red;
}
So that your div now sits in the middle of the screen
Okay, I'm trying to get an image with position fixed to hide behind specific DIVs. To my understanding, this should be possible using z-index. However, I've tried everything and cannot get this to work properly.
URL: http://www.aadesigns.net/who-we-are/testimonials/
The image I'm having a problem with is the happy woman celebrating. Everything works GREAT until it gets to the bottom of the page and you'll see her overlap DIVs.
I've been in firebug for about 1.5 hours trying to figure out how to do this by manipulating z-index...
Any help would be greatly appreciated here.
EDIT* More specifically, I need the image to vanish behind the footer and the footer_bottom DIVs
Add z-index:100 to img inline style. Better convert this inline style to class like below
.testimonials img{
position:fixed;
left:50%;
margin-left:-600px;
bottom:0;
z-index:100
}
apply z-index: 100; on img
<img src="http://www.aadesigns.net/wp-content/uploads/2012/09/happycustomer1.png" alt="" title="happycustomer" style="position:fixed;left:50%;margin-left:-600px;bottom:0;z-index: 100;">
Define your #footer z-index:-1;
Add this css
#footer{
z-index:-1;
}
-------
or second option
.testimonials img{
z-index:1;
}
Not exactly sure how to phrase the question in the first place here but I'll give it a go.
I have an image that I want to fixed-scroll down the page, which I want to change colour smoothly as it enters a second div with a different coloured background. I've got the divs sorted, the images placed perfectly and the effect I want working excellently - my only problem now is that I cannot align the two images for the life of me, due to using percentages etc.
I have a working example here you'll certainly need to look at - jsFiddle - you may need to resize the page around a little bit to understand the particular alignment issue I'm having. The top "Hello" sits a set amount off-center, which I want to achieve with the second "Hello". I just can't get it to happen! Any suggestions? I've been looking at possible jQuery solutions but no luck so far.
Thanks heaps for any answers. Cheers.
Live demo link here http://jsfiddle.net/EtJBn/107/
Hi now you can do easily this
Just define some properties as like this
Css
html, body {
height:100%;
}
#top{
height:100%;
width:100%;
}
#bottom{
height:100%;
width:100%;
background-color:black;
z-index:200;
}
#topsq {
position:fixed;
height:175px;
background:url("http://mattwaymouth.com/images/hello_small.png") no-repeat center top;
left:0;
top:50px;
right:0;
z-index:1;
}
#second {
position:relative;
background: url("http://mattwaymouth.com/images/hello_small_green.png") no-repeat center 50px fixed;
left:0;
top:0;
right:0;
z-index: 200;
height:300px;
}
HTML
<div id="top">
<div id="topsq"></div>
</div>
<div id="bottom">
<div id="second"></div>
</div>
Live demo http://jsfiddle.net/EtJBn/107/
Well. Seems I found a solution, though I wouldn't call it ideal. It works well though! After Chad said to try background-position: left center; I realized if I simply put the image as background-position: center; and made the image have a bunch of blank space to one side, with enough twiddling on photoshop I'd manage to line the two up. Works great now, lines up perfectly in all my browsers.
Here's the example - jsFiddle (though you cant see much of a change in it, as it's the image itself that had to be altered.)
Thanks for the replies guys.
I have a simple HTML button which contains text and an image:
HTML: (Already on http://jsfiddle.net/EFwgN)
<span class="Button">
<img src="http://www.connectedtext.com/Image/ok.gif" />
Small Icon
</span>
CSS:
span.Button {display:inline-block; margin:2px 4px;padding:3px 6px;
background-color:#ddd; height:24px; line-height:24px;
vertical-align:middle;}
span.Button img {vertical-align:middle;}
I can't come up with a combination that would fit these requirements:
The image and text need to be vertically at the middle of the div, with the text in the middle of the image. It should be neat.
Horizontally - the image may be in any width, and the button should grow to show it.
Vertically - the image may be in any height, smaller or larger than the button. When the image is larger, I don't mind if the extra pixels are displayed or cropped, as long as it is centered.
The button is in a fixed height. Currently I use line-height to center the text.
The button should sit nicely in line with other buttons and text.
The solution needs to work on all latest versions of major browsers, and Internet Explorer 8.
Here's a jsfiddle with my current code: http://jsfiddle.net/EFwgN
(note the small icon is slightly below the center of the button)
A simple solution, if you need no less than IE8 (in Standards mode): http://jsfiddle.net/kizu/EFwgN/31/
Just add margin: -100px 0 to img, so the negative margin would eat any large height:
span.Button img {vertical-align:middle; margin:-100px 0;
position:relative; top:-2px;}
I've added position: relative; top:-2px; just to look it better :)
But if you'll need support for compatibility mode or IE lt 8 (for some reason), the thing with margin won't work. So you'll need an extra markup: http://jsfiddle.net/kizu/EFwgN/28/, but it's somewhat hacky and works only with the fixed button's height (like in your example).
Use table-based display. Requires shrinking of image due to conflict between display:table-cell; and height:24px. Very similar to your aborted attempt from the comments, but includes the required display:block; on the image: http://jsfiddle.net/shanethehat/5ck3s/
There you go, using jQuery:
$(".button img").load(function()
{
$(this).each(function()
{
sh = $(this).outerHeight();
if (sh > 24){
alert(sh);
$(this).css("margin-top", - (sh - 24) / 2 + 'px');
}
});
});
Edit: Just saw that you wanted it pure CSS, well, here's to the code gulfers out there! :)
Why not make the image shrink in the case where it is indeed taller than the button?
span.Button img {
vertical-align:middle;
max-height: 100%;
}
I probably missed some of the requirements, as setting span.Button's height to auto did the trick for me.
If what you wanted is button growing only horizontally, with vertical overflow cropped, than maybe I'd do it like this:
span.Button {display:inline-block; margin:2px 4px;padding:3px 6px;
background-color:#ddd; width:auto; height:24px; line-height:24px;overflow:hidden;
vertical-align:middle;
}
using a bit of javascript to determine img height, and then center it accordingly.
How about... this?
http://jsfiddle.net/92K8J/
Added display:inline-block to the images, and removed the fixed heightof the container.