Achieving vertical center alignment of two <div class="span6">'s using Bootstrap framework

UPDATE: I just want to mention that the height of these spans is unknown due to responsiveness!

I am attempting to vertically align two <div class="span6">'s within a <div class="row"> using Bootstrap, but I am facing difficulties with my usual methods like display: inline-block; or display: table-cell; (you can find the JSFiddle link here: http://jsfiddle.net/mA6Za/).

Here's what I have tried so far, but it doesn't work as expected in Bootstrap:

<div class="container">
    <div class="row" style="display: table">
        <div class="span6" style="height: 300px; background: red; display: table-cell !important; vertical-align: middle;">
            Block 1 - Please center me vertically!
        </div>
        <div class="span6" style="height: 170px; background: blue; display: table-cell !important; vertical-align: middle;">
            Block 2- Center me too
        </div>
    </div>
</diV>

Is there a way to vertically align these two .span6's without specifying the height of Block1 and Block2? We would like to make use of Bootstrap for responsive design, but also ensure that the content aligns vertically on tablets and larger screens.

htmlcsstwitter-bootstrap

Answer №1

It's not entirely clear if you're looking to center the content within the div vertically or if you want to center the actual div itself. Either way, there are solutions for both scenarios:

Centering the actual div vertically

One solution is to vertically align the div: Check out this jsFiddle

This method involves setting display: table; on .container and display: table-cell; on .row. By then adding vertical-align: middle; to .row, the content will be centered vertically.

In order to prevent issues with Bootstrap's margin-left, I had to manually set the width of .row to 960px. While this isn't very responsive, you could use media queries to address that. The addition of height: 100%; in each element was purely for demonstration purposes.

CSS

.container {
    margin-top: 10px;
    display: table;
    height: 100%;
}
.row {
    min-width: 960px;
    display: table-cell;
    height: 100%;
    vertical-align:middle;
}

Centering the content of the divs vertically

If your goal is to center the content inside the divs vertically, you can achieve this by using display: table; on .row and display: table-cell; on .span6. Simply changing float: left; to float: none; for .span6 will do the trick.

For a visual example, view this fiddle: See the jsFiddle here

Answer №2

When working with a fixed height and only one line, the line-height property can be very useful.

.span6:first-child{
    line-height:300px;
}

.span6{
    line-height:170px;
}

Check out this fiddle for an example: http://jsfiddle.net/dX8Yb/2/

Answer №3

check out this example http://jsfiddle.net/mA6Za/2/

<div class="container">
    <div class="row" style="display: table">
        <div class="span6" style="height: 300px; background: red; display: table-cell !important; position: absolute; top: 50%; margin-top: -150px; ">
            Block 1 - Please vertically center me!
        </div>
        <div class="span6 offset6" style="height: 170px; background: blue; display: table-cell !important; vertical-align: middle; top: 50%; margin-top: -85px ;  position: absolute " >Block 2- Center me as well
        </div>
    </div>
</div>

Answer №4

UPDATE

Upon further investigation, it turns out that my initial solution is not effective due to Bootstrap still applying a float: left to all <div class="span*"> elements.

/* Extracted from Bootstrap with slight modifications based on media queries */
[class*="span"]
{
   float: left;
   min-height: 1px;
   margin-left: 30px;
}

To override these rules, you can adjust the .cell style as follows from my original suggestion:

.cell
{
    display: table-cell;
    float: none;
    vertical-align: middle;
}

