Vertically align the content within a div

Here is what I have been working on:

http://jsfiddle.net/yisera/2aVpD/

I am trying to vertically center a div inside the .jumbotron-special container.

I attempted using display: table; on the parent element and then implementing display:table-cell on the child element (the one with the H1 and H2), but unfortunately I have not had success. I am hesitant to use absolute positioning as I want this to be responsive, and when the resolution decreases, the layout becomes disorganized.

Does anyone have any suggestions on how I can properly center it within the jumbotron parent div?

htmlcsstwitter-bootstrapvertical-alignment

Answer №1

If you're looking to center the contents of the div with the class .jumbotron-special, you can achieve this using the code below:

Add these properties to the existing class:

display:flex;
 justify-content:center;
 align-items:center;

To see the code in action, check out this JSFIDDLE

For more information on Flex Box, visit here

Find additional resources and a guide to Flex at this link

Answer №2

Give this a try:

#yourdiv {position:absolute; top:50%; height:800px; margin-top:-400px; }

To ensure that the margin-top is half of the height.

Alternatively, here is another effective technique using 2 divs:

<div id="controller-div">
<div id="your-div">
Insert content here
</div>
</div>

In this case, make sure to set margin-bottom to be negative half of height:

 #controller-div    {float:left; height:50%; margin-bottom:-120px;}
 #your-div  {clear:both; height:240px; position:relative;}

Answer №3

