1

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

我想在 DIV 中对齐文本，而不是图像。文本和图像在同一行。在试验过程中，我尝试对图像和文本应用不同的样式。我无法将文本包装在 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/

截图原样：

在此处输入图像描述

所需结果的屏幕截图：

在此处输入图像描述

4

2 回答 2

2

尝试使用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;
}​
于 2012-12-02T18:03:12.810 回答
1

这是一个工作示例： 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;
}​
于 2012-12-02T18:08:09.857 回答