Home > Net >  how to center a inline block
how to center a inline block

Time：11-28

Hi i have a simple question.

well i think its simple to someone that knows what there doing

I am trying to center the last tile "tile 5"

Im kinda new at all this stuff, i am just playing around to see what can be done

Thanks

All the code is here................................................................................ 

console.clear();

var $allTiles = $(".js-tile");
var $Tiles = $(".Tiles");

$(".Tiles > .Tile").each(function(i, el) {  
  
  var $tile = $(el);
  var target = $tile.children(".Tile-flyout");
  
  // get each items flyout height with extra buffer
  var thisHeight = target.children(".Tile-content").outerHeight() 20;
  
  // Create ne timeline in paused state
  var tl = new TimelineMax({
    paused: true,
    reversed:true//,
    //forward: true // not a valid GSAP property 
  });

  TweenLite.set(target, {
    height:0,
    autoAlpha: 0,
    display: "none"//,
  });    
  // animate stuff
  tl.to(target, 1, {
    delay: 0.6,
    height: thisHeight,
    autoAlpha: 1,
    display: "block",
    ease: Cubic.easeInOut,
    overwrite: "none"
  });
  // store timeline in DOM node
  el.animation = tl;
  
  // create element event handler
  $(el).on("click", function(event) {
    
    event.preventDefault();
    
    var that = this;
    var currentTile = $(this);
    
    $(".Tiles > .Tile.is-expanded").not(this).each(function(i, element){
        console.log('reverse?');
        element.animation.reverse();
        currentTile.removeClass("not-expanded");
    }); 
     
     $allTiles.not(currentTile).removeClass("is-expanded");
     $allTiles.not(currentTile).removeClass("not-expanded");
    
     currentTile.toggleClass("is-expanded");

     if (this.animation.reversed()) {
          console.log('1');
          $allTiles.not(currentTile).addClass("not-expanded");
       
          this.animation.play();
          target.removeClass("reversing");
     } else {
          console.log('2');
          this.animation.reverse();
          target.addClass("reversing");
     }
  });  
});
/**
 * Variables
 */
/**
 * Scaffolding
 */
