Centering a div vertically results in a slight horizontal misalignment

I'm attempting to vertically center a div using the position and transform CSS method. However, it seems to be slightly off-centered horizontally. Here is my code:

HTML: 

<div class="row container-fluid top_header">
      <div class="col-12 container-xl">
        <div class="top_header_texts"></div>
      </div>
</div>

CSS:

.top_header {
  // CSS styles
}

.top_header_texts {
  // CSS styles
}

Result: https://i.sstatic.net/UcUmM.png

There appears to be a slight left gap in the alignment which is somewhat bothersome. I've tried various solutions but have not been able to resolve this issue.

htmlcss

Answer №1

In case you are utilizing the most recent version of bootstrap, which is 4.1.1.

The .container-fluid and .col-12 come with padding attributes that can be overridden using the .p-0 class.

<div class="row container-fluid top_header p-0">
      <div class="col-12 container-xl p-0">
        <div class="top_header_texts"></div>
      </div>
</div>

Online Verification Link

Answer №2

container-fluid and container-xl classes in Bootstrap add padding-left:15px. It's recommended to reset this to zero.

Sample HTML:

<div class="row container-fluid top_header paddingLeft_0">
  <div class="col-12 container-xl paddingLeft_0">
    <div class="top_header_texts"></div>
  </div>
</div>

Corresponding CSS:

div.paddingLeft_0 {
    padding-left:0;
}

Answer №3

To resolve the issue, simply add a text-align: center property, like this:

