VirtualMV/CSS/Layout/Block centering

Introduction

Aligning the blocks on your page is a technique that allows for a balanced web page.

Cascading Style Sheets By the end of this page you will be able to: Understand how to center a block on the screen using css

Examples

CSS: Examples of centering a block

<div  style="width: 50%; margin-right:auto; margin-left:auto; text-align: center">
Basic
</div>

<div  style="width: 96%; margin-right:auto; margin-left:auto;
font-family: menu,Arial; border: 1px solid #808080; background-color: #F6F9ED;">
Text in here
</div>

<div  style="width: 200px; margin-right:auto; margin-left:auto;
font-family: menu,Arial; border: 1px solid #808080; background-color: #F6F9ED;
-webkit-box-shadow: 5px 5px 7px #999;">
200px wide
</div>

<div  style="width: 96%; margin-right:auto; margin-left:auto; text-align: center;
font-family: menu,Arial; border: 1px solid #808080; background-color: #F6F9ED;">
Text in here
  <div  style="width: 200px; margin-right:auto; margin-left:auto;
        border: 1px solid #808080;">
Centered in a container
  </div>

References

virtualMV  |  Superquick wiki guide  |  Please give me some feedback

VirtualMV/CSS/Layout/Block centering. (2024). In WikiEducator/VirtualMV wiki. Retrieved April 19, 2024, from http:https://wikieducator.org/VirtualMV/CSS/Layout/Block_centering    (zotero)