What could be causing the vertical centering issue with my text inside a bootstrap row div?

I have a Bootstrap row and I'm attempting to center some text vertically, but it's only centered horizontally.

Current Layout:

https://i.sstatic.net/XcqHi.png

Desired Layout:

https://i.sstatic.net/ZegKG.png

The second image shows the phrase "contact me" centered both vertically and horizontally within the div.

Code

This is my HTML code:

<div class="col-lg-6">
                    <h1 class="landing-header">PLACEHOLDER</h1>
                    <p class="landing-text">PLACEHOLDLER</p>

                    <div class="row landing-contact-me">
                        <div class="col-2"><a href="linkedin.com"><img class="img-fluid landing-socials"
                                    src="assets/linkedin.png"></a>
                        </div>
                        <div class="col-2"><a href="instagram.com"><img class="img-fluid landing-socials"
                                    src="assets/instagram.png"></a>
                        </div>
                        <div class="col-8 center">
                            <p id="landing-contact-me-text">contact me<p>
                        </div>
                    </div>
                </div>

I attempted to use the Center class for the parent div without success.

Here is the CSS for the relevant classes:

.landing-header {
    font-family: 'DM Serif Display';
    font-size: 4rem;
}

.landing-text {

    font-family: 'Montserrat';
    font-size: 1.25rem;
    font-weight: 200;
    margin-right: 25%;
    text-align: justify;

}
.landing-contact-me {
    margin-top: 30%;
    margin-right: 25%;
    padding: 3% 2% 3% 2%;
    border-radius: 25px;
    background-color: white;
    box-shadow: 0px 0px 90px rgba(0, 0, 0, 0.1);
    align-items: center;
    text-align: center;
    
}
.landing-socials{
 max-width: 100%;
 height: auto;
}

#landing-contact-me-text{
    font-family: 'Montserrat';
    font-size: 1.25rem;
    font-weight: 200;
    text-align: center;
}


.center{
    text-align: center;
    vertical-align: middle;
}

Answer №1

To achieve vertical and horizontal alignment in the .landing-contact-me div, you can remove align-items and text-align properties.

Instead, apply display: flex and justify-content: center in your CSS to ensure proper alignment of elements within this div.

After making these adjustments, your CSS should appear like this:

.landing-contact-me {
  margin-top: 30%;
  margin-right: 25%;
  padding: 3% 2% 3% 2%;
  border-radius: 25px;
  background-color: white;
  box-shadow: 0px 0px 90px rgba(0, 0, 0, 0.1);
  display: flex;
  justify-content: center;
}

Answer №2

To center the columns of this row vertically, simply add the align-items-center class along with the row class.

<div class="row landing-contact-me align-items-center">

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

JavaScript random number functionality experiencing an unexpected problem

function generateRandomNumbers(){ var max = document.getElementById('max').value; var min = document.getElementById('min').value; var reps = document.getElementById('reps').value; var i; for (i=0; i<reps ...

Comparing Django forms to conventional forms

As I work on my Django website, I find myself torn between utilizing Django-Forms and sticking with the traditional hand-coded HTML forms. While HTML forms offer certain benefits that align with my needs, I must admit that I have also experienced advanta ...

An issue arose while attempting to retrieve information based on the specified ID within the database

I am facing a challenge that I need help with, I have a webpage that displays questions fetched from a database and I have created a comments section for each question. How can I retrieve comments based on the post_id? I attempted to fetch them as usual bu ...

Understanding CSS classes in ReactJS Material UI componentsJust wanted to clarify some things

When it comes to styling Material UI components, the recommended approach is to utilize their useStyles function. Here's an example: const useStyles = makeStyles(theme => ({ root: { marginTop: '15px', display: 'f ...

Unable to See Success Notification on First Attempt

I am facing an issue with displaying a message when adding a new record. The first time I add a record, the message shows up correctly. However, if I try to add another record, the message does not appear even though the record is added successfully. Here ...

Implementing a design aesthetic to installed React components

After downloading a react multiselect component created by an individual, I installed it using npm install .... and incorporated the component in my react code with <MultiSelect .../>. The dropdown checkbox 'menu' is designed to allow users ...

LabeFor does not automatically create the display-lable class attribute

When setting up a new MVC project, the default Site.css file typically includes the following styles: /* Styles for editor and display helpers ----------------------------------------------------------*/ .display-label, .editor-label { font-weight: ...

What are some ways to decrease the dimensions of my dateTimePicker?

I'm looking to decrease the dimensions of my datetime picker box. Here's an image of my current dateTimePicker: https://i.stack.imgur.com/MeJlq.png Below is the component I'm using: import React, { useState } from 'react'; import ...

What is the best way to conceal an element when another element is given a specific class?

Imagine you have 2 buttons The first button <button class="arguments variation-one">Some text</button> - this button has dynamic classes like: variation-one, variation-two, variation-three, but the .arguments class remains static. a ...

What is the best way to showcase an image using CSS on my personal computer?

It's a bit embarrassing to admit, but I'm learning some new concepts and struggling with this one. On my computer, there's a folder named Test that contains an index.html file, a CSS subfolder with an index.css file, and an images subfolder ...

Tips for ensuring that flex-box children can scroll properly

I'm having trouble getting the content to scroll correctly while dealing with nested flex-box structures. Below is my CSS code: html,body,#root{ width:100%; height:100%; padding:0; margin:0; } .flex-fill{ height:100%; width:100%; ...

Scrollable content below the div

I have encountered an issue where a div is positioned above another div, and when I scroll the upper div to the bottom, it ends up scrolling the entire body. To better illustrate this problem, I have created a demo on JSFiddle: http://jsfiddle.net/2Ydr4/ ...

Is there a way to insert a record upon the user clicking on the Add Record button?

// Here is my Component code // I want to figure out how to add a new row to the table with fresh values. import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-uom', templateUrl: './uom.component.html ...

Leveraging the "dialogclose" event within jQuery Mobile

Is there a way to change an image once it is clicked and change back when the dialog it links to is closed? I found a potential solution on this site, but after modifying it for my needs, it doesn't seem to work. Can anyone help me figure out what I a ...

Struggling with Responsiveness: Challenges with Detailed Information and Image Grid Design

Encountering challenges in achieving the desired responsiveness for a grid layout consisting of details and an image. The layout displays correctly on desktop screens, with details on the left and the image on the right. However, on mobile screens, the ima ...

What could be causing the .text method to not retrieve text even when it is present?

Currently experimenting with web scraping using Selenium to extract the color of a particular dress. Despite finding the text content under the 'screen-reader-text' class when inspecting the website, my attempts at fetching it result in an empty ...

Ways to enlarge a YouTube thumbnail upon loading using JavaScript

I recently found a solution to my question on how to prevent YouTube videos from repeating even when different embedded codes are used. I have a specific need to resize the thumbnail image of my YouTube video to width:146px and height:124px when the page l ...

Hexagonal Shape with Rotating Border Gradient in CSS

Looking to create a hexagon shape with a rotating gradient border. Here's an example GIF for reference: https://i.stack.imgur.com/Ah1AO.gif I attempted using CSS only but the use of :after and :before tags proved limiting since they rely on border s ...

When CSS 3 checkbox value is toggled to "off", it returns as null

I am currently using a checkbox element with the following HTML: <div class="onoffswitch"> <input type="checkbox" name="showOnNavigation" class="onoffswitch-checkbox" id="showOnNavigation" checked> <label class="onoffswitch-label" f ...

The navbar in mobile view is not affected by the z-index property

Having created a navbar with scroll effect, I am encountering an issue with the mobile responsive view. Can someone please assist me in solving this problem? I would like to position the bottom nav-list below the navbar in the mobile view when clicking on ...