Tagcenter

[CSS] Alignements compliqués avec Flexbox

Sources:

Flexbox: centrer tous les éléments d’une rangée sauf le dernier qui sera aligné à droite

Source: Center and right align flexbox elements.

Method #3: Flex Auto Margins & Invisible Flex Item (pseudo-element) testée et fonctionne.

[CSS] Centrer horizontalement et verticalement une boite de manière absolue dans une page

Source : http://codepen.io/shshaw/pen/gEiDt

Code HTML pour une boite fixe


<div class="Center-Block Absolute-Center is-Fixed is-Variable Modal" id="Fixed-Modal">
  <div class="Center-Content">
    <h4 class="Title">Absolute Center.</h4>

    <p>This box is absolutely centered within the viewport, horizontally and vertically, using only CSS.</p>
        
    <p><a href="#" class="Shaw-Button trigger-Resize">Resize Me!</a></p>
 
    <p><a href="#" class="Shaw-Button toggle-Modal">Close Modal</a></p>
  </div>
</div>

Code CSS pour une boite fixe


/*
////////////////////////////////////////
 Absolute Centering
//////////////////////////////////////// 
*/
.Absolute-Center { 
  height: 50%; /* Set your own height: percents, ems, whatever! */
  width: 50%; /* Set your own width: percents, ems, whatever! */
  overflow: auto; /* Recommended in case content is larger than the container */
  margin: auto; /* Center the item vertically & horizontally */
  position: absolute; /* Break it out of the regular flow */
  top: 0; left: 0; bottom: 0; right: 0; /* Set the bounds in which to center it, relative to its parent/container */
}

/* //////////////////////////////////////// */
/* Make sure our center blocks stay in their container! */
.Center-Container { position: relative; }

/* //////////////////////////////////////// */
/* Fixed floating element within viewport */
.Absolute-Center.is-Fixed { 
  position: fixed;
  z-index: 999;
}

Code CSS complémentaire pour une boite responsive


/* //////////////////////////////////////// */
/* Min/Max Width */
.Absolute-Center.is-Responsive {
  width: 60%; 
  height: 60%;
  min-width: 200px;
  max-width: 400px;
  padding: 40px;
}

Code CSS complémentaire pour fixer l’alignement de la boite à droite ou à gauche


/* //////////////////////////////////////// */
/* Align Right, still vertically centered */
.Absolute-Center.is-Right { 
  left: auto;
  right: 20px;
  text-align: right;
}

/* //////////////////////////////////////// */
/* Align Left, still vertically centered */
.Absolute-Center.is-Left { 
  right: auto;
  left: 20px;
  text-align: left;
}

Code CSS complémentaire pour une image responsive


/* //////////////////////////////////////// */
/* Responsive image, still absolutely centered! Apply the classes to the image itself. */
.Absolute-Center.is-Image { 
  width: 50%;
  height: auto;
  padding: 0;
}
.Absolute-Center.is-Image img { 
  width: 100%;
  height: auto;
}

Code CSS complémentaire pour une boite dont le contenu serait trop haut


/* //////////////////////////////////////// */
/* Set content overflow if your content may go too long */
.Absolute-Center.is-Overflow { 
  height: 250px;
  max-height: 100%;
  overflow: auto;
}

Code CSS complémentaire pour une boite à hauteur variable

En cas d’apparition/disparition de contenu sur une action de l’utilisateur, par exemple…


/* //////////////////////////////////////// */
/* Variable content height with display: table; 
Breaks cross browser compatibility, but now has a Modernizr test available!

Modernizr test adds ".absolutecentercontent" to <html> if the browser will center correctly with a variable height, and ".no-absolutecentercontent" if it will not be centered with a variable height so that you can add fallback styles in your CSS or use Javascript to manually center it. */
.absolutecentercontent .Absolute-Center.is-Variable {
  display: table; 
  height: auto;/* Only necessary because height was already declared */
}

Code CSS complémentaire pour boite que l’utilisateur peut redimensionner


/* //////////////////////////////////////// */
/* Allow the user to resize */
.Absolute-Center.is-Resizable {
  min-width: 20%;
  max-width: 90%;
  min-height: 20%;
  max-height: 80%;
  resize: both;
}

.absolutecentercontent .Absolute-Center.is-Resizable { 
  /* necessary to override settings from .is-Variable, if used */
  display: block !important;
}

Autres techniques CSS de centrage horizontal et vertical d’une boite de manière absolue dans une page


/* 
////////////////////////////////////////
 Other Techniques  
//////////////////////////////////////// 
*/

/* //////////////////////////////////////// */
/* Negative Margin Technique */
.Center-Block.is-Negative {
  width: 300px;
  height: 200px;
  padding: 20px;
  position: absolute;
  top: 50%; left: 50%;
  margin-left: -170px; /* (width + padding)/2 */
  margin-top: -120px; /* (height + padding)/2 */
}

/* //////////////////////////////////////// */
/* Display: Table Technique */
.Center-Container.is-Table { display: table; }
.is-Table .Table-Cell {
  display: table-cell;
  vertical-align: middle;
}
.is-Table .Center-Block {
  width: 50%;
  margin: 0 auto;
}

/* //////////////////////////////////////// */
/* Inline-Block Technique */
.Center-Container.is-Inline { 
  text-align: center;
  overflow: auto;
}

.Center-Container.is-Inline:after,
.is-Inline .Center-Block {
  display: inline-block;
  vertical-align: middle;
}

.Center-Container.is-Inline:after {
  content: ' ';
  height: 100%;
  margin-left: -0.25em; /* to offset spacing. may vary with fonts */
 }
 
.is-Inline .Center-Block { 
  text-align: left;
  max-width: 80%; /* Prevents issues with long content causes the content block to be pushed to the top */
  /* max-width: calc(100% - 0.25em) /* Only for IE9+ */ 
}

.lt-ie8 .is-Inline .Center-Block {
   /* IE7 Support */
  display: block;
  margin-top: ~'expression(this.offsetHeight < this.parentNode.offsetHeight ? parseInt((this.parentNode.offsetHeight - this.offsetHeight) / 2) + "px" : "0")'; 
}

/* //////////////////////////////////////// */
/* Transform Technique */
.is-Translated {
  width: 50%;
  margin: auto;
  position: absolute;
  top: 50%; left: 50%;
  -webkit-transform: translate(-50%,-50%);
          transform: translate(-50%,-50%);
}

/* //////////////////////////////////////// */
/* Flexbox Technique */
.Center-Container.is-Flexbox {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
     -moz-box-align: center;
     -ms-flex-align: center;
  -webkit-align-items: center;
          align-items: center;
  -webkit-box-pack: center;
     -moz-box-pack: center;
     -ms-flex-pack: center;
  -webkit-justify-content: center;
          justify-content: center;
}

© 2020 devfrontend.info

Theme by Anders NorénUp ↑