VirtualMV/CSS/Layout/Block centering

From WikiEducator
< VirtualMV‎ | CSS‎ | Layout
Jump to: navigation, search



Introduction

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


VmvIcon Objective.png

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>

VmvIcon References.png References

virtualMV  |  Superquick wiki guide  |  Please give me some feedback

VirtualMV/CSS/Layout/Block centering. (2017). In WikiEducator/VirtualMV wiki. Retrieved November 24, 2017, from http://wikieducator.org/VirtualMV/CSS/Layout/Block_centering    (zotero)