However, by making this change, you will lose the responsive stacking of elements on smaller screens (assuming that's not what you desire) and instead maintain a table-like appearance. To prevent this outcome, you'll likely need to conditionally set the display: table; float: none; style using your own media queries.

Moreover, overriding Bootstrap's intended styling could introduce unforeseen display issues into your layout.

Feel free to view the updated fiddle here: http://jsfiddle.net/7Y8Jv/3/

ORIGINAL ANSWER

Does this solve your issue: http://jsfiddle.net/7Y8Jv/1/?

My HTML structure and CSS closely resemble yours, yet I am achieving the vertical centering effect you requested.

HTML Markup

<div class="container">
    <div class="row table">
        <div class="span6 cell">What Is Lorem Ipsum?</div>
        <div class="span6 cell">Lorem Ipsum is simply dummy text of the printing and typesetting industry...</div>
    </div>
</div>

CSS Styles

.table
{
    display: table;
}

.cell
{
    display: table-cell;
    vertical-align: middle;
}

Answer №5

If you're looking to have two rows on the screen, each taking up half of the space, one option is to utilize a combination of offset3 and span6. By using offset3 to shift your row a quarter of the way, you can position it as desired while still utilizing span6 in two separate rows:

<div class="container">
    <div class="row">
        <div class="offset3 span6">Block 1 - Vertically center me please!</div>
    </div>
    <div class="row">
        <div class="offset3 span6">Block 2- Center me too</div>
    </div>
</diV>

Check out the JSFiddle example for reference: http://jsfiddle.net/mA6Za/3/

Answer №6

Discover some clever jquery techniques...

1) Obtain the height of a span using its id

2) Perform calculations for setting margin-top

3) Apply the appropriate CSS styles

This technique is also effective when resizing the window.

Check out the demonstration on jsfiddle...http://jsfiddle.net/q49Da/

HTML

<div class="container">
    <div class="row">
        <div id="red" class="span6" style="background: red;width:40%;float:left;margin-right:5%;">
            Block 1 - Please vertically center me!<br />
            Lorem Ipsum is simply dummy text of the printing and typesetting industry.    Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
        </div>
        <div id="blue" class="span6" style="background: blue;width:40%;float:left;">
            Block 2- I want to be centered too<br />
            Contrary to popular belief, Lorem Ipsum is not simply random text.
        </div>
    </div>
</div>

JQUERY

$(document).ready(function() {
    var ver_top = ($(window).height() - $('#red').height()) / 2;
    $('#red').css( "margin-top", ver_top+'px' );

    var ver_top2 = ($(window).height() - $('#blue').height()) / 2;
    $('#blue').css( "margin-top", ver_top2+'px' );

    $(window).resize(function(){
        var ver_top = ($(window).height() - $('#red').height()) / 2;
        $('#red').css( "margin-top", ver_top+'px' );

        var ver_top2 = ($(window).height() - $('#blue').height()) / 2;
        $('#blue').css( "margin-top", ver_top2+'px' );
    });
});

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

Adjust the color of an individual anchor link when hovering using React.js

