HomeЛюди и блогиRelated VideosMore From: Code Whisperer

Centering With CSS3 Using Text-Align, Margin and Position

9 ratings | 2074 views
In this short video we will learn how to center elements horizontally and vertically using CSS3. We will use CSS3 to center text with text-align: center, and block elements with margin: auto and position: absolute. For your convenience here is the code used in this demonstration: .text-inner { text-align: center; position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; margin: auto; height: 30px; } .square { height: 250px; width: 250px; background-color: #AAADFF; text-align: center; margin: auto; position: absolute; right: 0px; left: 0px; top: 0px; bottom: 0px;
Html code for embedding videos on your blog
Text Comments (4)
Karl Slaggerfeld (3 years ago)
the nav just sits on the left side of the page outside of the natural box. I want it positioned inside the natural box centered, if that makes sense?
Karl Slaggerfeld (3 years ago)
well what i want to do is put the navigation inside of a div where my text is and have it centered in the div This is my HTML code: <body> <nav> <ul>   <li><a href="Desktop/Root/about">About</a></li>   <li><a href="Root/news">News</a></li>   <li><a href="Root/contact">Contact</a></li> </ul> </nav> <divid= “container”> <p class="natural box">paragraph.<br> paragraph.</p> </div> </body>   This is my CSS: body {background: url(images/circuit.jpg) repeat center center fixed; } nav li{display:inline; margin:auto; -right 90px}margin a:link {color:#20F3FF } a:visited {color:#13ff87 } a:hover {color:#ffe75a } a:active {color:#000000 } a {text-decoration:none; text-align:center; } #container {width:360px; margin:auto } h1 {color:#20F3FF; font-famil:garamond; } .naturalbox {box-sizing:border-box;               width:900px;               background-color:#20f3ff;               border-style:solid;               border-width:5px;               border-color:#13ff87;               padding:5px;               margin:5px;               margin:auto           }
Karl Slaggerfeld (3 years ago)
what if i want to center navigation?
Code Whisperer (3 years ago)
+Karl Slaggerfeld Hey Karl. Thanks for the question! Could you share please share a link with the exact effect you want? Sorry but I want to make sure I'm answering the question correctly. Cheers, DS

Would you like to comment?

Join YouTube for a free account, or sign in if you are already a member.