Tips for aligning div elements in the middle of a container

I am facing a challenge in centering an interactive element called "container1" below the Contact and Paragraph text.

Currently, the element appears off-center to the left, and I would like it to be perfectly centered while still ensuring that the page remains responsive.

Although I can achieve centering the element, it compromises the responsiveness of the page on mobile platforms as it continues to appear offset. My priority is to maintain the responsiveness of the page.

View Image of Issue

.container1 {
  width: 900px;
  margin: 250px auto 0;
  display: flex;
}

.container1 .box {
  position: relative;
  width: 300px;
  height: 100px;
  box-sizing: border-box;
  text-align: center;
  margin: 0 10px;
  background: linear-gradient(to right, #4458dc 0%, #854fee 100%), radial-gradient(circle at top left, #4458dc, #854fee);
  overflow: hidden;
  border-radius: 4px;
  box-shadow: 0 0 0 2px rgba(118, 85, 225, 1);
}

.container1 .box .icon {
  width: 100%;
  height: 100%;
  background: linear-gradient(to right, #4458dc 0%, #854fee 100%), radial-gradient(circle at top left, #4458dc, #854fee);
  transition: 0.5s;
}

.container1 .box .icon .fa {
  font-size: 4em;
  line-height: 100px;
  color: #ffffff;
}

.container1 .box:hover .icon {
  transform: scale(0);
}

.container1 .box .details {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #ffffff;
  transition: 0.5s;
  transform: scale(2);
  opacity: 0;
}

.container1 .box:hover .details {
  transform: scale(1);
  opacity: 1;
}

.container1 .box .details h3 {
  margin: 0;
  padding: 0;
  line-height: 100px;
  font-size: 24px;
  color: #000000;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<a name="Contact"></a>
<section class="contact_area section_gap">
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-lg-8 text-center">
        <div class="main_title">
          <h2>Contact</h2>
          <p>Please contact me with any questions, comments, or concerns</p>
        </div>
      </div>
    </div>
  </div>
  <div class="container1" style="margin: auto; justify-content: center">
    <div class="col-lg-8" style="display: inline-block">
      <div class="box" style="">
        <div class="icon"><i class="fa fa-envelope" aria-hidden="true"></i></div>
        <div class='details' style="">
          <h3><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="eb86928e868a8287ab8c868a8287c5888486">[email protected]</a></h3>
        </div>
      </div>
    </div>
  </div>
</section>

htmlcssbootstrap-4

Answer №1

.container1 .box {
  position: relative;
  width: 300px;
  height: 100px;
  box-sizing: border-box;
  text-align: center;
  margin: auto;
  background: linear-gradient(to right, #4458dc 0%, #854fee 100%), radial-gradient(circle at top left, #4458dc, #854fee);
  overflow: hidden;
  border-radius: 4px;
  box-shadow: 0 0 0 2px rgba(118, 85, 225, 1);
}

.container1 .box .icon {
  width: 100%;
  height: 100%;
  background: linear-gradient(to right, #4458dc 0%, #854fee 100%), radial-gradient(circle at top left, #4458dc, #854fee);
  transition: 0.5s;
}

.container1 .box .icon .fa {
  font-size: 4em;
  line-height: 100px;
  color: #ffffff;
}

.container1 .box:hover .icon {
  transform: scale(0);
}

.container1 .box .details {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #ffffff;
  transition: 0.5s;
  transform: scale(2);
  opacity: 0;
}

.container1 .box:hover .details {
  transform: scale(1);
  opacity: 1;
}

.container1 .box .details h3 {
  margin: 0;
  padding: 0;
  line-height: 100px;
  font-size: 24px;
  color: #000000;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<a name="Contact"></a>
<section class="contact_area section_gap">
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-lg-8 text-center">
        <div class="main_title">
          <h2>Get in Touch</h2>
          <p>Feel free to reach out with any questions or inquiries.</p>
        </div>
      </div>
    </div>
  </div>
  <div class="container container1">
    <div class="row justify-content-center">
    <div class="col-lg-8" style="display: inline-block">
      <div class="box" style="">
        <div class="icon"><i class="fa fa-envelope" aria-hidden="true"></i></div>
        <div class='details' style="">
          <h3><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7815011d15191114381f15191114561b1715">[email protected]</a></h3>
        </div>
      </div>
    </div>
</div>
  </div>
</section>

Answer №2

Here's an example you can utilize:

.element { display:flex; justify-content:center; }

Answer №3

Have you ever thought about why you are using chained classes? You could simply call the class and apply the style directly. Any inline css will always take precedence over styles from external files or style tags. If things aren't aligning as expected, there might be some conflicting styles in play. Apart from utilizing @media queries to accommodate different screen sizes on mobile devices, one trick I often use to center elements is setting left to 50% and then applying a negative margin-left equal to half of the element's width. For instance, for your element, the CSS would look like this:

.detail {
position: absolute;
top: 0px;
width: 300px;  
/*(you can also use percentage values like 80%)*/
left: 50%;
margin-left: -150px;
/*(or say, -40% if working with percentages)*/
text-align: center;
}

This code positions the element at the center from its left side and corrects the offset caused by the element's width.

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

What is the best way to extract pricing information from Udemy?

Important: I haven't been able to find a relevant solution in similar questions. How can I extract prices from Udemy using web scraping? Scraping Data From Udemy's AngularJs Site Using PHP How do I obtain promotional prices using the Udemy API ...

pythonhtmlseleniumweb-scraping

mobile device experiencing issues with bootstrap d-flex alignment

I have a parent div with three nested divs structured like this: .button-class { margin-top: 0.5rem; margin-right: 0.5rem; margin-left: 45rem; } .svg-class { margin-top: 1rem; } <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/&l ...

htmlcssangularbootstrap-4flexbox

How can I center the horizontal scroll position of a div when it loads?

Currently, I am working on a project where I have a parent div with a width of 100vw. Inside this parent div, there is another div with a width of 150vw and the overflow-x property set to scroll. My goal is to make this inner div appear in the center of ...

htmlcss

An issue has arisen when trying to utilize the HTML input type="file" in ASPX

I need help troubleshooting an issue with my form that includes the "Upload" control using HTML input type="file" Below is the snippet of my HTML code: <form id="form1" runat="server" enctype="multipart/form-data"> <div class="form-group"> ...

c#asp.nethtml

Is there a way to create a dynamic CSS for a custom JSF component through code generation?

I am currently developing a custom JSF component that displays content in multiple columns in a "responsive" manner. This component utilizes the "CSS Multi-column Layout Module" (http://www.w3.org/TR/css3-multicol/) (tutorial available in French: ). Belo ...

htmlcssjsfjsf-2

The form control classes in Bootstrap 4 are experiencing issues and are not performing as expected

1) The border color of form input elements does not change to green, orange, or red as expected. 2) The related gif like "ok" or "x" is not being inserted into the correct place of the input field. I tried using form-control-success, form-control-warning ...

htmlcssbootstrap-4

Displaying Edit and Delete options upon hovering over the data row

I'm working on a table that uses ng-repeat on the <tr> element. In the last column of each row, I have edit/delete links that should only be visible when the user hovers over the <tr> element. <tr ng-repeat="form in allData | filter:se ...

cssangularjsng-class

Enter the value into the AngularJS textbox

I am currently working on the Edit Profile page using AngularJS Typically, a list of details will be displayed. When one item in the list is clicked, a specific method is called. $scope.editContact = function(user){ $('#editContactSecti ...

htmlangularjs

Adjusting the height of content in Angular Material 2 md-tab

I've recently started working with angular material and I'm facing an issue while trying to implement md-tab into my application. The problem is that I can't seem to style my tab content to take up the remaining height of the screen. Could s ...

javascriptcssangularangular-material

Using JS/jQuery to modify linear-gradient

I'm currently working on a project that involves using input type color. My goal is to create a gradient using these colors. Any suggestions on how I can achieve this? Here are the color tags: <div id="part1" align=center> <input type="colo ...

javascriptjqueryhtmlcss

The background on my modal remains unchanged

I have integrated a modal using Iframe for user login/registration on my website. Here is the HTML code: <div class="modal" id="ays-popin-connexion" aria-hidden="true"> <div class="modal-body" aria-hidden="true"> <iframe src=" ...

javascripthtmlcssmodal-dialog

Is it possible to manipulate an Angular #variableName in order to retrieve an ElementRef for an HTML element?

Suppose I have a scenario where I create a button like this: <button #myButton>My Button</button> ...and then use ViewChild in the following way: @ViewChild('myButton', { static: true }) createButton: ElementRef; In this case, creat ...

javascripthtmlangulartypescriptangular-material

How can I use jQuery to automatically redirect to a different HTML page after updating a dynamic label?

When I click on a button in first.html, a function is called to update labels in second.html. However, despite being able to see second.html, I am unable to see the updated values in the labels. Can someone please advise me on how to achieve this? functi ...

javascriptjqueryhtml

Halt the execution of a function upon clicking a div element

I'm currently working on a function that needs to be stopped when a div with the class "ego" is clicked. This function toggles the visibility of the header based on the scroll position and should only run by default. Below is the code snippet: $("#e ...

javascriptjqueryhtmlcss

Guide on creating a 5px space between columns in Bootstrap 4, column by column

click here for image description[Looking to add 5px of space between columns in Bootstrap 4] Would appreciate guidance on how to space out Bootstrap 4 columns by 5px? ...

csstwitter-bootstrap

Learn the method to conceal rows within a table simply by toggling a button

I need a function that will hide the rows below a row with a header and button, and only reveal them when another row with a header and button is clicked. When one of the +/- buttons is clicked, it should hide or expand all the rows with data content. http ...

javascripthtmljquerycss

Steps to inject HTML content via id using a technology such as AngularJS' ng-include

My current project involves using AngularJS to compile a directive into the main page. This directive contains a series of buttons that dynamically change based on its internal state. I am interested in relocating these buttons to a menu-bar within the pag ...

javascripthtmlangularjs

Trigger the function in ng-change each time the same option is clicked repeatedly

Here is the code I am working with: angular.module("myApp", []).controller("myController", function($scope) { $scope.currentOption; $scope.showWindow = false; $scope.myOptions = [{ id: 1, name: 'This opens the window' }, { ...

htmlangularjsselect

Align the div in the center horizontally

Looking at this page, my goal is to center the main #container div horizontally in relation to the page. In a typical scenario, I would simply add a CSS rule like this, #container { margin: 0 auto } However, the layout of this specific page (which I didn ...

jquerycsspositioningcss-position

Change the class of an element only within the div that is directly below it

Trying to achieve: Visit this link In my navigation menu, I have two folders with subpages under them. The CSS for displaying the page titles within the folder is as follows: .main-nav .subnav ul {display:none; transition: all 100ms ease-in-out; } .mai ...

jquerycsstogglesquarespace