Are you searching for an option to align content position without JQuery?

Here's What you'll Learn

Greetings Designers! After designing, the quality and placement of content takes an important role in a webpage creation. Like design & content development, the content alignment is also equally important to attract the users. In this article we are going to discuss available methods for Content alignment without using JQuery.

Solution 1: Static type content position alignment in fixed height div

This solution is applicable, when we have a div with fixed height but the static content need to be aligned.

STEP 1: Basic HTML code for Div creation

<div class="content-alignment">
  <div class="content">
    <h2>Headline</h2>s
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text</p>
    <a class="btn" href="#">Link button</a>
  </div>
</div>

STEP 2: CSS Code to align content

The content position can be aligned using table-cell and position absolute methods in the content div. In detail

To align the content to top we have to write style vertical-align: top;
To align the content to bottom we have to write style vertical-align: bottom;
To align the content to center we have to write style vertical-align: middle;

Once the content alignment is done we can align the title and button according to the design using position absolute method.

CSS code for above HTML code to align content position in center

.btn {
  color: #000000;
  border:1px solid #000000;
  text-decoration: none;
  display: inline-block;
  padding: 7px 20px;
}
.content-alignment {
  width: 100%;
  background: #cccccc;
}
.content {
  height: 400px;
  width: 640px;
  background: #ffffff;
  padding: 20px;
  font-size: 18px;
  position: relative;
  display: table-cell;
  vertical-align: middle;  
  max-width: 50%; 
}
.content h2 {
  position: absolute;
  top: 0px;
  left: 20px;
}
.content .btn {
  position: absolute;
  left: 20px;
  bottom: 0px;
}

This solution is limited to height and content size. If the content or description size exceeds the fixed height the content will overlap with the heading and buttons used. We can use this method effectively for limited static content with fixed height div.

Solution 2: Dynamic content position alignment

STEP 1: Sample html code for div

<div class="content-alignment">
  <div class="content">
    <h2>Headline</h2>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text</p>
    <a class="btn" href="#">Link button</a>
  </div>
</div>

STEP 2: CSS Code to align content position dynamically

Set height for the div by writing style using min-height with value according to design. Then for content position alignment display flex and align items attribute with positions are used. In detail,

To align the content to top we have to write style align-items: flex-start;
To align the content to bottom we have to write style align-items: flex-end;
To align the content to center we have to write style align-items: center;

CSS code for above HTML code to align content position in center dynamically

.content {
  min-height: 400px;
  width: 640px;
  background: #ffffff;
  padding: 20px;
  font-size: 18px;
  position: relative;
  display: flex;
  align-items: center; 
  flex-direction: row;
  flex-wrap: wrap;
  max-width: 50%; 
}

After that make title text style margin-bottom 0 and align-items: flex-start, its make title at top.

STEP 3: Title and Button Alignment

After content position alignment, we have to align the title and button using style margin-bottom 0 and align-items: flex-start for title. And for button margin-top 0 and align-items: flex-end to align it in center.

For Title position

.content h2 {
  margin-bottom: auto;
  align-items: flex-start;
}

For button position

.content .btn {
  margin-top: auto;
  align-items: flex-end;
}

It is always better to opt for easy and optimal solutions, so do try out the methods for content alignment. Explore your creative side and shine on the web development field.