Center image in button with css
1
I want to make a button with an image with this code
.btnWo {
position: relative;
outline: none;
border: none;
height: 150px;
width: 400px;
border-radius: 10px;
color: #FFF;
}
.btnWo img {
height: 150px;
width: 400px;
border-radius: 10px;
object-fit: cover;
}
.button-text {
position: absolute;
margin-right: 25px;
bottom: 25%;
width: 100%;
right: 0%;
text-align: right;
}
.button-text2 {
bottom: 10%;
}<div class="wo-img">
<button id="btnWo" class="btnWo">
<img src="https://i.postimg.cc/XNKnzLR0/woBg1.jpg">
<span id="woName" class="button-text">Name</span>
<span id="woTime" class="button-text button-text2">Time</span>
</button>
</div>but the image is a bit off to the right, I want it to fully cover the button
I've been trying padding solution and transform solution but it didn't work
html css
asked Nov 16 '18 at 20:47
etcN00b
82
add a comment |
1
I want to make a button with an image with this code
.btnWo {
position: relative;
outline: none;
border: none;
height: 150px;
width: 400px;
border-radius: 10px;
color: #FFF;
}
.btnWo img {
height: 150px;
width: 400px;
border-radius: 10px;
object-fit: cover;
}
.button-text {
position: absolute;
margin-right: 25px;
bottom: 25%;
width: 100%;
right: 0%;
text-align: right;
}
.button-text2 {
bottom: 10%;
}<div class="wo-img">
<button id="btnWo" class="btnWo">
<img src="https://i.postimg.cc/XNKnzLR0/woBg1.jpg">
<span id="woName" class="button-text">Name</span>
<span id="woTime" class="button-text button-text2">Time</span>
</button>
</div>but the image is a bit off to the right, I want it to fully cover the button
I've been trying padding solution and transform solution but it didn't work
html css
asked Nov 16 '18 at 20:47
etcN00b
82
1
button has default padding that need to be removed
– Temani Afif
Nov 16 '18 at 20:48
You can easily track downpadding/marginmistakes using the Web Inspector of your browser. (Right-click > Inspect)
– Minding
Nov 16 '18 at 20:55
thanks for the information, I didn't know about this before
– etcN00b
Nov 16 '18 at 21:13
add a comment |
1
1
1
I want to make a button with an image with this code
.btnWo {
position: relative;
outline: none;
border: none;
height: 150px;
width: 400px;
border-radius: 10px;
color: #FFF;
}
.btnWo img {
height: 150px;
width: 400px;
border-radius: 10px;
object-fit: cover;
}
.button-text {
position: absolute;
margin-right: 25px;
bottom: 25%;
width: 100%;
right: 0%;
text-align: right;
}
.button-text2 {
bottom: 10%;
}<div class="wo-img">
<button id="btnWo" class="btnWo">
<img src="https://i.postimg.cc/XNKnzLR0/woBg1.jpg">
<span id="woName" class="button-text">Name</span>
<span id="woTime" class="button-text button-text2">Time</span>
</button>
</div>but the image is a bit off to the right, I want it to fully cover the button
I've been trying padding solution and transform solution but it didn't work
html css
asked Nov 16 '18 at 20:47
etcN00b
82
I want to make a button with an image with this code
.btnWo {
position: relative;
outline: none;
border: none;
height: 150px;
width: 400px;
border-radius: 10px;
color: #FFF;
}
.btnWo img {
height: 150px;
width: 400px;
border-radius: 10px;
object-fit: cover;
}
.button-text {
position: absolute;
margin-right: 25px;
bottom: 25%;
width: 100%;
right: 0%;
text-align: right;
}
.button-text2 {
bottom: 10%;
}<div class="wo-img">
<button id="btnWo" class="btnWo">
<img src="https://i.postimg.cc/XNKnzLR0/woBg1.jpg">
<span id="woName" class="button-text">Name</span>
<span id="woTime" class="button-text button-text2">Time</span>
</button>
</div>but the image is a bit off to the right, I want it to fully cover the button
I've been trying padding solution and transform solution but it didn't work
.btnWo {
position: relative;
outline: none;
border: none;
height: 150px;
width: 400px;
border-radius: 10px;
color: #FFF;
}
.btnWo img {
height: 150px;
width: 400px;
border-radius: 10px;
object-fit: cover;
}
.button-text {
position: absolute;
margin-right: 25px;
bottom: 25%;
width: 100%;
right: 0%;
text-align: right;
}
.button-text2 {
bottom: 10%;
}<div class="wo-img">
<button id="btnWo" class="btnWo">
<img src="https://i.postimg.cc/XNKnzLR0/woBg1.jpg">
<span id="woName" class="button-text">Name</span>
<span id="woTime" class="button-text button-text2">Time</span>
</button>
</div>.btnWo {
position: relative;
outline: none;
border: none;
height: 150px;
width: 400px;
border-radius: 10px;
color: #FFF;
}
.btnWo img {
height: 150px;
width: 400px;
border-radius: 10px;
object-fit: cover;
}
.button-text {
position: absolute;
margin-right: 25px;
bottom: 25%;
width: 100%;
right: 0%;
text-align: right;
}
.button-text2 {
bottom: 10%;
}<div class="wo-img">
<button id="btnWo" class="btnWo">
<img src="https://i.postimg.cc/XNKnzLR0/woBg1.jpg">
<span id="woName" class="button-text">Name</span>
<span id="woTime" class="button-text button-text2">Time</span>
</button>
</div>html css
html css
asked Nov 16 '18 at 20:47
etcN00b
82
asked Nov 16 '18 at 20:47
etcN00b
82
asked Nov 16 '18 at 20:47
etcN00b
82
asked Nov 16 '18 at 20:47
etcN00b
82
asked Nov 16 '18 at 20:47
etcN00b
82
82
1
button has default padding that need to be removed
– Temani Afif
Nov 16 '18 at 20:48
You can easily track downpadding/marginmistakes using the Web Inspector of your browser. (Right-click > Inspect)
– Minding
Nov 16 '18 at 20:55
thanks for the information, I didn't know about this before
– etcN00b
Nov 16 '18 at 21:13
add a comment |
1
button has default padding that need to be removed
– Temani Afif
Nov 16 '18 at 20:48
You can easily track downpadding/marginmistakes using the Web Inspector of your browser. (Right-click > Inspect)
– Minding
Nov 16 '18 at 20:55
thanks for the information, I didn't know about this before
– etcN00b
Nov 16 '18 at 21:13
1
1
button has default padding that need to be removed
– Temani Afif
Nov 16 '18 at 20:48
button has default padding that need to be removed
– Temani Afif
Nov 16 '18 at 20:48
You can easily track down
padding / margin mistakes using the Web Inspector of your browser. (Right-click > Inspect)– Minding
Nov 16 '18 at 20:55
You can easily track down
padding / margin mistakes using the Web Inspector of your browser. (Right-click > Inspect)– Minding
Nov 16 '18 at 20:55
thanks for the information, I didn't know about this before
– etcN00b
Nov 16 '18 at 21:13
thanks for the information, I didn't know about this before
– etcN00b
Nov 16 '18 at 21:13
add a comment |
2 Answers
2
active
oldest
votes
1
Buttons (and other elements) have some default padding, which is why you see the image shifted.
Add
padding: 0;
to
.btnWo {
...
}
Some developers use a technique where the default values of all elements are "zeroed" at the beginning of the stylesheet. This frees you from such problems.
* {
padding: 0;
margin: 0;
border: 0;
}
edited Nov 16 '18 at 21:15
Intervalia
4,04811031
answered Nov 16 '18 at 20:49
Martin Heralecký
2,7422934
Thanks man, now I will use that technique :)
– etcN00b
Nov 16 '18 at 21:17
add a comment |
1
I don't know if you are willing to replace the <img> tag with setting the background of the button. If so then this code works well:
.btnWo {
position: relative;
outline: none;
border: none;
height: 150px;
width: 400px;
border-radius: 10px;
background: url("https://i.postimg.cc/XNKnzLR0/woBg1.jpg");
background-size: contain;
color: #FFF;
}
.button-text {
position: absolute;
margin-right: 25px;
bottom: 25%;
width: 100%;
right: 0%;
text-align: right;
}
.button-text2 {
bottom: 10%;
}<div class="wo-img">
<button id="btnWo" class="btnWo">
<span id="woName" class="button-text">Name</span>
<span id="woTime" class="button-text button-text2">Time</span>
</button>
</div>answered Nov 16 '18 at 21:14
Intervalia
4,04811031
I want the image to be changed using javascript by adding an id to the image tag
– etcN00b
Nov 16 '18 at 21:31
you still can by changing thebackground-imagestyle:el.style.backgroundImage = `url("${imgurl}")`;whereelis the button element.
– Intervalia
Nov 16 '18 at 21:46
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53345156%2fcenter-image-in-button-with-css%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
1
Buttons (and other elements) have some default padding, which is why you see the image shifted.
Add
padding: 0;
to
.btnWo {
...
}
Some developers use a technique where the default values of all elements are "zeroed" at the beginning of the stylesheet. This frees you from such problems.
* {
padding: 0;
margin: 0;
border: 0;
}
edited Nov 16 '18 at 21:15
Intervalia
4,04811031
answered Nov 16 '18 at 20:49
Martin Heralecký
2,7422934
Thanks man, now I will use that technique :)
– etcN00b
Nov 16 '18 at 21:17
add a comment |
1
Buttons (and other elements) have some default padding, which is why you see the image shifted.
Add
padding: 0;
to
.btnWo {
...
}
Some developers use a technique where the default values of all elements are "zeroed" at the beginning of the stylesheet. This frees you from such problems.
* {
padding: 0;
margin: 0;
border: 0;
}
edited Nov 16 '18 at 21:15
Intervalia
4,04811031
answered Nov 16 '18 at 20:49
Martin Heralecký
2,7422934
Thanks man, now I will use that technique :)
– etcN00b
Nov 16 '18 at 21:17
add a comment |
1
1
1
Buttons (and other elements) have some default padding, which is why you see the image shifted.
Add
padding: 0;
to
.btnWo {
...
}
Some developers use a technique where the default values of all elements are "zeroed" at the beginning of the stylesheet. This frees you from such problems.
* {
padding: 0;
margin: 0;
border: 0;
}
edited Nov 16 '18 at 21:15
Intervalia
4,04811031
answered Nov 16 '18 at 20:49
Martin Heralecký
2,7422934
Buttons (and other elements) have some default padding, which is why you see the image shifted.
Add
padding: 0;
to
.btnWo {
...
}
Some developers use a technique where the default values of all elements are "zeroed" at the beginning of the stylesheet. This frees you from such problems.
* {
padding: 0;
margin: 0;
border: 0;
}
edited Nov 16 '18 at 21:15
Intervalia
4,04811031
answered Nov 16 '18 at 20:49
Martin Heralecký
2,7422934
edited Nov 16 '18 at 21:15
Intervalia
4,04811031
edited Nov 16 '18 at 21:15
Intervalia
4,04811031
edited Nov 16 '18 at 21:15
Intervalia
4,04811031
4,04811031
answered Nov 16 '18 at 20:49
Martin Heralecký
2,7422934
answered Nov 16 '18 at 20:49
Martin Heralecký
2,7422934
answered Nov 16 '18 at 20:49
Martin Heralecký
2,7422934
2,7422934
Thanks man, now I will use that technique :)
– etcN00b
Nov 16 '18 at 21:17
add a comment |
Thanks man, now I will use that technique :)
– etcN00b
Nov 16 '18 at 21:17
Thanks man, now I will use that technique :)
– etcN00b
Nov 16 '18 at 21:17
Thanks man, now I will use that technique :)
– etcN00b
Nov 16 '18 at 21:17
add a comment |
1
I don't know if you are willing to replace the <img> tag with setting the background of the button. If so then this code works well:
.btnWo {
position: relative;
outline: none;
border: none;
height: 150px;
width: 400px;
border-radius: 10px;
background: url("https://i.postimg.cc/XNKnzLR0/woBg1.jpg");
background-size: contain;
color: #FFF;
}
.button-text {
position: absolute;
margin-right: 25px;
bottom: 25%;
width: 100%;
right: 0%;
text-align: right;
}
.button-text2 {
bottom: 10%;
}<div class="wo-img">
<button id="btnWo" class="btnWo">
<span id="woName" class="button-text">Name</span>
<span id="woTime" class="button-text button-text2">Time</span>
</button>
</div>answered Nov 16 '18 at 21:14
Intervalia
4,04811031
I want the image to be changed using javascript by adding an id to the image tag
– etcN00b
Nov 16 '18 at 21:31
you still can by changing thebackground-imagestyle:el.style.backgroundImage = `url("${imgurl}")`;whereelis the button element.
– Intervalia
Nov 16 '18 at 21:46
add a comment |
1
I don't know if you are willing to replace the <img> tag with setting the background of the button. If so then this code works well:
.btnWo {
position: relative;
outline: none;
border: none;
height: 150px;
width: 400px;
border-radius: 10px;
background: url("https://i.postimg.cc/XNKnzLR0/woBg1.jpg");
background-size: contain;
color: #FFF;
}
.button-text {
position: absolute;
margin-right: 25px;
bottom: 25%;
width: 100%;
right: 0%;
text-align: right;
}
.button-text2 {
bottom: 10%;
}<div class="wo-img">
<button id="btnWo" class="btnWo">
<span id="woName" class="button-text">Name</span>
<span id="woTime" class="button-text button-text2">Time</span>
</button>
</div>answered Nov 16 '18 at 21:14
Intervalia
4,04811031
I want the image to be changed using javascript by adding an id to the image tag
– etcN00b
Nov 16 '18 at 21:31
you still can by changing thebackground-imagestyle:el.style.backgroundImage = `url("${imgurl}")`;whereelis the button element.
– Intervalia
Nov 16 '18 at 21:46
add a comment |
1
1
1
I don't know if you are willing to replace the <img> tag with setting the background of the button. If so then this code works well:
.btnWo {
position: relative;
outline: none;
border: none;
height: 150px;
width: 400px;
border-radius: 10px;
background: url("https://i.postimg.cc/XNKnzLR0/woBg1.jpg");
background-size: contain;
color: #FFF;
}
.button-text {
position: absolute;
margin-right: 25px;
bottom: 25%;
width: 100%;
right: 0%;
text-align: right;
}
.button-text2 {
bottom: 10%;
}<div class="wo-img">
<button id="btnWo" class="btnWo">
<span id="woName" class="button-text">Name</span>
<span id="woTime" class="button-text button-text2">Time</span>
</button>
</div>answered Nov 16 '18 at 21:14
Intervalia
4,04811031
I don't know if you are willing to replace the <img> tag with setting the background of the button. If so then this code works well:
.btnWo {
position: relative;
outline: none;
border: none;
height: 150px;
width: 400px;
border-radius: 10px;
background: url("https://i.postimg.cc/XNKnzLR0/woBg1.jpg");
background-size: contain;
color: #FFF;
}
.button-text {
position: absolute;
margin-right: 25px;
bottom: 25%;
width: 100%;
right: 0%;
text-align: right;
}
.button-text2 {
bottom: 10%;
}<div class="wo-img">
<button id="btnWo" class="btnWo">
<span id="woName" class="button-text">Name</span>
<span id="woTime" class="button-text button-text2">Time</span>
</button>
</div>.btnWo {
position: relative;
outline: none;
border: none;
height: 150px;
width: 400px;
border-radius: 10px;
background: url("https://i.postimg.cc/XNKnzLR0/woBg1.jpg");
background-size: contain;
color: #FFF;
}
.button-text {
position: absolute;
margin-right: 25px;
bottom: 25%;
width: 100%;
right: 0%;
text-align: right;
}
.button-text2 {
bottom: 10%;
}<div class="wo-img">
<button id="btnWo" class="btnWo">
<span id="woName" class="button-text">Name</span>
<span id="woTime" class="button-text button-text2">Time</span>
</button>
</div>.btnWo {
position: relative;
outline: none;
border: none;
height: 150px;
width: 400px;
border-radius: 10px;
background: url("https://i.postimg.cc/XNKnzLR0/woBg1.jpg");
background-size: contain;
color: #FFF;
}
.button-text {
position: absolute;
margin-right: 25px;
bottom: 25%;
width: 100%;
right: 0%;
text-align: right;
}
.button-text2 {
bottom: 10%;
}<div class="wo-img">
<button id="btnWo" class="btnWo">
<span id="woName" class="button-text">Name</span>
<span id="woTime" class="button-text button-text2">Time</span>
</button>
</div>answered Nov 16 '18 at 21:14
Intervalia
4,04811031
answered Nov 16 '18 at 21:14
Intervalia
4,04811031
answered Nov 16 '18 at 21:14
Intervalia
4,04811031
answered Nov 16 '18 at 21:14
Intervalia
4,04811031
4,04811031
I want the image to be changed using javascript by adding an id to the image tag
– etcN00b
Nov 16 '18 at 21:31
you still can by changing thebackground-imagestyle:el.style.backgroundImage = `url("${imgurl}")`;whereelis the button element.
– Intervalia
Nov 16 '18 at 21:46
add a comment |
I want the image to be changed using javascript by adding an id to the image tag
– etcN00b
Nov 16 '18 at 21:31
you still can by changing thebackground-imagestyle:el.style.backgroundImage = `url("${imgurl}")`;whereelis the button element.
– Intervalia
Nov 16 '18 at 21:46
I want the image to be changed using javascript by adding an id to the image tag
– etcN00b
Nov 16 '18 at 21:31
I want the image to be changed using javascript by adding an id to the image tag
– etcN00b
Nov 16 '18 at 21:31
you still can by changing the
background-image style: el.style.backgroundImage = `url("${imgurl}")`; where el is the button element.– Intervalia
Nov 16 '18 at 21:46
you still can by changing the
background-image style: el.style.backgroundImage = `url("${imgurl}")`; where el is the button element.– Intervalia
Nov 16 '18 at 21:46
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53345156%2fcenter-image-in-button-with-css%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
1
button has default padding that need to be removed
– Temani Afif
Nov 16 '18 at 20:48
You can easily track down
padding/marginmistakes using the Web Inspector of your browser. (Right-click > Inspect)– Minding
Nov 16 '18 at 20:55
thanks for the information, I didn't know about this before
– etcN00b
Nov 16 '18 at 21:13