html {
  background: #fff;
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

body {
  font-family: "Source Sans Pro", sans-serif;
  margin: 0 auto 1rem;
  max-width: 64em;
  overflow: hidden;
}

/**
 * Component: Tiles
 */
.Tiles {
  font-size: 0;
  margin-left: 0.5rem;
  margin-right: 0.5rem;
}

.Tile {
  display: inline-block;
  font-size: 1rem;
  vertical-align: top;
  width: 100%;
}

.Tile > .Tile-content {
  cursor: pointer;
}

.Tile-content {
  background: #7FDBFF;
  border-radius: 0.375rem;
  color: #005b7f;
  font-size: 1.5rem;
  margin: 1rem 0.5rem 0;
  padding: 4rem 1rem;
  text-align: center;
}

.Tile-flyout .Tile-content {
  background-color: #F173D5;
  color: #5c0949;
  width: 70%;
  /* margin: auto; */
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.Tile-flyout {
  /*display: none;*/
  /* do not use it causes issues for show hide */
  position: relative;
  /* i added the below */
  visibility: hidden;
  /* hides all .Tile-flyout on load so GSAP autoAlpha can do its thing */
  height: auto;
  /* tell the browser that initial height is auto */
  overflow: hidden;
  /* required when anaimting height properly */

  width: 70%;

}

.Tile.is-expanded .Tile-flyout {
  /*display: block;*/
  /* do not use */
}

.Tile.not-expanded .Tile-content {
  cursor: default;
  opacity: 0.5;
}

.Tile-flyout:before {
  background: #F173D5;
  content: "";
  left: 50%;
  margin-left: -0.5rem;
  position: absolute;
  height: 1rem;
  top: 0.5rem;
  /* was -2 */
  transform: rotate(45deg);
  width: 1rem;
  z-index: 2;
}

/**
 * Breakpoint layout changes
 */
@media (min-width: 30em) {
  .Tile {
    width: 50%;
  }

  .Tile-flyout {
    width: 200%;
  }

  .Tile:nth-child(2n 1) .Tile-flyout {
    margin-left: 0%;
  }
  .Tile:nth-child(2n 1) .Tile-flyout:before {
    left: 25%;
  }

  .Tile:nth-child(2n 2) .Tile-flyout {
    margin-left: -100%;
  }
  .Tile:nth-child(2n 2) .Tile-flyout:before {
    left: 75%;
  }
}
@media (min-width: 48em) {
  .Tile {
    width: 33.3333333333%;
  }

  .Tile-flyout {
    width: 300%;
  }

  .Tile:nth-child(3n 1) .Tile-flyout {
    margin-left: 0%;
  }
  .Tile:nth-child(3n 1) .Tile-flyout:before {
    left: 16.6666666667%;
  }

  .Tile:nth-child(3n 2) .Tile-flyout {
    margin-left: -100%;
  }
  .Tile:nth-child(3n 2) .Tile-flyout:before {
    left: 50%;
  }

  .Tile:nth-child(3n 3) .Tile-flyout {
    margin-left: -200%;
  }
  .Tile:nth-child(3n 3) .Tile-flyout:before {
    left: 83.3333333333%;
  }
}
<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>CodePen - Animate Height GSAP</title>
  <meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="./style.css">

</head>
<body>
<!-- partial:index.partial.html -->
<div class="Tiles">
  <div class="Tile js-tile">
    <div class="Tile-content">
      Tile 1  
    </div>
    <div class="Tile-flyout">
      <div class="Tile-content">
        Flyout 1
      </div>
    </div>
  </div>
  <div class="Tile js-tile">
    <div class="Tile-content">
      Tile 2
    </div>
    <div class="Tile-flyout">
      <div class="Tile-content">
        Flyout 2
      </div>
    </div>
  </div>
  <div class="Tile js-tile">
    <div class="Tile-content">
      Tile 3
    </div>
    <div class="Tile-flyout">
      <div class="Tile-content">
        Flyout 3
      </div>
    </div>
  </div>
  <div class="Tile js-tile">
    <div class="Tile-content">
      Tile 4
    </div>
    <div class="Tile-flyout">
      <div class="Tile-content">
        Flyout 4
      </div>
    </div>
  </div>
  <div class="Tile js-tile">
    <div class="Tile-content">
      Tile 5
    </div>
    <div class="Tile-flyout">
      <div class="Tile-content">
        Flyout 5
      </div>
    </div>
  </div>

</div>
<!-- partial -->
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js'></script><script  src="./script.js"></script>

</body>
</html>
<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

You just need add text-align: center; to .Tiles class.

console.clear();

var $allTiles = $(".js-tile");
var $Tiles = $(".Tiles");

$(".Tiles > .Tile").each(function(i, el) {

  var $tile = $(el);
  var target = $tile.children(".Tile-flyout");

  // get each items flyout height with extra buffer
  var thisHeight = target.children(".Tile-content").outerHeight()   20;

  // Create ne timeline in paused state
  var tl = new TimelineMax({
    paused: true,
    reversed: true //,
    //forward: true // not a valid GSAP property 
  });

  TweenLite.set(target, {
    height: 0,
    autoAlpha: 0,
    display: "none" //,
  });
  // animate stuff
  tl.to(target, 1, {
    delay: 0.6,
    height: thisHeight,
    autoAlpha: 1,
    display: "block",
    ease: Cubic.easeInOut,
    overwrite: "none"
  });
  // store timeline in DOM node
  el.animation = tl;

  // create element event handler
  $(el).on("click", function(event) {

    event.preventDefault();

    var that = this;
    var currentTile = $(this);

    $(".Tiles > .Tile.is-expanded").not(this).each(function(i, element) {
      console.log('reverse?');
      element.animation.reverse();
      currentTile.removeClass("not-expanded");
    });

    $allTiles.not(currentTile).removeClass("is-expanded");
    $allTiles.not(currentTile).removeClass("not-expanded");

    currentTile.toggleClass("is-expanded");

    if (this.animation.reversed()) {
      console.log('1');
      $allTiles.not(currentTile).addClass("not-expanded");

      this.animation.play();
      target.removeClass("reversing");
    } else {
      console.log('2');
      this.animation.reverse();
      target.addClass("reversing");
    }
  });
});
/**
 * Variables
 */


/**
 * Scaffolding
 */

html {
  background: #fff;
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

body {
  font-family: "Source Sans Pro", sans-serif;
  margin: 0 auto 1rem;
  max-width: 64em;
  overflow: hidden;
}


/**
 * Component: Tiles
 */

.Tiles {
  font-size: 0;
  margin-left: 0.5rem;
  margin-right: 0.5rem;
  text-align: center;
}

.Tile {
  display: inline-block;
  font-size: 1rem;
  vertical-align: top;
  width: 100%;
}

.Tile>.Tile-content {
  cursor: pointer;
}

.Tile-content {
  background: #7FDBFF;
  border-radius: 0.375rem;
  color: #005b7f;
  font-size: 1.5rem;
  margin: 1rem 0.5rem 0;
  padding: 4rem 1rem;
  text-align: center;
}

.Tile-flyout .Tile-content {
  background-color: #F173D5;
  color: #5c0949;
  width: 70%;
  /* margin: auto; */
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.Tile-flyout {
  /*display: none;*/
  /* do not use it causes issues for show hide */
  position: relative;
  /* i added the below */
  visibility: hidden;
  /* hides all .Tile-flyout on load so GSAP autoAlpha can do its thing */
  height: auto;
  /* tell the browser that initial height is auto */
  overflow: hidden;
  /* required when anaimting height properly */
  width: 70%;
}

.Tile.is-expanded .Tile-flyout {
  /*display: block;*/
  /* do not use */
}

.Tile.not-expanded .Tile-content {
  cursor: default;
  opacity: 0.5;
}

.Tile-flyout:before {
  background: #F173D5;
  content: "";
  left: 50%;
  margin-left: -0.5rem;
  position: absolute;
  height: 1rem;
  top: 0.5rem;
  /* was -2 */
  transform: rotate(45deg);
  width: 1rem;
  z-index: 2;
}


/**
 * Breakpoint layout changes
 */

@media (min-width: 30em) {
  .Tile {
    width: 50%;
  }
  .Tile-flyout {
    width: 200%;
  }
  .Tile:nth-child(2n 1) .Tile-flyout {
    margin-left: 0%;
  }
  .Tile:nth-child(2n 1) .Tile-flyout:before {
    left: 25%;
  }
  .Tile:nth-child(2n 2) .Tile-flyout {
    margin-left: -100%;
  }
  .Tile:nth-child(2n 2) .Tile-flyout:before {
    left: 75%;
  }
}

@media (min-width: 48em) {
  .Tile {
    width: 33.3333333333%;
  }
  .Tile-flyout {
    width: 300%;
  }
  .Tile:nth-child(1) .Tile-flyout {
    margin-left: 0%;
  }
  .Tile:nth-child(1) .Tile-flyout:before {
    left: 16.6666666667%;
  }
  .Tile:nth-child(2) .Tile-flyout {
    margin-left: -100%;
  }
  .Tile:nth-child(2) .Tile-flyout:before {
    left: 50%;
  }
  .Tile:nth-child(3) .Tile-flyout {
    margin-left: -200%;
  }
  .Tile:nth-child(3) .Tile-flyout:before {
    left: 83.3333333333%;
  }
  .Tile:nth-child(4) .Tile-flyout {
    margin-left: -50%;
  }
  .Tile:nth-child(4) .Tile-flyout:before {
    left: 33.6666666666%;
  }
  .Tile:nth-child(5) .Tile-flyout {
    margin-left: -150%;
  }
  .Tile:nth-child(5) .Tile-flyout:before {
    left: 66.666666666%;
  }
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>CodePen - Animate Height GSAP</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="./style.css">

</head>

<body>
  <!-- partial:index.partial.html -->
  <div class="Tiles">
    <div class="Tile js-tile">
      <div class="Tile-content">
        Tile 1
      </div>
      <div class="Tile-flyout">
        <div class="Tile-content">
          Flyout 1
        </div>
      </div>
    </div>
    <div class="Tile js-tile">
      <div class="Tile-content">
        Tile 2
      </div>
      <div class="Tile-flyout">
        <div class="Tile-content">
          Flyout 2
        </div>
      </div>
    </div>
    <div class="Tile js-tile">
      <div class="Tile-content">
        Tile 3
      </div>
      <div class="Tile-flyout">
        <div class="Tile-content">
          Flyout 3
        </div>
      </div>
    </div>
    <div class="Tile js-tile">
      <div class="Tile-content">
        Tile 4
      </div>
      <div class="Tile-flyout">
        <div class="Tile-content">
          Flyout 4
        </div>
      </div>
    </div>
    <div class="Tile js-tile">
      <div class="Tile-content">
        Tile 5
      </div>
      <div class="Tile-flyout">
        <div class="Tile-content">
          Flyout 5
        </div>
      </div>
    </div>

  </div>
  <!-- partial -->
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js'></script>
  <script src="./script.js"></script>

</body>

</html>
<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

Use flex margin: auto for child element

.parent {
  border: 1px dotted green;
  display: flex;
}

.child {
  display: inline-flex;
  margin: auto;
  border: 1px solid red;
  background-color: lightgray;
  padding: 50px;
}

<div class="parent">
  <div class="child">
    <h1> Test.</h1>
  </div>
</div>

Page link：https//www.codepudding.com/net/207392.html

Prev:Strange behavior of click and enter events for a button element inside a form
Next:Insert Username and Email ID into a list/array and display it using HTML and Javascriot
  • Related

About Us:  Contact Us      Terms of Service       Privacy Policy

Copyright © 2010-2023，Powered By CodePudding