My button is not moving centre of the page?-CodePudding

I have one page in that page left side bottom of the page one floating button is there i want to move that button left side centre of the page with fixed position ,i tried with marging-top but it's not working, can you please help me to achieve this thing

#cbtn{
    position:fixed;
    margin-top: -200px;
    width:60px;
    height:60px;
    bottom:20px;
    /* right:40px; */
    background-color:#5468ff;
    color:white;
    border-radius:50px;
    text-align:center;
    box-shadow: 2px 2px 3px #999;
}

<table id="cbtn" >
  <tr  onclick="window.open('tel:7204968541');">
    <td>
      <a href="#"  onclick="window.open('tel:7204968541');"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"  viewBox="0 0 16 16">
  <path d="M3.654 1.328a.678.678 0 0 0-1.015-.063L1.605 2.3c-.483.484-.661 1.169-.45 1.77a17.568 17.568 0 0 0 4.168 6.608 17.569 17.569 0 0 0 6.608 4.168c.601.211 1.286.033 1.77-.45l1.034-1.034a.678.678 0 0 0-.063-1.015l-2.307-1.794a.678.678 0 0 0-.58-.122l-2.19.547a1.745 1.745 0 0 1-1.657-.459L5.482 8.062a1.745 1.745 0 0 1-.46-1.657l.548-2.19a.678.678 0 0 0-.122-.58L3.654 1.328zM1.884.511a1.745 1.745 0 0 1 2.612.163L6.29 2.98c.329.423.445.974.315 1.494l-.547 2.19a.678.678 0 0 0 .178.643l2.457 2.457a.678.678 0 0 0 .644.178l2.189-.547a1.745 1.745 0 0 1 1.494.315l2.306 1.794c.829.645.905 1.87.163 2.611l-1.034 1.034c-.74.74-1.846 1.065-2.877.702a18.634 18.634 0 0 1-7.01-4.42 18.634 18.634 0 0 1-4.42-7.009c-.362-1.03-.037-2.137.703-2.877L1.885.511z"/>
</svg></a>
    </td>
  </tr>
</table>

CodePudding user response：

I used position:fixed;, top:50%; and transform: translateY(-50%);

I simplified the html by using a link tag.

I centered the icon with display:flex;, align-items:center; justify-content:center;

body {
  height: 2000px;
}

.call {
  width: 60px;
  height: 60px;
  background-color: #5468ff;
  color: white;
  border-radius: 50px;
  text-align: center;
  box-shadow: 2px 2px 3px #999;
  
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  
  display: flex;
  align-items: center;
  justify-content: center;
}

<a href="tel:7204968541" >
  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"  viewBox="0 0 16 16"><path d="M3.654 1.328a.678.678 0 0 0-1.015-.063L1.605 2.3c-.483.484-.661 1.169-.45 1.77a17.568 17.568 0 0 0 4.168 6.608 17.569 17.569 0 0 0 6.608 4.168c.601.211 1.286.033 1.77-.45l1.034-1.034a.678.678 0 0 0-.063-1.015l-2.307-1.794a.678.678 0 0 0-.58-.122l-2.19.547a1.745 1.745 0 0 1-1.657-.459L5.482 8.062a1.745 1.745 0 0 1-.46-1.657l.548-2.19a.678.678 0 0 0-.122-.58L3.654 1.328zM1.884.511a1.745 1.745 0 0 1 2.612.163L6.29 2.98c.329.423.445.974.315 1.494l-.547 2.19a.678.678 0 0 0 .178.643l2.457 2.457a.678.678 0 0 0 .644.178l2.189-.547a1.745 1.745 0 0 1 1.494.315l2.306 1.794c.829.645.905 1.87.163 2.611l-1.034 1.034c-.74.74-1.846 1.065-2.877.702a18.634 18.634 0 0 1-7.01-4.42 18.634 18.634 0 0 1-4.42-7.009c-.362-1.03-.037-2.137.703-2.877L1.885.511z"/></svg>
</a>

CodePudding user response：

I think you have to use flex for this what you can do is...

apply flex CSS to telephone's parent and write:

display:flex;
align-items:center;
justify-content:center;

this will work to make element center you can refer this link it will help you: https://www.geeksforgeeks.org/how-to-center-a-div-using-flexbox-property-of-css/

CodePudding user response：

I am not sure if i understood you correctly, but here is an example on how you can center the button on the page.

You can give it a right: 50%. This will plage the button's left side on the center of the page.
Then we add transform: translateX(-50%) to move it left by 50% of its width, which makes it perfectly centered on the page

#cbtn {
  position: fixed;
  margin-top: -200px;
  width: 60px;
  height: 60px;
  bottom: 50%;
  /* right:40px; */
  transform: translateY(-50%);
  background-color: #5468ff;
  color: white;
  border-radius: 50px;
  text-align: center;
  box-shadow: 2px 2px 3px #999;
}

<table id="cbtn">
  <tr onclick="window.open('tel:7204968541');">
    <td>
      <a href="#"  onclick="window.open('tel:7204968541');"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"  viewBox="0 0 16 16">
  <path d="M3.654 1.328a.678.678 0 0 0-1.015-.063L1.605 2.3c-.483.484-.661 1.169-.45 1.77a17.568 17.568 0 0 0 4.168 6.608 17.569 17.569 0 0 0 6.608 4.168c.601.211 1.286.033 1.77-.45l1.034-1.034a.678.678 0 0 0-.063-1.015l-2.307-1.794a.678.678 0 0 0-.58-.122l-2.19.547a1.745 1.745 0 0 1-1.657-.459L5.482 8.062a1.745 1.745 0 0 1-.46-1.657l.548-2.19a.678.678 0 0 0-.122-.58L3.654 1.328zM1.884.511a1.745 1.745 0 0 1 2.612.163L6.29 2.98c.329.423.445.974.315 1.494l-.547 2.19a.678.678 0 0 0 .178.643l2.457 2.457a.678.678 0 0 0 .644.178l2.189-.547a1.745 1.745 0 0 1 1.494.315l2.306 1.794c.829.645.905 1.87.163 2.611l-1.034 1.034c-.74.74-1.846 1.065-2.877.702a18.634 18.634 0 0 1-7.01-4.42 18.634 18.634 0 0 1-4.42-7.009c-.362-1.03-.037-2.137.703-2.877L1.885.511z"/>
</svg></a>
    </td>
  </tr>
</table>

Your markup seems a bit strange. maybe you could simple have a <a href="tel:123-456-7890">...</a>. This will call the number when people click on it. no need to add extra markup and onclick events...