How to center elements vertically within a div using CSS

I am trying to align the contents vertically in a div, but the first div does not seem to be centered like the second one. I need both of them, along with their children, to be vertically centered inside the div.

For example:

[type='file'] {
  border: 0;
  clip: rect(0, 0, 0, 0);
  height: 1px;
  overflow: hidden;
  padding: 0;
  position: absolute !important;
  white-space: nowrap;
  width: 1px;
  &:focus {
    +label {
      box-shadow: 0 0 0 1px #137cbd, 0 0 0 3px rgba(19, 124, 189, 0.3) !important;
    }
  }
}

.PcYqm {
  box-sizing: border-box;
  padding-bottom: 5px;
  margin: 10px;
  background: red;
}

.UtilClasses_NO_MARGINS__lwdL1 {
  margin: 0 !important;
}

.gYoMm {
  box-sizing: border-box;
}

.eZmlQJ {
  box-sizing: border-box;
  padding-top: 5px;
  margin: 10px;
  background: green;
}

.bcHrqA {
  box-sizing: border-box;
  margin-left: 10px;
  margin-right: 10px;
}

Any suggestions on how to achieve this? I am open to using Bootstrap as well.

csstwitter-bootstrapbootstrap-4sass

Answer №1

To update your css styles, follow these instructions:

.PcYqm {
  box-sizing: border-box;
  padding-bottom: 5px;
  padding-top: 5px; // This line has been newly added
  margin: 10px;
  background: red;
}

.eZmlQJ {
  box-sizing: border-box;
  padding-top: 5px;
  padding-bottom: 5px; // This line has been newly added
  margin: 10px;
  background: green;
}

Then, in your HTML code where you have labels for "Select File", apply the following CSS:

<label for="uploadFileExport" style="margin-top: .5rem" ... 
<label for="uploadFileSubmit" style="margin-top: .5rem" ...

Instead of using inline CSS, you could consider creating a class for these labels. However, keep in mind that Bootstrap labels might also affect their styling.

Answer №2

Update: Now seamlessly integrated into your HTML.

[type='file'] {
  border: 0;
  clip: rect(0, 0, 0, 0);
  height: 1px;
  overflow: hidden;
  padding: 0;
  position: absolute !important;
  white-space: nowrap;
  width: 1px;

  &:focus {
    + label {
      box-shadow: 0 0 0 1px #137cbd, 0 0 0 3px rgba(19, 124, 189, 0.3) !important;
    }
  }
}

.PcYqm {
    box-sizing: border-box;
    padding-bottom: 5px;
    margin: 10px;
    background: red;
}

.UtilClasses_NO_MARGINS__lwdL1 {
    margin: 0 !important;
}

.gYoMm {
  box-sizing: border-box;
}

.eZmlQJ {
    box-sizing: border-box;
    padding-top: 5px;
    margin: 10px;
    background: green;
}

.bcHrqA {
    box-sizing: border-box;
    margin-left: 10px;
    margin-right: 10px;
}
        <!-- Style dependencies -->
        <link href="https://unpkg.com/normalize.css@^7.0.0" rel="stylesheet" />
        <!-- Blueprint stylesheets -->
        <link href="https://unpkg.com/@blueprintjs/icons@^3.4.0/lib/css/blueprint-icons.css" rel="stylesheet" />
        <link href="https://unpkg.com/@blueprintjs/core@^3.10.0/lib/css/blueprint.css" rel="stylesheet" />
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>

        <div class="bp3-card bp3-elevation-1 p-2">
          <div class="src__Box-sc-1sbtrzs-0 PcYqm">
            <div class="container">
              <div class="justify-content-center align-items-center row p-2">
                <div class="d-flex col-4">
                  <div class="bp3-button-group align-items-center"><span class="bp3-popover-wrapper"><span class="bp3-popover-target"><span icon="help" tabindex="0" class="bp3-icon bp3-icon-help bp3-intent-primary"><svg data-icon="help" width="16" height="16" viewBox="0 0 16 16">
                            <desc>help</desc>
                            <path d="M8 0C3.58 0 0 3.58 0 8s3.58 8 8 8 8-3.58 8-8-3.58-8-8zm1 13H7v-2h2v2zm1.93-6.52c-.14.32-.35.64-.62.97L9.25 8.83c-.12.15-.24.29-.28.42-.04.13-.09.3-.09.52V10H7.12V8.88s.05-.51.21-.71L8.4 6.73c.22-.26.35-.49.44-.68.09-.19.12-.38.12-.58 0-.3-.1-.55-.28-.75-.18-.19-.44-.28-.76-.28-.33 0-.59.1-.78.29-.19.19-.33.46-.4.81-.03.11-.1.15-.2.14l-1.7-.25c-.12-.01-.16-.08-.14-.19.12-.82.46-1.47 1.03-1.94.57-.48 1.32-.72 2.25-.72.47 0 .9.07 1.29.22s.72.34 1 .59c.28.25.49.55.65.89.15.35.22.72.22 1.12s-.07.75-.21 1.08z" fill-rule="evenodd"></path>
...
...
...

Previous post:

.container {
  background-color: #2196f3;
}

.container > .wrapper {
  padding: 3rem 0;
}

/* optional */

span {
  display: block;
 }
<div class="container">
  <div class="wrapper">
    <span class="item-1">
      Item 1
    </span>
    <span class="item-2">
      Item 2
    </span>
  </div>
</div>

There are numerous techniques to achieve vertical centering, you could utilize flex-box, or a combination of position: absolute, top: 50% and transform: translateY(-50%), all are effective.

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

angular - apply custom background styles without resorting to disabling ViewEncapsulation

