CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user8177421
user8177421

Reputation:

How position a div in the middle of a screen, but to move with the page?

My table wont position in the center of the window, and move with the document

jquery:

$table.css('width', $(window).width() - $("this").width() / 2)

html:

<div class="tabcon">
<table>
    <tr>
        <td> </td>
        <td> </td>
        <td> </td>
        <td> </td>
    </tr>
</table>        
</div>

Upvotes: 1

Views: 376

Answers (2)

Johannes
Johannes

Reputation: 67798

If, by "middle of the screen" you mean both horizontally and vertically centered, you need the following settings. The absolute position and top/left settings first place the upper left corner of the table into the exact middle of the window, then the transform: translate(-50%, -50%) setting moves it left and up by half of the tables width and height, thereby placing the whole table into the exact middle.

Note: The vh/vw make sure it's really the middle of the screen, not of any parent element.

table {
  border: 1px solid green;
  position: absolute;
  top: 50vh;
  left: 50vw;
  transform: translate(-50%, -50%);
}
<div class="tabcon">
  <table>
    <tr>
      <td>AA </td>
      <td> BB</td>
      <td> DD</td>
      <td>FF </td>
    </tr>
  </table>
</div>

Upvotes: 0

cpugourou
cpugourou

Reputation: 781

you should use css for such things. try this one.

.tabcon{
    margin-right: auto;
    margin-left: auto;
    max-width:500px;
}

Upvotes: 1

Related Questions