Assalamualaikum and hi,

as promise, I post this page about How to centerise your image/video or table in the whole page using html only.

It’s not difficult if you already familiar with css and html code. Just copy and paste to your html file.

This is for style code:

<style>
html, body, #wrapper {
      height:100%;
      margin: 0;
      padding: 0;
      border: none;
      text-align: center;
   }
   #wrapper {
      margin: 0 auto;
      text-align: left;
      vertical-align: middle;
      width: 400px;
   }
   body {
	background-color: #000000;
}
</style>

This is for the table that you want to center it to the whole page. I put my image in the table.

<table id="wrapper">
    <tbody>
      <tr>
         <td><img src="anyImageFile.jpg" alt="" /></td>
      </tr>
   </tbody>
</table>

 

Result:

View in full 1600 x 900 resolution

with zoom 25 percent. Still at the center of page.

zoom 200 percent.

if you change the view from side, it will stay center.

if you change the view from top of bottom, it will stay center.

That all for today, thanks for reading. Bye :)

Related Posts with Thumbnails