I can't seem to figure out why I'm struggling to set the background of my component correctly without having to use ViewEncapsulation.None. Currently, with ViewEncapsulation.None, my styles look like this: * { margin: 0; padding: 0; ...

cssangular

Tips for aligning navbar-items vertically in a Bootstrap 5.3 navbar

The navbar is currently transparent, but when scrolling down, it has a white background. However, in the white background, it is not vertically centered. I would greatly appreciate it if you could provide the solution as a URL in CodePen Code: <lin ...

htmlcssbootstrap-5

Setting fixed width for table headers in Bootstrap 3

Can someone explain why the width of "th" is not fixed and new line breaks occur when the content is too big? Currently, the "th" width expands. How can this be fixed? The width of my first column is col-lg-2. Click here for an example image ...

htmlcsstwitter-bootstrap-3html-table

Align buttons in the center of a card or container using HTML and CSS

Hi everyone, this is my first time posting so please go easy on me. I've been struggling to align the buttons at the bottom of my cards to make them look neater. I've tried using flexbox but it doesn't seem to be working. Some people have su ...

htmlcssbuttonflexbox

Tips on incorporating a button to enable text formatting to 'bold' within a Text Area on an HTML webpage:

In the process of creating an online text editor, I am looking to incorporate a button above the text area that can be used to make selected text and/or upcoming text bold. To provide more clarity, I envision adding a bold button similar to the one found a ...

htmlcss

Turn your mouse cursor into a dynamic and animated image using jQuery

I've implemented a code snippet that replaces the cursor with 2 images placed at a small distance from each other: $(document).mousemove(function (e) { $("#firstImage").css({ left: e.pageX, top: e.pageY }); ...

javascriptjquerycssanimation

Stop the bubbling effect of :hover

How can the hover effect be prevented for the parent element when hovering over its children? Please take a look at the following code snippet: const parent = document.getElementById('parent') parent.onmouseover = function testAlert(e) { /* ...

javascripthtmlcsssass

How can HtmlUnit be used to identify and address website pages that display errors?

I've encountered an issue while trying to access this Ajax page through my Java program using the HtmlUnit 2.15 API. It seems that the problem arises from a broken link to a missing file located here. This is the snippet of code I'm working with ...

javajavascriptcssajaxhtmlunit

JQuery Mobile header style vanishing when applied to a page generated dynamically

My second page retrieves data from an Ajax call on the home page, but the header lacks JQuery styling and I suspect a connection between the two. Here is the HTML for the dynamically generated page: <div data-role="page" id="breakdownDialog" data-add-b ...

cssjquery-mobilemobiledynamically-generated

Incorporate a class into a link within the wp_list_pages function

I've been experimenting with creating a hover effect on list items using the wp_list_pages() function in my Wordpress theme. Despite my efforts, I've hit a roadblock in getting the hover effect to work properly. As a beginner in web development, ...

phphtmlcsswordpress

Moving through divisions that share a common class name using jquery

I am experimenting with a plugin that allows me to attach popups to images. My goal is to enable navigation between all popups using previous and next buttons upon clicking on a popup. Below is the element when it's displayed: <div class="imp-too ...

javascriptjqueryhtmlcss

Inject CSS styles into panelgrid on-the-fly

How can I pass a color code property fetched from ebean to a css function? <h:panelGrid id="testpanel" columns="#{message.no_of_columns}" rows="#{message.no_of_rows}" styleClass="dynamicGrid"> <c:forEach items="#{bLDashBoar ...

cssjsf

Prevent a HTML button from being clicked multiple times before it disappears (using Django)

I am currently working on a Django project that involves events where users can join by adding their user_id and event_id to the attend model. On the event page, there is a join button form that, when clicked, adds the user to the attendees list. After cli ...

javascripthtmlcssdjango

Ways to dynamically eliminate focus around text inputs

I have created an HTML page and here is the link to it: https://i.sstatic.net/n8UdU.png My main goal is to remove the black border around the text input on this page. The challenge I am facing is that the 'things to do' list is generated dynamic ...

javascripthtmljquerycssdom

Difficulties encountered when adjusting the size or reducing the images in a Cycle2 slideshow

Greetings to all fellow coders! Thank you for taking the time to read this post. I am currently facing a challenge in my web development project where I am trying to make my Cycle 2 slideshow images resize and reposition alongside other divs when the wind ...

javascriptjqueryhtmlcss

two adjacent DIV elements with matching heights

Currently, I am in the process of developing an internal web page with a wrapper DIV structure based on recommendations from an online tutorial. Within this wrapper, there are different sections including a header, mainnav, content, sidenav, and footer. Th ...

htmlcss

Tips for adding a picture to a server and applying CSS filters to enhance it

I recently came across a set of CSS filters that can be applied to images by simply specifying the filter ID. Now, I'm looking to create a button that will allow me to save the edited image (with the filter applied) to a designated file location. I&a ...

javascriptphphtmlcsscanvas

Learn how to iterate over an array and display items with a specific class when clicked using jQuery

I have an array with values that I want to display one by one on the screen when the background div is clicked. However, I also want each element to fade out when clicked and then a new element to appear. Currently, the elements are being produced but th ...

javascriptjqueryhtmlcss

What is the best way to create an animation where every letter in a word transitions to a different

Is there a way to animate a word so that each letter changes color within a range of 7 colors, with all letters displaying different colors simultaneously in an infinite loop? <div class="box"> <h1 class="logo animate__animated an ...

javascripthtmljquerycss

jQuery animation not executing as expected due to transition issues

I'm looking to create a cool effect where the previous quote disappears and a new one appears when I click on a button, all with a smooth transition effect. In my attempt below using jQuery .animate and opacity property, I'm struggling to make i ...

javascriptjqueryhtmlcss