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/

屏幕截图：

enter image description here

所需结果的屏幕截图：

enter image description here

Answer 1

尝试将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 个答案: