How to center content vertically between two divs using Twitter Bootstrap CSS

Seeking assistance in vertically aligning two divs using the table cell method. My goal is to have a single-slider div vertically aligned in the middle, but my attempts have been unsuccessful. Can anyone provide guidance on this issue? I am feeling confused about it. Below is the code snippet:

.slider-area {
  height: 100%;
  width: 100%;
}

.silder-inner {
  height: 100%;
  display: table;
}

.single-silder {
  height: auto;
  display: table-cell;
  vertical-align: middle;
}
<div class="slider-area">
  <div class="silder-inner">
    <div class="single-slider">
      <div class="container">
        <div class="row">
          <div class="col-md-12">
            <h3>Holla You'r Welcome</h3>
            <h2>Best <span>Digital Agency</span> &<br>Business Farm</h2>
            <a href="" class="btn custom-btn slider-btn">Contract Now</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Answer №1

First and foremost, there seems to be a mistake in the class names used in your HTML and CSS. It should be single-slider in the HTML and .single-silder in the CSS. Additionally, you will need to specify a height for both the body and html elements.

body, html {
height: 100%;
width: 100%;
}
.slider-area{
height:100%;
width : 100%;
}
.silder-inner{
height:100%;
display:table;
}
.single-slider{
height:auto;
display:table-cell;
vertical-align:middle;
}

.mt-0 {
margin-top:0;
}
<div class="slider-area">
        <div class="silder-inner">
            <div class="single-slider">
                <div class="container">
                        <div class="row">
                            <div class="col-md-12">
                                <h3 class="mt-0">Hello, You're Welcome</h3>
                                <h2>Top-notch <span>Digital Agency</span> &<br>Business Farm</h2>
                                <a href="" class="btn custom-btn slider-btn">Contact Us Now</a>
                            </div>
                        </div>
                    </div>
            </div>
        </div>
    </div>

Answer №2

Embracing Flexibility:

body {
  margin: 0;
}

.slider-area {
  display: flex;
  height: 100vh;
}

.silder-inner {
  flex: 1;
  display: flex;
  align-items: center;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="slider-area">
  <div class="silder-inner">
    <div class="single-slider">
      <div class="container">
        <div class="row">
          <div class="col-md-12">
            <h3>Greetings! Feel free to explore</h3>
            <h2>Top-notch <span>Digital Marketing Services</span> &<br>Business Solutions</h2>
            <a href="" class="btn custom-btn slider-btn">Get in Touch Now</a>
          </div>
        </div>
      </div>
    </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

How can I ensure that my image remains responsive and aspect ratio-friendly?

Is there a way to accomplish this magical effect? I find myself in a similar situation. I require an image that remains centered while adjusting to fit the screen, all while maintaining its aspect ratio. ...

Instructions for importing jpeg images from a directory and displaying them in a rendered HTML file using R

Currently, I am utilizing the following approach to read files from a directory: require(magick) require(purrr) folder <- list.files("location/to/folder_directory", pattern = ".jpeg", full.names = T) image_plots <- map(folder, im ...

Center aligning elements in React using CSS with HTML can be achieved through Flexbox. However, sometimes images

Currently, I'm in the process of developing a website with react and I've encountered an issue with centering elements vertically on the left and right sides. It's been troubling me for a few days now and I haven't found a solution yet. ...

php mysqli failed to insert data

I've encountered an issue with my form-based registers oop. After pressing the button, the data is not being stored and there are no error messages appearing at all. <div class="form-group"> &l ...

Is it possible to avoid redundant loading of JS and CSS files when loading HTML pages with similar content?

Is it possible to prevent redundant loading of CSS and JS files on pages that share the same resources? For instance, if index.html is loaded in a browser and both have the same CSS and JS files as index1.html, can we skip reloading those resources when lo ...

Using Javascript, create a loop that navigates between two different pages and add a timer on one of them

How can I create a while loop that spans across 2 HTML pages or use a prompt to ask a question? If the wrong answer is provided, I would like to be redirected to another HTML page which will display for 5 seconds before returning to the prompt. This is my ...

Is it possible to incorporate HTML and CSS into Kivy and Python 3 development?

Currently in the process of creating a multi-touch kivy program using Python 3.52 on Linux. While Kivy is effective, I've encountered challenges with GUI development and experienced laggy animations. I've noticed that my program tends to slow do ...

Exclude footer height when implementing an infinite scroll feature using Jquery Ajax

I'm currently tackling the challenge of implementing ajax infinite scroll. I have the following code in place to trigger an ajax request once scrolling reaches the end: $(window).scroll(function(){ if($(window).scrollTop() >= ($(document).height() ...

having trouble customizing react-select to fit bootstrap sm styling

I am currently utilizing react-select multi-select feature from the npm package at this link. My project is styled using bootstrap 4, and I am aiming to have the react-select component match the size of the sm class in Bootstrap. To achieve this, I attempt ...

Toggle visibility of div element with a button press

Here is the div I have: <div class="margin-bottom hidden-xs"></div> This specific div is initially hidden on a small window size due to the bootstrap 'hidden-xs' class. However, I want it to be shown or hidden when the user clicks o ...

The appearance of HTML in JSP and CSS output in a Spring application is different from the local environment

For my web application's landing page, I created the design using HTML and CSS. Typically, I first design it on scratchpad.io before implementing it into my STS IDE. However, when I run the application, the output of the page appears different from th ...

Transform a 3D text rotation JavaScript file into an Angular component tailored TypeScript file

I have a javascript file that rotates text in 3D format, and I need help converting it into an Angular component specific TypeScript file. You can find the codepen for the original JavaScript code here. Below are my Angular files: index.html <!doctyp ...

HTML table with two rows of cell pairs

Is it possible to achieve the layout shown in this screenshot using an HTML table? I am aware that I can use <div> for this, but I would prefer to maintain the table formatting. https://i.sstatic.net/ESZkn.png ...

Proper syntax for jQuery's insertAfter() method when using selectors

I am working with a div <div id="imgDIV"><h4>My Debug DIV</h4></div> and I am trying to add a debug message at the top of the div, right after the first h4. This way, my most recent messages will be displayed at the top. $(' ...

Utilizing d-flex and flex-wrap for optimal layout display in Internet Explorer 11

I have come across this particular question before and I have attempted the various solutions provided, but unfortunately none of them seem to be working with my code. I am currently trying to address an issue where a series of inputs are displaying in tw ...

Scrollspy in bootstrap incorrectly highlights the navigation item as active

I seem to be having an issue with bootstrap scrollspy. For example: <header class="header pb-4 pb-lg-0 pt-4 sticky-top bg-white"> ... </header> <div class="container-fluid width content-main" data-bs-spy=" ...

How to customize JavaFx context menu appearance using CSS to achieve a full-width background color

I am trying to customize my context menu, but I'm having trouble with the white space between the menu item and the context menu border. Here is an example: view the rendered context menu with CSS styles What I want is for the color to fill the entir ...

Prevent the propagation of a particular CSS class's inheritance

I need to make modifications to an existing HTML5 app that features two unique themes. Here's an example of the current structure: <body class="theme1 theme2"> <div id="div1">I'm satisfied with both themes</div> <di ...

Is it possible to refresh Bootstrap using -bootswatch.scss?

As someone new to SCSS, I am currently in the process of transitioning a website from Bootstrap 3 to Bootstrap 4. In the past, with Bootswatch 3, all I had to do was replace the bootstrap.less and variables.less files with the theme downloaded from Bootswa ...

Is it possible for web browsers to accommodate various HTML5 pattern regexp functionalities?

A basic regular expression pattern was implemented in a payment form on our website for customers: <input type="text" pattern="(|\$)[0-9]*(|\.[0-9]{2})" title="Please enter a valid number in the amount field" required> This pattern ...