DIV背景定位與填充

我有一個複選標記，我想把文本放在按鈕旁邊，但是當我做時背景：left center;它的工作原理，但我想添加填充和類似的東西，有沒有什麼辦法可以用JSFiddle提供的代碼來實現？我想將複選標記居中並將其分開一點。DIV背景定位與填充

.Button { 
    padding:10px; 
    border:1px solid #000; 
    width:auto; 
    color:#CCC 
} 

.Button:hover { 
    color:#FFF; 
    cursor:pointer; 
} 

.Check{ 
    background:url('http://67.184.73.19/Munet/Assets/Pictures/OffTick.png') no-repeat; 
} 

.Check:hover { 
    background:url('http://67.184.73.19/Munet/Assets/Pictures/Tick.png') no-repeat; 
}

HTML：

<div class="Button Check" style="background-color:rgb(69,72,77);">Test</div>

來源

2013-03-01 Moussa Harajli

如果我做了這個http://jsfiddle.net/FzxKy/2/我想在那裏有相等的填充左側。 – 2013-03-01 02:24:29

這是代碼到你的提琴到位與蜱更新：

.Button { 
    padding:10px 10px 10px 20px; 
    border:1px solid #000; 
    width:auto; 
    color:#CCC 
} 

.Button:hover { 
    color:#FFF; 
    cursor:pointer; 
} 

.Check{ 
    background:url('http://67.184.73.19/Munet/Assets/Pictures/OffTick.png') no-repeat; 
    background-position: 5px 15px; 
    OR: background-position: 5px center; 
} 

.Check:hover { 
    background:url('http://67.184.73.19/Munet/Assets/Pictures/Tick.png') no-repeat; 
    background-position: 5px 15px; 
    OR: background-position: 5px center; 
}

更新：

還要確保按GordonsBeard的答案，你瞭解爲什麼這工作：http://www.w3schools.com/cssref/playit.asp?filename=playcss_background-position&preval=10px%20200px

來源

2013-03-01 02:27:29 bensmithbwd

工作！謝謝 – 2013-03-01 02:30:13

如果字體的大小發生變化，那麼您已經對填充進行了硬編碼，以便只適合所提供按鈕的大小。通過將'center'標籤中的一個保留在'background-position'中，那麼你可以確保它至少總是垂直對齊。 – GordonsBeard 2013-03-01 02:35:07

的確如此，但同樣的道理，如果你的圖像不是正方形，或者看起來不正確，那麼你就必須對它進行硬編碼。不過，我同意在這種情況下，'5px center'是更好的選擇。故事的道德啓示;瞭解什麼'背景位置'並在你的情況下正確使用它。 – bensmithbwd 2013-03-01 02:40:27

您可以使用background-poisition標籤。

background-position: <spacefromleft> <spacefromtop>;

或者你可以在同一個背景聲明中聲明它。

https://developer.mozilla.org/en-US/docs/CSS/background-position

.Check{ 
    background:url('OffTick.png') no-repeat 10px center; 
} 

.Check:hover { 
    background:url('Tick.png') no-repeat 10px center; 
}

如果你想有文本匹配的背景，則只需確保供應正確填充您的.Button（即：對左側比你大的填充在其餘三個方面）。

來源

2013-03-01 02:25:12 GordonsBeard

看我的評論 – 2013-03-01 02:27:00

你是什麼意思的「平等填充」？你可以聲明任何東西而不是'10px'。你可以使用'0.5em'或'5％'。 – GordonsBeard 2013-03-01 02:29:35

DIV背景定位與填充

回答

相關問題