.top_header {
  box-sizing: border-box;
  background-image: radial-gradient(circle at 19% 90%, rgba(190, 190, 190,0.04) 0%, rgba(190, 190, 190,0.04) 17%,transparent 17%, transparent 100%),radial-gradient(circle at 73% 2%, rgba(78, 78, 78,0.04) 0%, rgba(78, 78, 78,0.04) 94%,transparent 94%, transparent 100%),radial-gradient(circle at 45% 2%, rgba(18, 18, 18,0.04) 0%, rgba(18, 18, 18,0.04) 55%,transparent 55%, transparent 100%),radial-gradient(circle at 76% 60%, rgba(110, 110, 110,0.04) 0%, rgba(110, 110, 110,0.04) 34%,transparent 34%, transparent 100%),radial-gradient(circle at 68% 56%, rgba(246, 246, 246,0.04) 0%, rgba(246, 246, 246,0.04) 16%,transparent 16%, transparent 100%),radial-gradient(circle at 71% 42%, rgba(156, 156, 156,0.04) 0%, rgba(156, 156, 156,0.04) 47%,transparent 47%, transparent 100%),radial-gradient(circle at 46% 82%, rgba(247, 247, 247,0.04) 0%, rgba(247, 247, 247,0.04) 39%,transparent 39%, transparent 100%),radial-gradient(circle at 50% 47%, rgba(209, 209, 209,0.04) 0%, rgba(209, 209, 209,0.04) 45%,transparent 45%, transparent 100%),linear-gradient(90deg, rgb(84, 36, 210),rgb(44, 27, 154));
  background-size: cover;
  background-repeat: no-repeat;
  margin: 0 0 0 0;
  flex: 0 0 100%;
  height: 95vh;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.top_header .col-12 {
  width: 100%;
}

.top_header_texts {
  margin: 0 auto;
  color: White;
  font-weight: bold;
  font-size: 60px;
  background-color: red;
  text-align: center
}
<div class="row container-fluid top_header">
      <div class="col-12 container-xl">
        <div class="top_header_texts">text</div>
      </div>
</div>

Answer №4

Utilize the classes .text-center or .mx-auto for aligning content in the 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

Embed a webpage link or interactive hotspot within an equirectangular panorama using Three JS

I am seeking a comprehensive guide, tutorial, or extensive documentation on how to embed a hyperlink within an equirectangular panorama using Three.js. Utilizing the equirectangular panorama demo, I aim to learn how to insert elements like circles or vari ...

javascripthtmlthree.js

Guide on showing a dropdown menu depending on the data in the current array index within a table

I am working with an object array that I want to display in a table. My goal is to have a dropdown select if the 'validvalues' field is not empty. How can I achieve this so that each row in the table has different options from the array? When &ap ...

javascripthtmlangulartypescript

Arranging Check Boxes Side by Side

I am struggling to properly align the three checkboxes and tables next to each other. I have managed to get the checkboxes on the same row, but aligning them neatly has proven to be a challenge. Using Notepad++ as my development tool, I am facing formattin ...

javascripthtmlcss

The printout of the webpage is not aligning properly on an A4 page

Currently, I have been utilizing the JavaScript function window.print() to print a webpage that contains a header and footer. The height of this webpage is dynamic, as it is dependent on the content of an HTML table within the page. However, I have encou ...

javascripthtmlcssprinting

What are some methods for vertically centering text when using a large font-awesome icon?

Imagine I have a stylish button created using Bootstrap, featuring a Font Awesome icon and some text: <div> <i class='icon icon-2x icon-camera'></i> hello world </div> Is there a way to vertically center the text ...

htmlcssfont-awesome

Struggling with implementing click events on Ionic-Calendar 2?

Attempting to implement a (click) event for ionic-calendar 2 where it deactivates a button if the user clicks on a date that has already passed. The issue I am facing is that when I initially click on a past date, the button remains enabled. However, upon ...

htmltypescriptionic3

Out of the blue div, could you lend your assistance?

I have a code that displays 5 random images with corresponding text. My challenge is that I want to separate the text into another div so that I can add another function to it, while still keeping the images random with their corresponding text. <scr ...

javascripthtmlcss

Center an image of varying height within a container of fixed height

I have this HTML structure, and while I am open to making changes, I would prefer to keep it simple: <div class="c"> <img ...> </div> The image within the div will vary in size and I want it to be vertically centered. Currently, I ...

htmlcssvertical-alignment

Tips for configuring the navigation links on the current page using Bootstrap

In my Angular application, I have set up navigation links for home, about, notifications, and logout. However, when I click on the home link, it redirects me to the login page instead of remaining on the current page. I need the functionality to stay on ...

htmlangulartwitter-bootstrapbootstrap-4angular-ui-bootstrap

Creating Dynamic Web Design: Horizontal Scrolling Window and Adaptive HTML Content

After spending countless hours researching online, I am still unable to find a solution for responsive web design that maintains the aspect ratio of both the window and HTML body. Here are examples of what I'm looking for: original view, stretched le ...

cssresponsive-designviewport

ReactStrap: Issue with displaying an elongated dropdown menu within a table cell

I am facing an issue with a dropdown menu embedded inside a table: https://i.sstatic.net/iOusF.png The dropdown list is quite long with 16 items. However, when I try to scroll down to access the last items, the entire table scrolls down along with the d ...

javascriptcssreactjsbootstrap-4reactstrap

Adjusting the visibility of a div as you scroll

I'm trying to achieve a fade-in and fade-out effect on div elements when scrolling over them by adjusting their opacity. However, I'm facing difficulties in getting it to work properly. The issue lies in the fact that my div elements are positio ...

javascripthtmljquerycss

Downloading a PDF file on the server is not supported by React

import React from 'react'; import Navigation from "../components/Nagivation"; const Home = () => { return ( <div className="home"> <Navigation/> <div className="homeC ...

htmlreactjs

HTML- Any suggestions on how to troubleshoot my sticky navbar not functioning properly?

I'm having trouble creating a sticky navbar. I've attempted to use z-index: 999 but it's not behaving as expected. * { margin: 0; padding: 0; } .navbar { display: flex; align-items: center; justify-items: center; position: ...

javascripthtmlcss

The jquery click event does not trigger the closing of the sliding menu

Check out this relevant JSFiddle link: http://jsfiddle.net/7u2fy/ I tried creating a slide-in menu that would appear when a button is clicked and disappear when the escape key is pressed or when anywhere outside of the menu is clicked. I also wanted to da ...

javascriptjqueryhtmlcss

Is it possible to divide an HTML document into separate files for structure and content?

In the world of software development, it's common knowledge that moving strings to separate files is a best practice. This makes it easier for translators and copyrighters to make modifications without having to delve into the code, and it streamlines ...

htmloptimizationseparation-of-concernsdesign-principles

How can I stop my child page from taking on the link color (red) of the parent theme?

My child page should have white colored links instead of inheriting the red link color from the parent theme. What changes do I need to make in the HTML/CSS to achieve this? Parent Page CSS a { text-decoration: none; color: red; } a:hover { colo ...

htmlcssparent-childinheritance

Prevent ng-repeat from rendering the contents of my div

Currently, I am in the process of modifying a website for which I need AngularJS. I am trying to use the ng-repeat command to display some documentation on the site. However, whenever I add the ng-repeat within a div, it seems to "destroy" the layout and I ...

javascripthtmlangularjs

Reorder the placement of file inputs that have been prepended

Would it be feasible to have the prepended file input display below the preceding element rather than above it? This way, the "Select a file:" text would remain at the top of all newly added elements. $(document).ready(function(){ $(' ...

javascriptjqueryhtml

Including visuals in HTML email communications

When using PHP's mail() function to send HTML emails, I typically include the following header: $header = "MIME-Version: 1.0\r\n"; $header .= "Content-type: text/html; charset=iso-8859-1\r\n"; Recently, I wanted to embed an imag ...

phphtmlemail