將文本與圖像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