I cannot center my button and don't know why

Question

I tried to put a button in the center of my div but I couldn't though all my other contents are centered.

My code:

.middle {
  width: 100%;
  height: auto;
  text-align: center;
  position: relative;
}

.middle section {
  padding: 18vh 6%;
  line-height: 0.5;
  color: #EE6352;
  font-weight: 400;
  font-size: calc(16px + 3vw);
}

.middle ul {
  text-align: left;
}

.middle li {
  font-size: calc(12px + 2vw);
  line-height: 1.25;
  color: #2A2D34;
}

.middle p {
  font-size: calc(14px + 2.4vw);
  font-weight: 400;
  color: #2A2D34;
}

.upbutton {
  padding: 10px;
  background: #1ac6ff;
  border-radius: 50%;
  border-style: none;
  cursor: pointer;
  position: absolute;
  top: 0px;
  transition: background 0.3s;
  box-shadow: 2px 2px 5px rgba(102, 102, 102, 0.5);
}

.upbutton img {
  width: 25px;
  height: 25px;
}

.upbutton:hover {
  background: #00ace6;
  -webkit-transform: scale(0.94);
  -ms-transform: scale(0.94);
  transform: scale(0.94);
}

.upbutton:active {
  background: #0086b3;
}

<a id="middle">
  <div class="middle">
</a>
<section>
  <a href="#top"><button class="upbutton"><img src="img/arrow.png"></button></a>
  <h1>content</h1>
  <ul>
    <li>content</li>
    <li>content</li>
    <li>content</li>
  </ul>
  <p>...and more</p>
</section>
</div>

I also searched on this problem and tried to put this into the .upbutton class:

margin:0;
-ms-transform: translateX(-50%);
transform: translateX(-50%);

and it centered my button. But when I hover, it didn't center anymore.

I don't know why I'm kinda new to this. Can anyone explain and help me, tks a lot!

Your HTML is wrong.
starts inside so it should close inside that
. If there is a typing mistake, fix that and update the question. — Tushar Shahi, Jul 07 '21 at 04:34

score 1 · Accepted Answer · answered Jul 07 '21 at 04:42

1

Remember to add a transform: translateX(-50%); on the :hover selector for the button, this way it wont go back. If you change the transform property on hover it overides the existing one, so it goes back to translateX(0)

    .upbutton:hover {
  background: #00ace6;
  -webkit-transform: translateX(-50%) scale(0.94);
  -ms-transform: translateX(-50%) scale(0.94);
  transform: translateX(-50%) scale(0.94);
}

answered Jul 07 '21 at 04:42

Gabriel Hilgert

52
5

I thought i just need to put the translateX(-50%) into the hover, not the transform so it didn't work :(. Btw, thanks a lot :D – tomdapchai Jul 07 '21 at 04:51

score 0 · Answer 2 · answered Jul 07 '21 at 04:21

<head>
    <style>
        .middle
        {
        width: 100%;
        height: auto;
        text-align: center;
        position: relative;
        }
        .middle section
        {
          padding: 18vh 6%;
          line-height: 0.5;
          color: #EE6352;
          font-weight: 400;
          font-size:calc(16px + 3vw);

        }
        .middle ul
        {
          text-align: left;
        }
        .middle li
        {
          font-size: calc(12px + 2vw);
          line-height: 1.25;
          color: #2A2D34;
        }
        .middle p
        {
          font-size: calc(14px + 2.4vw);
          font-weight: 400;
          color: #2A2D34;
        }
        .upbutton
        {
          padding: 10px;
          background: #1ac6ff;
          border-radius: 50%;
          border-style: none;
          cursor: pointer;
          position: absolute;
          top:50%;
          left:50%;
          transition: background 0.3s;
          box-shadow: 2px 2px 5px rgba(102, 102, 102, 0.5);
        }
        .upbutton img{width: 25px;height: 25px;}
        .upbutton:hover{ background: #00ace6;
          -webkit-transform: scale(0.94);
                -ms-transform: scale(0.94);
                transform: scale(0.94); }
        .upbutton:active{background: #0086b3;}
    </style>
    </head>
    <a id="middle"><div class="middle"></a>
          <section>
          <a href="#top"><button class="upbutton"><img src="https://png.pngtree.com/png-vector/20190419/ourmid/pngtree-vector-up-arrow-icon-png-image_956434.jpg"></button></a>
          <h1>content</h1>
          <ul>
          <li>content</li>
          <li>content</li>
          <li>content</li>
          </ul>
          <p>...and more</p>
          </section>
          </div>

In this example you can just use 'position': absolute and top:50%,left:50%

i tried to put the 'left: 50%' because i want it on top, but it's doesn't change anything, you can run code snippet and see or you can see here: https://imgur.com/a/MT4Ri85 — tomdapchai, Jul 07 '21 at 04:27

anonsaicoder9 · Answer 3 · 2021-07-07T16:32:44.743

0

Try doing it directly in the HTML. EDIT: Try using JS.

<center><button onclick = "goToTop()" id = "buttonId"><img src="img/arrow.png"></img></button></center>
<script>
function goToTop(){
var currentLink = window.location.href;
window.location = currentLink+'#top';
}
</script>

Tell me if this doesn't work for you and I'll try to fix it. Also, please accept if this did work for you. It works for me in Chrome.

edited Jul 07 '21 at 16:32

answered Jul 07 '21 at 04:27

anonsaicoder9

107
1
12

Thanks for helping me, but it still doesn't work :( – tomdapchai Jul 07 '21 at 04:32
Wait - I just realized why it didn't work. I just updated my snippet @tomdapchai – anonsaicoder9 Jul 07 '21 at 04:46
Hmm, i don't think that has closing tag @omsrisaissrnamaha. – tomdapchai Jul 07 '21 at 04:54
Okay @tomdapchai I've updated once again. Tell me if it works. It worked for me. – anonsaicoder9 Jul 07 '21 at 16:33
Do you think you could accept my answer @tomdapchai if it worked? It would mean A LOT to me. Thank you! – anonsaicoder9 Jul 08 '21 at 20:09
i really want to do that, but i can only accept one answer due to the rule. – tomdapchai Jul 09 '21 at 01:19
Btw, when i have enough reputation, i will upvote for you :D. I greatly appreciated that you trying to help me! – tomdapchai Jul 09 '21 at 01:23

score 0 · Answer 4 · answered Jul 07 '21 at 04:41

0

If you're trying to center it just add

top: 50%; property to the .upbutton class

answered Jul 07 '21 at 04:41

alaabashiyi

56
6

it still doesn't work, but thanks for help :( – tomdapchai Jul 07 '21 at 04:44
you can see in the picture that you uploaded that the button didn't center – tomdapchai Jul 07 '21 at 04:46
i think you need to center it's parent first in order to center it in the exact middle of your page! check the parent css. – alaabashiyi Jul 07 '21 at 04:48
draw on the picture where do you want to center it exactly – alaabashiyi Jul 07 '21 at 04:49

I cannot center my button and don't know why

4 Answers4