So you see, I'm having a big problem here. I've already tried tons of solutions, but none have been useful to me. I'm making a custom tooltip, and I'm trying to get the text shown inside it gets vertically centered, but I haven't been able to.
.tooltip {
display:none;
background:transparent url(slides/tooltip_img.png);
font-family:Helvetica;
font-size:16px;
height:157px;
width:149px;
color:#eee;
text-align:center;
line-height:20px;
}
And this here is how I'm trying to make it center vertically:
<div id="tooltip" style="height:62px;margin-left:46px;margin-top:102px;vertical-align:middle">
<img src="supahsource.png" title="Tooltip info"/>
Anyway, I don't get the result I'm trying, can anybody help me out? Thanks a lot.
vertical-align only works with Table elements. Try using position: absolute and if you really want to use vertical-align, use display: table-cell; on the block you wish to vertically align.
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/
i can never seem to get the vertical align attribute to work. i have a simple div with a small picture inside it (40px high) and i need the text to align vertically in the middle. can somebody shed some light on what im doing wrong here? thanks
HTML:
<div id="back"><img src="../../images/back-button-1.jpg" style="padding-right:10px;" width="40" height="40" alt="back" />Back</div>
CSS:
#back{
width:auto;
height:40px;
background:#C36;
font-family:arial,verdana,helvetica,sans-serif;
font-size:15px;
color:#333333;}
Add this rule:
#back img {
vertical-align:middle;
}
jsFiddle example
Using "line-height" set to the height of the container on an inline element works well in this case as well, but only if it is one line of text.
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/
I have put together an example bit of code as I am trying to get 2 images of different sizes to be aligned at the top such as shown below:
HTML
<div id="test">
<div class="social-media">
<img src="http://www.ok.gov/ltgovernor/images/Facebook-icon.png" width="120"/>
<img src="http://semanticweb.com/files/2012/01/twitter_logo.jpg" width="50" />
</div>
</div>
CSS
test {
width:980px;
margin-left:auto;
margin-right:auto;
position:relative;
}
.social-media {
position:absolute;
background-color:#000;
right:0;
top:0;
vertical-align:top !important;
}
I realise now after reading a few posts online that vertical-align will not work in divs and solutions have been to use absolute positioning instead. The only issue is that I am already using absolute postioning for the images parent div.
Would it be good practice to do absolutes inside a parent div that is also an absolute.
However if i was to put an absolute positiong on the img then all img's would stack ontop of each other unless I was to specify each and every img with a class.
So my next thought was to put a float on img within the div. I just wanted to know if this is good practice or if anyone can tell me a cleaner way of doing this?
Also, if I were to want the images to be centrally aligned, how would this be done as the float method works in the sense of getting the images to align at the top but I am not sure how I could align centrally or maybe at the bottom?
Put overflow:auto on the social-media div then add float:left to your images.
Keep in mind you can also use negative integers like vertical-align: -1px; to go up -1px
For more details see CSS vertical-align Property and try it out here.
I am trying to achieve something and can't manage to do so.
I have a div with fixed HEIGHT & WIDTH.
I want the text to be centered vertically.
up till now I managed to do so:
<div>
<a>this is a long text</a>
</div>
and it will look like this
-------------
This is a long
text
-------------
which is great
But if the line won't wrap it will look like this
------------
This is short
-------------
.the-div
{
height:29px;
line-height:14px !important;
}
.the-a
{
font-size:12px;
}
I need this to be valigned as well!
I tried using line-height and to play with is with JS to understand if its wrapping or not and then changing the line-height accordingly
Thanks for the help
try this example
http://jsfiddle.net/fcalderan/3HBC4/1/
.the-a
{
font-size:12px;
vertical-align: middle;
}
if you make the line-height same as the height of div, it will automatically vertical centered
the-div
{
height:29px;
line-height:29px !important;
}
To be vertical aligned as well, you'll need to use some display as table hacks. This will allow you to use vertical-align:middle;, achieving the look I believe you desire.
Example
div a{
margin-top:auto;
margin-bottom:auto;
}