JavaScript – Div is not fully centered in the middle of the page

  • Home / Blog / JavaScript – Div…

JavaScript – Div is not fully centered in the middle of the page

I’m using turn triangles to create a flipbook inside a web page and I want to keep it in the middle. The webpage now looks like: https://imgur.com/a/fL2YUCP.

This is HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<head>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/turn.min.js"></script>
<link rel="stylesheet" href="css/test.css" />
</head>
<body>

<div class="flipbook-viewport" style="display: inline-block;">
    <div class="container" style="display: inline-block;">
        <div class="flipbook" style="display: inline-block;">
            <div style="background-image:url(brochure/Brochure_Main.jpeg)"></div>
            <div style="background-image:url(brochure/Brochure_Mobile_Ordering.jpg)"></div>
      <div style="background-image:url(brochure/Brochure_POS_Automobile.jpg)"></div>
            <div style="background-image:url(brochure/Brochure_POS_Beauty_Wellness.jpg)"></div>
            <div style="background-image:url(brochure/Brochure_POS_Food_Beverage.jpg)"></div>
            <div style="background-image:url(brochure/Brochure_POS_Hair_Salon.jpg)"></div>
            <div style="background-image:url(brochure/Brochure_POS_Minimart.jpg)"></div>
            <div style="background-image:url(brochure/Brochure_POS_Mobile_Phone_Shop.jpg)"></div>
            <div style="background-image:url(brochure/Brochure_POS_Retail.jpg)"></div>
            <div style="background-image:url(brochure/Brochure_POS_Wholesale.jpg)"></div>
        </div>
    </div>
</div>

<div class="buttons" style="display: inline-block;">
                          <button type="button" onclick="thePreviousPage()" class="button">Previous</button>
              <button type="button" onclick="theHomePage()" class="button">Home</button>
                          <button type="button" onclick="theNextPage()" class="button">Next</button>
</div>

<script type="text/javascript">

    // Create the flipbook

  $('.flipbook').turn({

            // Elevation

            elevation: 50,

            // Enable gradients

            gradients: true,

            // Auto center this flipbook

            autoCenter: true

    });

  function thePreviousPage()
  {
    $('.flipbook').turn('previous');
  }

  function theHomePage()
  {
    $('.flipbook').turn('page',1);
  }

  function theNextPage()
  {
    $('.flipbook').turn('next');
  }

</script>

</body>
</html>

This is CSS:

body{
    overflow:hidden;
    background-color:#fcfcfc;
    margin:0;
    padding:0;
}

.flipbook-viewport{
    overflow:hidden;
    width:100%;
    height:100%;
  margin-right: -50%;
}

.flipbook-viewport .container{
  position: absolute;
  margin: auto;
  top: 50%;
  left: 50%;
  height: 90%;
  width: 90%;
}

.flipbook-viewport .flipbook{
    width:90%;
    height:90%;
  top: -50%;
  left: -50%;
}

.flipbook
{
  transform: translate(-50%, -50%);
}

.flipbook-viewport .page{
    width:461px;
    height:600px;
    background-color:white;
    background-repeat:no-repeat;
    background-size:100% 100%;
}

.flipbook .page{
    -webkit-box-shadow:0 0 20px rgba(0,0,0,0.2);
    -moz-box-shadow:0 0 20px rgba(0,0,0,0.2);
    -ms-box-shadow:0 0 20px rgba(0,0,0,0.2);
    -o-box-shadow:0 0 20px rgba(0,0,0,0.2);
    box-shadow:0 0 20px rgba(0,0,0,0.2);
}

.flipbook-viewport .page img{
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    margin:0;
}

.flipbook-viewport .shadow{
    -webkit-transition: -webkit-box-shadow 0.5s;
    -moz-transition: -moz-box-shadow 0.5s;
    -o-transition: -webkit-box-shadow 0.5s;
    -ms-transition: -ms-box-shadow 0.5s;

    -webkit-box-shadow:0 0 20px #ccc;
    -moz-box-shadow:0 0 20px #ccc;
    -o-box-shadow:0 0 20px #ccc;
    -ms-box-shadow:0 0 20px #ccc;
    box-shadow:0 0 20px #ccc;
}

.button{
  position: relative;
    align-items: center;
}

I have tried to use the Flex Box, justifying the Content Center but the Flipbook will still not be fully centered.

These are the documents for the turn: http://www.turnjs.com/turnjs4-api-docs.pdf.

Is it to center the middle anyway so it’s in the middle of the web page?

Write a Comment

Your email address will not be published. Required fields are marked *

x