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背景定位与填充

回答

相关问题