将文本与图像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. 我想在DIV中对齐TEXT，而不是图像。 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. 我无法将文本包装在div中，因为它将每个DIV放在不同的行上。 so I've used a label, and set the style to that. 所以我使用了标签，并将样式设置为。

CSS: CSS：

.FileFolderStyle {
    background-color: #D9FFD5;
}
.FileFolderImg
{
    width : 32;
    height: 32;
    margin:10px 0px;
}
.FileFolderText
{
    font-family: Verdana, Geneva, sans-serif;
    font-size: 16px;
}

HTML: 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. 文件“F”的顶部必须与图像的顶部相邻。 I've spent literally hours on this minor detail but couldn't find a solution. 我花了几个小时研究这个小细节，但找不到解决方案。 Here's a JSFiddle: http://jsfiddle.net/SxCH2/46/ 这是一个JSFiddle： http ： //jsfiddle.net/SxCH2/46/

Screenshot as is: 屏幕截图如下：

在此输入图像描述

Screenshot of desired result: 所需结果的屏幕截图：

在此输入图像描述

Answer 1

Try using inline-block elements with vertical-align:top; 尝试使用带有vertical-align:top; inline-block元素vertical-align:top; . 。 Should align everything to the top of the containing <div> . 应该将所有内容对齐到包含<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. 然后添加所需的margin-top因为您的图像上已经有10px边距我想您也想将它添加到<label>中。 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. 您可能需要调整line-height以更好地控制文本对齐，因为当前行高超过字体大小，从而在文本的顶部和底部产生一些额外的空白。

Example: http://jsfiddle.net/SxCH2/59/ 示例： 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;
}

Answer 2

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. 这是一个有效的例子： http ： //jsfiddle.net/SxCH2/57/你有一个顶部和底部的余量，这将使它更难实现。 I've used display:inline . 我用过display:inline 。

HTML 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: 工作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;
}

将文本与图像css对齐

问题描述

2 个解决方案

解决方案1
2 已采纳 2012-12-02 18:03:12

解决方案2
1 2012-12-02 18:08:09

将文本与图像css对齐

问题描述

2 个解决方案

解决方案1 2 已采纳 2012-12-02 18:03:12

解决方案2 1 2012-12-02 18:08:09

解决方案1
2 已采纳 2012-12-02 18:03:12

解决方案2
1 2012-12-02 18:08:09