Category: HTML5

Horizontally Center content

admin0 Comments

There are various methods to center align text as well any HTML content. Center aligning the text is pretty simple and can be done using just text-align:center property as following.

1
2
3
4
5
6
7
8
9
<div class="text-container">
  Any text content....ha ha .....hey hey !!!
</div>
 
<style>
  .text-container{
     text-align : center;
   }
</style>

But what if when you have to center align any HTML element with any content inside it. In that case you can use any of the following method: 1. Horizontally Center content using margin : 0 auto You can use margin : 0 auto to any parent element and than your content inside it will be horizontally center align relative to it. Consider the below HTML structure for horizontally center align …

Continue Reading

Absolute Horizontal And Vertical Centering In CSS

admin0 Comments

There are many situation in CSS coding, when you wants to keep your content/text right at center both horizontally as well as vertically relative to it’s parent container element. In order to do Absolute Horizontal And Vertical Centering In CSS, we used to had various options as follow: Using absolute position & transition together. Let us first quickly dive right into above methods one by one and than we will discuss the new and better method to do it. Using absolute position & transition together: Let’s consider the following HTML structure.

Example HTML Content
XHTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!-- Container div with Div having just text inside it -->
<div class="app-wrapper">
    <div class="nested-content">
        <!-- Just Text Content -->
     Just Text Content : Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
    </div>
</div>
 
<!-- Container div with Div(with any content) inside it -->
<div class="app-wrapper">
    <div class="nested-content">
        <!-- Any HTML Content -->
            <h4>Any HTML Structure</h4>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p>
    </div>
</div>

I have two set of HTML structure in it. First having only …

Continue Reading

Vertical Center content

admin0 Comments

We all know very well that placing the Vertical Center content was always a pain. Previously, we used to achieve this by following 2 techniques but now we can also achieve the same using display: flex.   First Method (Using Display : inline-block) Second method (Using Display : table) Third Method (Using Display : Flex)   Let’s consider the simple HTML structure:

First Method (Using Display : inline-block) In first method, you can achieve the same using Display : inline-block as following :

Demo Fiddle : See the Pen vertical center content using Inline-block by Techhysahil (@techhysahil) on CodePen. Second …

Continue Reading