Question

在CSS中，文本不会与vertical-align：center一起向上移动;并且左边的填充物不会使箭头移动距离按钮边缘约10px。我尝试了不同的方法来解决这个问题并且无法解决这个问题。

HTML

<div class="FindHome">
    <h1>Find your home</h1>
</div>

CSS

.FindHome 
{
background-color:#09F; 
width:250px;
height:50px;
border:1px solid #09F; 
padding:0px 20px 0px 0px; 
border-radius:5px; 
display:block; 
margin-left:auto; 
margin-right:auto; 
background: #09F url('http://www.magnixsolutions.com/clients/tas/img/arrow.png') no-repeat; 
background-position:right; 
vertical-align: center;
text-align: center;
}

Answer 1

删除height以使文字垂直对齐

背景位置可以更改为：

background-position: 240px center;

让它接近右边缘

http://jsfiddle.net/G6Wj6/5/

Answer 2

重置h1默认情况下从浏览器添加到0的顶部和底部边距，并将line-height设置为等于div height（或使用padding如果您计划使用多行文字），请将文字居中。

要从右边框偏移背景箭头10px，您需要将其移动为h1的背景，并将边距和填充直接应用于h1标记，同时在您的{上留下背景颜色{1}}元素。

最后只需将背景位置设置为div - 即使您稍后将center right div更改为{{{}以外的其他内容，也会将其保持在右边缘10px 1}}。

http://jsfiddle.net/Gmx8w/

width

Answer 3

http://jsfiddle.net/G6Wj6/25/

箭头太靠近边缘了。将背景移动到H1元素。无需垂直对齐任何内容，因为border-radius和top和bottom padding是相等的值。

.FindHome {
background-color:#09F;
width:250px;
border:1px solid #09F;
border-radius:5px;
margin:auto;
text-align:center;
}

.FindHome h1 {
margin: 0;
padding:10px;
background:#09F url(http://www.magnixsolutions.com/clients/tas/img/arrow.png) no-repeat 225px 50%;
}

文字＆amp;按钮上的箭头

3 个答案: