Html
copy
reset
Run
Netbax Online Editor Try it Yourself
<style> .x-display-topmiddle{position:absolute;left:50%;top:90;transform:translate(-50%,0%);-ms-transform:translate(-50%,0%);color:white;} .x-display-bottommiddle{position:absolute;left:50%;bottom:140;transform:translate(-50%,0%);-ms-transform:translate(-50%,0%);color:white;} .x-hide-small{display:true!important} .x-center{text-align:center!important} .x-display-container:hover .x-display-hover{display:block}.x-display-container:hover span.x-display-hover{display:inline-block}.x-display-hover{display:none} .x-display-container{position:relative} .x-display-left{position:absolute;top:50%;left:0%;transform:translate(0%,-50%);-ms-transform:translate(-0%,-50%)} .x-display-right{position:absolute;top:50%;right:0%;transform:translate(0%,-50%);-ms-transform:translate(0%,-50%)} </style> <div id="hhh1"><br><br><br> <span class="x-display-topmiddle x-hide-small" style="margin-top:-70px;color:#000;" >▲</span> <span class="x-display-bottommiddle x-hide-small" style="margin-bottom:220px;color:#000;">▼</span> <div class="x-center x-display-container" style="background-color:red;color:white; max-width:400px; margin:auto;padding: 15px"> <span class="x-display-left x-hide-small" style="left:-30px;color:#000;">◀</span> <span class="x-display-right x-hide-small" style="right:-30px;color:#000;">►</span> <p>align elements layout<br>center, bottom, left, right</p> </div></div>