Another great solution (just don't forget to include height:100%)

.content-box{
    color: #000;
    text-shadow: #222 2px 2px;
    display: block;
    width: 100%;
    height: 100%;
}
.inner-content {
    display: inline-block;
    text-align: center;
    vertical-align: middle;
}

Answer №4

Presented here is an alternative option that offers more robust support compared to flexbox.

Explore the updated Fiddle here.

body{
    width: 100%;
    height: 100%;
}
.full-jumbotron{
    font-size: 10em !important;
    margin-top: -70px;
    height: 100vh;
    background: #333;
    min-height: 100%; 
    max-height: 100%;  
}
.container-text{
    color: #fff;
    text-shadow: #333 3px 3px;
    height: 100%;
    display: table;
    width:100%;
}
.inner-container {
    display: table-cell;
    vertical-align: middle;
    width:100%;
}

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

Is it time to switch out HTML tables for Divs?

I am looking for advice on creating a consistent header for all of my website pages. Currently, I use a div element to wrap a table that contains one row with three cells. These cells hold three images: one in the top-left corner, one in the top-center, a ...

csshtml

Challenges in working with PHP, SQL, HTML, and AJAX data submission

Having encountered another issue, I've been attempting to make an AJAX script function properly, but whenever I click on it, the page reloads without updating the database field. The code I'm using has successfully worked for similar scripts on ...

phpjquerymysqlhtmlajax

What steps can be taken to modify the `select` element in IE?

I came across a solution to display an arrow on a select element in this answer: select { width: 268px; padding: 5px; font-size: 16px; line-height: 1; border: 0; border-radius: 5px; height: 34px; background: url(http://cdn1 ...

css

Unable to input data into the Database using an HTML Form combined with PHP

I am facing an issue with my MyPHP Database as no records are showing up when I execute these scripts. The environment I am using includes: APACHE 2.4.7 MYSQL 5.6.15 PHP 5.5.8 Let's start with the HTML Code... <html> <center> <f ...

phphtmlmysqlapacheeasyphp

Having trouble displaying dynamically added images in my jsx-react component. The images are not showing up as expected

import React from "react"; import ReactDOM from "react-dom"; var bImg = prompt("Enter the URL of the image you want to set as the background:"); const bStyle = { backgroundImage: "url(bImg)"; // The link is stored ...

javascriptcssreactjsjsx

Container containing sliding content underneath

I've designed a grid with separate boxes that reveal related content when clicked. The display of this content is achieved using jQuery's slideToggle feature. The setup functions smoothly, with each row containing clickable boxes that unveil the ...

jqueryhtmlcss

What is preventing BODY from respecting min-height: 100% ?

Struggling to create a basic webpage with a container that extends to the bottom? Here's what I'm aiming for: #Main should be as tall as the viewport, but able to stretch further with additional content. body should match the viewport height, y ...

htmlcssheightdocument-body

Utilizing :checked selector and toggle() function in jQuery

I'm facing an issue with my jQuery code where the CSS changes are not working as expected. When I test the code, it doesn't apply the CSS changes. If I remove the :checked and just use $("input"), then the CSS works but only when clicking on an i ...

jquerycsscheckbox

How to Access a PHP Variable within a JavaScript Function Argument

.php <?php $timeArray = [355,400,609,1000]; $differentTimeArray = [1,45,622, 923]; ?> <script type="text/javascript"> var i=0; var eventArray = []; function generateArray(arrayName){ eventVideoArray = <?php echo json_encode(arrayName); ...

javascriptphparrayshtml

Managing modules within the node_modules folder that have dependencies on .css files

Currently, I am involved in a project where we are utilizing a custom UI library that includes some dependencies. These components come with their own corresponding .css files. The structure of the source code looks like this: |- src |-| |- components ...

cssreactjswebpackreact-starter-kit

Is there a way to change the color of a number's font based on whether it is preceded by a "+" or "-" sign?

I am currently working on a stocks widget and I have a specific requirement. Whenever there is a change in value in the Change or Changeinpercent columns, I need to dynamically set the font color to red for a decrease (-) or green for an increase (+). Her ...

jqueryhtmlcssjson

Invoking functions within a jQuery extension

I've come up with this code to define the instance of my plugin: $.fn.someplugin = function(opts) { $(document).on('click', '.option-1', function() { alert(1); }); }; To make my plugin work, I utilize code similar to this ...

javascriptjqueryhtmleventsplugins

Changing class from 'current-menu-item' to 'active' for filtering

I'm currently developing a unique theme inspired by the Roots Theme, which now incorporates Twitter Bootstrap as its framework. One challenge I encountered is that it utilizes a custom 'walker' for navigation, making it difficult to simply ...

phpcsswordpresstwitter-bootstrapwordpress-theming

"Discover the power of D3.JS with three dazzling charts on a single page, plus a host of additional

As a student, I struggle with English and it makes me feel sorry and anxious... Despite that, I want to create three scatter plot charts on the same page using a single data file (csv). The dataset includes columns for Name, Height, Weight, and Grade (ra ...

javascripthtmlcssd3.js

Building a website using Bootstrap: A step-by-step guide

Wondering how I can incorporate all the cool Bootstrap components into a webpage. Is there a tool that offers live preview? Back in the day (web 1.0), Dreamweaver was my go-to for creating HTML and basic CSS, but what are some current tools where I can si ...

htmlcsstwitter-bootstrap

How can I delete a CSS class from an element?

Is there a way to remove the "ui-widget-content" class from the code below? It appears in multiple places throughout my code. Here is an example snippet: <pre> <form id="clientForm"> <div id="clientData"> <div id="gbox_grid_1" class=" ...

cssjquery-ui

How to use jQuery to change the background color of HTML table cells based on their content value

A dynamic table will be displayed based on the dropdown element selected. Below is a snippet of the code: <table id="myPlaneTable" class="table table-bordered"> <tr> <td style="width: 20%">Max speed</td> <td ...

javascriptjqueryhtmlbootstrap-4

The perplexity of CSS Menus

I have this HTML code, but I'm not sure how to write the CSS so that the drop-down menu appears when I hover over the main li. <li><a href="#">#</a> <ul class="sub_menu"> <li><a hre ...

htmlcss

What is the best way to reposition the origin of the canvas to the center?

As a beginner in html and JavaScript, I am currently working on a program that involves points and lines in a coordinate system. However, the canvas for html5 has its origin at the upper corner, and I need to create a coordinate system with the origin at ...

javascripthtmlcanvas

What is the best way to ensure that a sidebar occupies the entire height of our webpage?

Here is the current layout of my sidebar: I want it to always occupy full height, how can I achieve this? I've tried using height: 100%, but it doesn't seem to work. Here is my CSS code: #sidebar { /* Make sure to include all previously men ...

htmlcssbootstrap-4sassangular-material