another vertical align issue inside a div - html

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.

Related

Cannot center (vertically) linked image and text

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/

Right-aligning text under images (without javascript)

I need some advice in creating a caption underneath an image, that is aligned to the right hand side. The image will change, so I can't use fixed value margins or anything like that - is this possible without javascript?
This is the basic layout, 'text-align: right' would work if I could somehow force the wrapper div to constrain to the image width, but currently it breaks past this. Any advice?
<style>
#section{height: 74%; padding-left:5%;}
#photowrapper{position:relative;}
#photo{height:100%; width:auto;}
#detailsdiv{position:relative; text-align:right;}
</style>
<div id='section'>
<div id='photowrapper'>
<img id='photo' src=../imgs/banan.jpg></img>
<div id= 'detailsdiv'>banan</div>
</div>
</div>
Maybe an obvious question but it hasn't been asked that I can see.
Just add display: inline-block; to the #photowrapper CSS
#photowrapper{
position:relative;
display:inline-block;
}
Fiddle: http://jsfiddle.net/DyrS9/
You can add display:table-cell (or table,inline-block) to #photowrapper :
#photowrapper{
position:relative;
display:table;
}
Example

How do I keep my links in my table on 1 line?

Ok so in my table cells I have an image on the left, a link that I want top aligned, and then a small description below that.
Right now I have the image on the left and the link top aligned. My problem is that the link text is carrying over below the image, instead of staying to the right of the image and cutting off at the width of the cell.
Here is my css for the link. Setting the width does nothing. I have tried setting the display to block, but then that puts the link below the image. I am very new to html so bare with my ignorance.
.jobLink {
color:black;
vertical-align:top;
width:100px;
}
EDIT 1:
Thanks for all of your suggestions. I am going to try and test this out tonight. Also, thanks for the double check on whether or not I really needed a table. The more I thought about it I really don't need a table with the way I am setting up each list item. It makes more sense to use a list.
EDIT 2:
Ok so here is the look that I am going for.
I have switched from a table to a list using everyone's advice. The data isn't really tabular.
EDIT 3
Here is the updated css I am using on the list.
.jobList {
background: white;
color:black;
width:inherit;
font-family: "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
font-size:10pt;
font-weight:bold;
list-style:none;
float:left;
padding:0;
margin:0;
}
.jobList li
{
float:left;
overflow:hidden;
width:inherit;
}
.jobList li a
{
color:Black;
vertical-align:top;
white-space:nowrap;
}
.jobList li img
{
float:left;
}
Edit 4
This is the image and here is the list item in question. Also, there is a wrapper div on the list itself and this is probably key. I have added that css.
.jobsListWrapper {
width:318px;
height:500px;
overflow:auto;
float:left;
}
<li>
<div>
<img src="/images/page.png">
<a id="5182" href="/jobs.aspx?rid=1016&jid=5182">MyJobID - This is my long title for the task that I need to complete</a>
</div>
</li>
EDIT 5
I JUST SAW IT. The wrapper is causing the list item to overflow automatically...ok so how do I only overflow vertically? Ok no that wasn't the problem.
Try adding:
position:relative;
display:block;
overflow:hidden;
To the <ul> css
and
postion:absolute;
to the <li> css.
The reason for this is that if the <ul> is absolutely positioned, it is removed from the flow of the document, which in turn means that the <li> will position relative to the viewport and ignore the overflow:hidden of the <ul>
Though I do not recommend using a table unless this is truly tabular content, the following solution should work for any container element, including table cells.
If you use a css rule of 'float: left' on the image, the image will, obviously, be floated to the left side of its container. This will make sure that the image stops pushing content bellow it and the content will simply wrap around the image.
In this case, that means the image will position itself to the left, and the link and descriptive text will be right next to that, to its right.
I am assuming the HTML inside your table cell is something along the following lines:
<img src="http://www.heliam.net/Gein/_Media/apple_icon.png">
Here is a link
<p>And here is some descriptive text</p>
Now, if that is the case, then your CSS should simply make sure that the image is floated to the left:
img {
float: left;
}
You can see all this in action right here: http://jsfiddle.net/aySEe/
Something to try might be wrapping each element in a DIV and using float. Excuse the inline CSS.
<td style="width: 15%">
<div style="float: Left">
<img alt="" src="Image.png" />
Hello!
</div>
<div style="float: Right">
<p>Hey This is something.</p>
</div>
</td>
You could then push them closer together using width on the table cell
<td style="width: 15%">
Let me know if that helps!

CSS Vertical Align Top not working - can I use a different method that is correct in coding instead?

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.

Vertical align on image and text?

I have an anchor tag setup like below
<a href='' title='' class='video-author-box hoverbox'>
<img style='height:32px;' src='IMAGE_URL' alt='' />
Username
</a>
The trouble is that the text aligns to top of image, but I want the text to align in middle of the anchor and image.
Example: http://jsfiddle.net/qZFFX/2/
Here are two simple solutions for that:
Remove float: left of the image, so it will become inline, and add vertical-align: middle
Fiddle 1
If you know the height of your image (32px in your case), set the line-height of it's container to it.
Fiddle 2
You could do this
Add a span around the username and style like so
.video-author-box span{
display:inline-block;
padding-top:8px;
}
Example: http://jsfiddle.net/qZFFX/3/
Then you can adjust the padding as you see fit.
Alternately, you could do this, without the use of span
.video-author-box{
display:inline-block;
padding-top:8px;
}
.video-author-box img{
margin-top:-6px;
}
Example 2: http://jsfiddle.net/qZFFX/5/