Issue with aligning content vertically in a Bootstrap 3 div

My attempt at vertically aligning text within a div using the following code snippet did not yield the desired result (see fiddle):

<div class="container-fluid">
    <div class="row">
        <div class="col-xs-2">
            This content should not be centered vertically.
        </div>
        <div class="col-xs-2" style="display: table-cell; vertical-align: middle;">
            This content should be vertically centered.
        </div>
    </div>
</div>

Despite implementing the recommended solution, the text still appears aligned to the top. What am I missing or doing wrong in this case?

(Please note that this question is unique as other similar queries suggest the same approach which I have already tried and failed with).

csshtmltwitter-bootstraptwitter-bootstrap-3

Answer №1

When the content is top aligned, it may appear the same as middle or bottom aligned unless you adjust the height.

Here's an example with background colors added to the divs: 

<div class="container-fluid">
    <div class="row">
        <div class="col-xs-2" style="background: #bbb;">
            This should not be vertically centered
        </div>
        <div class="col-xs-2" style="background: #888; display: table-cell; vertical-align: middle;">
            This should be vertically centered
        </div>
    </div>
</div>

If you set each div to a height of 50 pixels, it will look like this:

<div class="container-fluid">
    <div class="row">
        <div class="col-xs-2" style="background: #bbb; height: 50px;">
            This should not be vertically centered
        </div>
        <div class="col-xs-2" style="background: #888; height: 50px; display: table-cell; vertical-align: middle;">
            This should be vertically centered
        </div>
    </div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to include CSS in a CodeIgniter project?

I am facing an issue with loading a CSS file in Codeigniter. It seems like there might be something wrong with my code. Can someone help me understand how to properly load a CSS file in Codeigniter and possibly identify any errors in my current code? < ...

phphtmlcsscodeigniter

Switch between the inner unordered list

Take a look at this Fiddle http://js-fiddle.net/jVfj5/ My goal is to have the Sub Categories (Nested Ul) display when I click on Services, while they are hidden by default. Additionally, only the ul under Services should open, not all the other ul's ...

jquerycss

I appear to be having issues with the pseudo-element. Is there something I am doing incorrectly? This relates to the first child

I initially tried to make the opening paragraph stand out by applying a red color, but unexpectedly, all elements on the page turned red. view image here <!DOCTYPE html> <html lang="en"> <head> <link rel="styleshee ...

htmlcss

The drop-down menu seems to have disappeared from sight

I'm having an issue with getting a dropdown to appear in my registration form. Everything else in the form is displaying correctly and functioning properly, but the dropdown remains invisible. After searching extensively, I haven't been able to ...

phphtmlcssyii

Seeking a method to attach information from a div to a hyperlink

As a complete novice in the world of CSS websites, I find myself struggling to accomplish what seems like a simple task. I am working with an automatically generated CSS/JavaScript website where on the "individual" page, a person's name is listed with ...

javascriptjquerycss

What is the best way to transition an absolute positioned element from right to center?

When hovering over an overlay element, I want the <h3> tag to appear with a transition effect from right to center, similar to the example shown here. Could someone please assist me in achieving this? Thank you in advance. HTML <div class="row m ...

javascriptjquerycss

What causes a slow disappearance of both the form element and its child elements when the visibility attribute is set to hidden on the

Have you ever noticed that the child elements of an element form hide slowly when using visibility:hidden, but hide quickly when using display:none? This slow hiding can negatively impact user experience. I tried to find information on this issue, but eve ...

cssangularforms

Why are only some of my images appearing on the screen?

I am trying to showcase four images - two in the first row and two below it. However, I am facing an issue where only the images in the top row are appearing while the ones in the second row seem to be missing. I'm not sure what is causing this probl ...

html

Retrieving data from MongoDB and presenting it neatly in Bootstrap cards

I have successfully retrieved data from MongoDB and displayed it in Bootstrap 5 cards. However, I am facing an issue where all the cards are appearing in a single row if there are multiple entries in the database. What I want to achieve is to utilize the ...

javascriptmongodbtwitter-bootstrapnext.js

Utilizing Ajax to update the login form without reloading the page and displaying any errors

I have created a login form that utilizes ajax to handle login errors such as "incorrect password" from my login.php file. Instead of reloading a new page with the error message, it now displays the errors on the same login form, which is working perfectly ...

javascriptphpjqueryhtmlajax

What is the best way to create a more effective xpath expression?

My HTML code resembles the following: <tr> <td> <span> <span class = "x28w"></span> </span> <td> <span> <a> <span>3899393</span> </a> < ...

htmlseleniumxpath

Tips for Updating HTML Table Content Dynamically Using JavaScript without jQuery

I am in the process of developing a web application that requires me to dynamically change the content of an HTML table based on user input, all without relying on jQuery or any other external libraries. Adding rows to the table is not an issue for me, but ...

javascripthtmlhtml-tabledom-manipulation

Using the novalidate attribute in Angular 4.0.0

Since migrating to angular 4, I have encountered a peculiar issue with my template-driven form. The required attribute on the input field appears to be malfunctioning. It seems like the form has the novalidate attribute by default, preventing HTML5 validat ...

javascripthtmlformsangular

Animating jQuery Counter with Changing Background Color

I've implemented a Counter that counts from 0 to a specified number, and it seems to be working perfectly. However, I want to add an animation where the background color of a div height animates upwards corresponding to the percentage of the counter. ...

javascriptjqueryhtmlcss

Using single quotation marks in Javascript

When the variable basis contains a single quotation mark, such as in "Father's Day", I encounter an issue where the tag is prematurely closed upon encountering the single quotation mark. 'success' : function(data) { div.innerHTML = &apo ...

javascripthtmltags

Add a fading transition feature to images that are loaded at a later time

I used a clever technique to create a blur effect by loading a small, lightweight image first. Once the main background image is loaded, it swaps out the 'data-src' with the actual image. However, I am facing an issue with the abrupt transition, ...

javascripthtmlcssimagedeferred

Change the opacity of a DIV or any other element when hovering over it

I have successfully applied opacity: 1; to a paragraph when hovering over itself. However, I want the opacity to also change when hovering over the header above it. Here is my CSS code: .testH { font-family: impact; text-align: center; font-s ...

htmlcss

Filtering posts in Angular with the use of pipes

I've been attempting to use pipes in Angular to filter posts from a table, but I keep running into this error on the console: core.js:12689 Can't bind to 'ngForFilter' since it isn't a known property of 'a'. I believe th ...

htmlangularpipengfor

Keep scrolling! There's no need to worry about reaching the end of the page and having to start over

I'm experiencing an issue where scrolling only works once when the page is initially loaded. I need it to be able to repeat from the beginning each time. <div class="content"> <div class="next-section blue">First Section</div> & ...

jquerycss

iframe failing to load link after initial attempt

As a beginner in using iframes, I have come across an issue that is puzzling me. I have a navigation bar and an iframe on my webpage. When I click on the "Search" link, it loads into the iframe without any problems and I can work within it. However, if I c ...

phphtmlcss