对齐文字与图像的css

可能有一千个类似的问题，但我已阅读所有我能找到的，到目前为止没有为我工作。对齐文字与图像的css

我想对齐TEXT，而不是图像 - 在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/

截图为是：

enter image description here

截图期望结果的：

enter image description here

来源

2012-12-02 David

尝试使用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-02 18:03:12 potench

我想他的意思是相对于图像的中间文本的垂直对齐方式。或不！ – Jawad

JSFiddle将F的中间放置在图像的顶部，而不是F的顶部与图像的顶部。如果你愿意，我会绘制一张图表。 – David

Trying'margin：0px;'on FileFolderImg' – potench

这里有一个工作示例：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-02 18:08:09 Omega

对齐文字与图像的css

回答

相关问题