Can you anyone please help me to code this below one
This is my current code
<div id="loginBtn" class="loginBtn"><span>Log in</span></div>
div tag have loginBtn class and span tag having "log in" text in html page
.loginBtn {
background:url(images/loginBtn-center.jpg) repeat-x;
width:175px;
height:65px;
margin:20px auto;
border-radius:10px;
-webkit-border-radius:10px;
box-shadow:0 1px 2px #5e5d5b;
}
I created the button using 1px image. Now i am unable to place the "log in" text middle of the image can any one help me complete the code
text is displaying left top corner. Please help me.
Sometime it is fixed by the Padding .. if you can play with that, then, it should fix your problem
<style type=text/css>
YourbuttonByID {Padding: 20px 80px; "for example" padding-left:50px;
padding-right:30px "to fix the text in the middle
without interfering with the text itself"}
</style>
It worked for me
This is more predictable then "line-height"
.loginBtn {_x000D_
background:url(images/loginBtn-center.jpg) repeat-x;_x000D_
width:175px;_x000D_
height:65px;_x000D_
margin:20px auto;_x000D_
border-radius:10px;_x000D_
-webkit-border-radius:10px;_x000D_
box-shadow:0 1px 2px #5e5d5b;_x000D_
}_x000D_
_x000D_
.loginBtn span {_x000D_
display: block;_x000D_
padding-top: 22px;_x000D_
text-align: center;_x000D_
line-height: 1em;_x000D_
}
_x000D_
<div id="loginBtn" class="loginBtn"><span>Log in</span></div>
_x000D_
.loginBtn {
display: flex;
align-items: center;
justify-content: center;
}
I think you can use Padding like: Hope this one can help you.
.loginButton {
background:url(images/loginBtn-center.jpg) repeat-x;
width:175px;
height:65px;
margin:20px auto;
border-radius:10px;
-webkit-border-radius:10px;
box-shadow:0 1px 2px #5e5d5b;
<!--Using padding to align text in box or image-->
padding: 3px 2px;
}
You can use text-align: center; line-height: 65px;
CSS
.loginBtn {
background:url(images/loginBtn-center.jpg) repeat-x;
width:175px;
height:65px;
margin:20px auto;
border-radius:10px;
-webkit-border-radius:10px;
box-shadow:0 1px 2px #5e5d5b;
text-align: center; <--------- Here
line-height: 65px; <--------- Here
}
Source: Stackoverflow.com