Aligning content in the middle vertically with Bootstrap 3

Question

Aligning content in the middle vertically with Bootstrap 3

While I understand that this question has likely been asked numerous times before, the solutions provided thus far do not seem to apply to my specific situation. This leads me to believe that there may be an additional factor at play in my content.

<div class="row" style="margin-left:6px; margin-right:6px;" ng-repeat="product in products">
  <div class="col-xs-6 col-sm-6 col-lg-6">
    <a>
      <h4>{{product.name}}</h4>
      <h5>{{product.description}}</h5>
    </a>
  </div>

  <div class="col-xs-6 col-sm-6 col-lg-6">
    <span class="pull-right">
      remove&nbsp;
      <i class="glyphicon glyphicon-remove pull-right"></i>
    </span>
  </div>
</div>

In attempting to vertically center the "remove [x]" icon in the second column with respect to the first column, I have encountered a challenge. Currently, the icon appears to be centered at the top rather than vertically in the middle. My initial attempt to resolve this issue involved the following adjustment:

<div class="col-xs-6 col-sm-6 col-lg-6" style="float:none; display:table-cell; vertical-align:center">
    <span class="pull-right">
      remove&nbsp;
      <i class="glyphicon glyphicon-remove pull-right"></i>
    </span>
  </div>

Regrettably, this approach did not yield the desired outcome. It seems I may have overlooked a crucial detail or made an error in implementation. Any insights or guidance on this matter would be greatly appreciated.

css twitter-bootstrap twitter-bootstrap-3

Answer 1

Answer №1

To start, my suggestion is to include an additional class to the columns you intend to manipulate. While it may not have an impact in your basic example, as you add more elements, you will appreciate the benefits of organizing elements based on their reusable class.

Therefore, the initial step involves a minor adjustment to your HTML. Though not entirely necessary since you could easily target (for instance) .col-xs-6, adopting a general approach by adding a class to that row and removing the inline style would be advisable.

<div class="row" style="margin-left:6px; margin-right:6px;" ng-repeat="product in products">
  <div class="col-xs-6 col-sm-6 col-lg-6 midvert">
    <a>
      <h4>{{product.name}}</h4>
      <h5>{{product.description}}</h5>
    </a>
  </div>

  <div class="col-xs-6 col-sm-6 col-lg-6 midvert">
    <span class="pull-right remove">
      remove&nbsp;
      <i class="glyphicon glyphicon-remove"></i>
    </span>
  </div>
</div>

By implementing the above adjustments, we can now selectively target Bootstrap elements without interfering with the flow of similar re-usable classes in subsequent uses. To vertically align them, simply assign a vertical-align property like so:

.midvert {
    display:inline-block;
    vertical-align:middle
  }

Note how the vertical alignment is applied to the CONTAINING BLOCK ELEMENT, rather than the element itself. However, this alone will not produce the desired effect, as our .remove element requires a defined height, which we rectify by including the following:

.remove {
    line-height: 4; 
  }

While the choice of using single numbers for line-height values varies (lending options like px, rem, em, %), I personally opt for single numbers. The reasoning behind this preference is outlined here, but feel free to utilize what suits you best. You'll observe that a number between 4 and 4.5 provides an ideal fit when resizing the window.

I've created a modified Bootply to illustrate the issue.

Answer 2

To start, my suggestion is to include an additional class to the columns you intend to manipulate. While it may not have an impact in your basic example, as you add more elements, you will appreciate the benefits of organizing elements based on their reusable class.

Therefore, the initial step involves a minor adjustment to your HTML. Though not entirely necessary since you could easily target (for instance) .col-xs-6, adopting a general approach by adding a class to that row and removing the inline style would be advisable.

<div class="row" style="margin-left:6px; margin-right:6px;" ng-repeat="product in products">
  <div class="col-xs-6 col-sm-6 col-lg-6 midvert">
    <a>
      <h4>{{product.name}}</h4>
      <h5>{{product.description}}</h5>
    </a>
  </div>

  <div class="col-xs-6 col-sm-6 col-lg-6 midvert">
    <span class="pull-right remove">
      remove&nbsp;
      <i class="glyphicon glyphicon-remove"></i>
    </span>
  </div>
</div>

By implementing the above adjustments, we can now selectively target Bootstrap elements without interfering with the flow of similar re-usable classes in subsequent uses. To vertically align them, simply assign a vertical-align property like so:

.midvert {
    display:inline-block;
    vertical-align:middle
  }

Note how the vertical alignment is applied to the CONTAINING BLOCK ELEMENT, rather than the element itself. However, this alone will not produce the desired effect, as our .remove element requires a defined height, which we rectify by including the following:

.remove {
    line-height: 4; 
  }

While the choice of using single numbers for line-height values varies (lending options like px, rem, em, %), I personally opt for single numbers. The reasoning behind this preference is outlined here, but feel free to utilize what suits you best. You'll observe that a number between 4 and 4.5 provides an ideal fit when resizing the window.

I've created a modified Bootply to illustrate the issue.

Answer 3

Answer №2

To achieve the desired outcome, consider incorporating a line-height property into your "remove" link.

For instance, if you apply the following class to your link:

.remove {
  line-height: 40px; 
  vertical-align: middle;
}

Your link will now be properly aligned.

Example Demo

Answer 4

To achieve the desired outcome, consider incorporating a line-height property into your "remove" link.

For instance, if you apply the following class to your link:

.remove {
  line-height: 40px; 
  vertical-align: middle;
}

Your link will now be properly aligned.

Example Demo

Answer 5

Answer №3

Check out this JSFiddle I put together for you. Hopefully it meets your needs.

Take a look at the CSS tab where I included display:table-cell; for the col-sm-6 CSS class as well.

Answer 6

Check out this JSFiddle I put together for you. Hopefully it meets your needs.

Take a look at the CSS tab where I included display:table-cell; for the col-sm-6 CSS class as well.

Aligning content in the middle vertically with Bootstrap 3

Answer №1

Answer №2

Example Demo

Answer №3

Similar questions

Tips for creating Viewport dimensions in Tailwind CSS

Is there a way to remove the grey overlay when clicking on an <a> tag?

Expanding Your Django Template Abilities

Dynamic Divider for Side-by-Side Menu - with a unique spin

What methods are available in JavaScript for determining the width of a section and implementing proper spacing for a menu?

How to customize CSS based on the specific Django app you are using

When using React <p> and Tailwind, the text overflow occurs in either the X or Y axis, despite specifying Y specifically

The Django static CSS won't load properly on the webpage

Is there a way to achieve a double background color effect in CSS while ensuring that the text is centered within the second background color element?

The renderToString function in Material UI's sx property doesn't seem to have

Comparison between Filament Group's loadCSS and AJAX technologies

resetting the page's scroll position using a hamburger icon

Place a list with scrolling and overflow features side by side

Progress Bar Rating System in Bootstrap 4

Semantic UI Footer allows you to easily create a stylish

Removing Shadow, Border, and Outline from Bootstrap v5.0.2 Navbar

Can CSS be used to eliminate shadows from a particular image?

What is the best way to make translateX transition function in Firefox?

Possible conflict between CSS and JavaScript on Magento website

Ways to shift text upwards while scrolling in a downward direction?