将文本与图像css对齐

Question

可能有一千个类似的问题，但我已经阅读了所有我能找到的内容，到目前为止我没有任何工作。

我想在DIV中对齐TEXT，而不是图像。 文本和图像在同一行。 在尝试时，我尝试对图像和文本应用不同的样式。 我无法将文本包装在div中，因为它将每个DIV放在不同的行上。 所以我使用了标签，并将样式设置为。

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>

文件“F”的顶部必须与图像的顶部相邻。 我花了几个小时研究这个小细节，但找不到解决方案。 这是一个JSFiddle： http ： //jsfiddle.net/SxCH2/46/

屏幕截图如下：

在此输入图像描述

所需结果的屏幕截图：

在此输入图像描述

Answer 1

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

示例： 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

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

工作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