CODEWITHSUNDEEP
css
Christian Luneborg
Christian Luneborg

Reputation: 511

Text & arrow on the button

http://jsfiddle.net/G6Wj6/

in CSS the text will not move up with vertical-align:center; and the left padding will not move the arrow about 10px away from the edge of the button. I tried different ways to fix this issue and couldnt solve this.

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;
}

Upvotes: 1

Views: 1566

Answers (3)

JohanVdR
JohanVdR

Reputation: 2878

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

The arrow was too close to the edge. Moved the background to the H1 element.There is no need to vertical-align anything as the border-radius and top and bottom padding are equal values.

.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%;
}

Upvotes: 0

easwee
easwee

Reputation: 15905

Reset h1 top and bottom margin that gets added by default from browser to 0 and set a line-height equal to your div height (or use padding if you are planning to have multiline text) to center the text.

Than to offset the background arrow 10px from right border, you need to move it as background of h1 and apply a margin and padding directly to the h1 tag while leaving the background color on your div element.

In the end just set background position to center right - this will keep it 10px from the right edge no matter even if you later change your div width to something other than 250px.

http://jsfiddle.net/Gmx8w/

.FindHome 
{
    background-color:#09F; 
    width:250px;
    height:50px;

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

Upvotes: 0

hunter
hunter

Reputation: 63522

Remove the height to get the text to vertically align

The background position can be changed to:

background-position: 240px center;

to get it close to the right edge

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

Upvotes: 2

Related Questions