Aligning text with image css
Question
There are probably a thousand similar questions, but I've read all I could find and nothing worked for me so far.
I want to align the TEXT, not the image - in a DIV. The text and the image are on the same line. While experimenting, I've tried to apply different styles to both the image and the text. I cannot wrap the text in a div, because it places each DIV on separate lines. so I've used a label, and set the style to that.
CSS:
.FileFolderStyle {
background-color: #D9FFD5;
}
.FileFolderImg
{
width : 32;
height: 32;
margin:10px 0px;
}
.FileFolderText
{
font-family: Verdana, Geneva, sans-serif;
font-size: 16px;
}
HTML:
<div class="FileFolderStyle">
<img class="FileFolderImg" src="File.png"/>
<label class="FileFolderText">File name </label>
</div>
The top part of the "F" of file has to be adjacent to the top part of the image. I've spent literally hours on this minor detail but couldn't find a solution. Here's a JSFiddle: http://jsfiddle.net/SxCH2/46/
Screenshot as is:
Screenshot of desired result:
2 answers
solution1
2 ACCPTED 2012-12-02 18:03:12
Try using inline-block elements with vertical-align:top; . Should align everything to the top of the containing <div> . Then add the desired margin-top as you already have a 10px margin on your image I guess you want to add that to your <label> as well. You may need to adjust the line-height for better control of the text alignment as currently the line-height exceeds the font-size resulting in a little extra white-space at the top and bottom of the text.
Example: http://jsfiddle.net/SxCH2/59/
.FileFolderImg
{
width : 32px;
height: 32px;
margin:10px 0px;
display:inline-block;
vertical-align:top;
border:1px solid red;
content:"";
}
.FileFolderText
{
font-family: Verdana, Geneva, sans-serif;
font-size: 16px;
display:inline-block;
vertical-align:top;
margin-top:10px;
line-height:16px;
}
solution2
1 2012-12-02 18:08:09
Here's a working example: http://jsfiddle.net/SxCH2/57/ You had a margin for the top and bottom which would have made it more difficult to achieve. I've used display:inline .
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<div class="FileFolderStyle">
<img class="FileFolderImg" src="File.png"/>
<div class="FileFolderText">File name </div>
</div>
</body>
</html>
Working CSS:
.FileFolderStyle {
background-color: #D9FFD5;
}
.FileFolderImg
{
width : 32px;
height: 32px;
display:inline;
vertical-align:top;
}
.FileFolderText
{
font-family: Verdana, Geneva, sans-serif;
font-size: 16px;
display:inline;
vertical-align:top;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.