Currently, I am attempting to modify the color of a specific anchor link when it is hovered in React. To achieve this, I have created two functions named handleMouseEnter and handleMouseLeave: handleMouseEnter() { this.setState({ isMouseInside: true ...

htmlcssreactjs

Screen readers are unable to "read" text that is identified through aria-describedby

When enhancing my web application for accessibility, I encountered a challenge. I have implemented two required fields in a form that should display separate error messages as spans. To accomplish this, I am utilizing aria-invalid to signal when the fields ...

javascripthtmlaccessibility

Web pages that dynamically update without the need for reloading

Recently, I stumbled upon slack.com and was immediately captivated by its user interface. For those unfamiliar with it, navigating the site is quite simple: There's a sidebar on the left and a main content area on the right. When you click on an item ...

javascripthtmlcssnode.jsmeteor

Issue with input-group background display in bootstrap 4

My new computer is running on Windows 11 with Chrome version 97. There seems to be a bug in the original bootstrap code, as evidenced by the attachment. The issue can be seen on the Bootstrap website By adding "border-radius:0!important" to ".input-group ...

cssbootstrap-4windows-11

Struggling to eliminate background color from Bootstrap navigation on top of image slider?

I am currently attempting to make the second navigation bar transparent so that the image behind it is visible. I have tried applying CSS to achieve this transparency: #nav > .navbar-inner { border-width: 0px; -webkit-box-shadow: 0px 0px; box-shadow: 0 ...

javascripthtmlcsstwitter-bootstrap

Troubleshooting the Inline-Block Problem with Jquery Image Bubble Display

Recently, I've been exploring ways to eliminate the padding that is creating space between images before they align correctly. The culprit causing the padding seems to be the display: inline-block property. While it was suggested to have all the li t ...

css

Activate scroll function exclusively upon hovering over specific object

I am working on a page with an object that allows users to zoom in and out. I want to create a special zoom function that will be triggered when the user scrolls while their cursor is hovering over this object. If the cursor moves away from the object, th ...

javascripthtmlscroll

Resolving issues with a countdown timer coming to a halt

After creating a countdown timer to show 45 seconds on the screen, I attempted to control it using two buttons with JavaScript's onclick function. One button is meant to start the timer while the other stops it. While I was successful in starting the ...

javascripthtmltimerbootstrap-4

The CSS underline stays stationary when clicked

I'm attempting to implement a sliding horizontal line that moves on click of hyperlinks. Check out the code at: http://codepen.io/anon/pen/JdEPPb The HTML structure is as follows: * { box-sizing: border-box; } body { f ...

htmlcss

Creating a Transparent Scrollbar in React for Google Chrome

::-webkit-scrollbar { width: 0.5vw; } ::-webkit-scrollbar-track { background-color: transparent; } ::-webkit-scrollbar-thumb { background-color: rgb(99, 99, 99); border-radius: 10px; } I wrote this code to style a scrollbar in CSS. The scrollba ...

htmlcssreactjsgoogle-chromescrollbar

Is there a way to access a route parameter that is two levels above in Angular 11?

I am seeking guidance on how to access second-level parent routes in Angular. For instance, how can I retrieve the componentId within the AttributeListComponent when using the following nested routes: const routes: Routes = [ {path: '', redirec ...

htmlcssjsonangulartypescript

What could be causing me to receive null when trying to retrieve an element with document.getElementById, even after invoking $(document).ready(function() { ... })?

Here's a small example. I'm feeling a bit rusty with JavaScript, as it's been some time since I last worked with it. The problem I'm encountering is an error in Chrome developer tools: "Uncaught TypeError: Cannot set property 'src ...

javascriptjqueryhtml

Menu becomes sticky too quickly on iOS Safari and Chrome, jumping to fixed position prematurely

Feeling frustrated with this seemingly straightforward code challenge. My sticky menu is causing me headaches on iOS devices, particularly the iPhone 6 running the latest iOS. It seems like the menu jumps into its fixed position too early, leading me to be ...

javascriptjquerycssfixedsticky

The mx-auto class in Bootstrap does not properly center an element in the page

Recently, I've been working on a website that makes use of the Bootstrap 5 navbar. The design includes three navbar-navs: one with me-auto, another with mx-auto, and the last with ms-auto. Strangely enough, the navbar-nav with mx-auto, which is suppos ...

htmlcssbootstrap-5navbarspacing

how can you make keyframe animation pause at the last stage?

Here is an example of utilizing CSS animations: .show-left-menu { -webkit-animation-name: leftSidebarAni; -webkit-animation-duration: .25s; -webkit-animation-timing-function: ease-out; -webkit-animation-iteration-count: 1; } @-webkit-keyframes l ...

css

Continuous addition of Node structures in a tree

I am attempting to append a node tree to the DOM that has been created using createHTMLDocument. Originally, I approached it like this: (doc represents the node tree) while(doc.head.children.length > 0){ iframewin.document.head.appendChild(doc. ...

javascripthtml

Converting numerical indexes in an array to an associative array: A step-by-step guide

Struggling with posting dynamic forms currently. Using simple post, looking for a method to retrieve data from entire table. This is the HTML table structure: <form id="importForm" method="post" action="/modules/import/test.php"> <table class="t ...

phphtmlarrays

Execute a command via a hyperlink

I have a script that displays information in a div using a button. I am trying to modify it so that it works from a link instead, but I haven't had any success yet. Any ideas on how to make this work? <script> function showCustomer(str) { va ...

javascriptphphtmlajax

Adjust the Vue.js background color according to a specified class name

Just starting out with vue.js and exploring the possibilities. I have a scenario where I need to dynamically change the background color based on a class name in vue. Is there a way to achieve this without relying solely on CSS? Ideally, I would like to si ...

javascripthtmlcssvue.js

Chrome Flexbox Hacks: Controlling the Size of Nested Items

How can I ensure that an element nested within a flexbox member in Google Chrome is limited to the size of its container? For example, consider the following scenario: <div style="display:flex; flex-direction:column; height:100vh;"> <div style= ...

htmlcssgoogle-chromeflexbox