Tips for vertically aligning input field text and checkboxes

I need help aligning a checkbox vertically in the middle of an input field and checkbox that are in the same row. Here is the current code snippet:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<div class="form-row">
  <div class="form-group col-6">
    <label for="Addr">Address:</label>
    <input class="form-control" type="text" name="Addr" id="Addr" value="" placeholder="Enter Physical Address" maxlength="40">
  </div>
  <div class="form-group col-6">
    <div class="custom-control custom-checkbox">
      <input class="custom-control-input" type="checkbox" name="sameAddress" id="sameAddress" value="Y">
      <label class="custom-control-label" for="sameAddress">check this box if mailing address is the same as physical address</label>
    </div>
  </div>
</div>

The issue I'm facing is that the checkbox appears on top of the div container. How can I align the checkbox vertically in the middle?

cssbootstrap-4vertical-alignment

Answer №1

Check out the Bootstrap 4 documentation here for information on using the class "d-flex align-items-center". I've added some styling with style="border: 1px solid black; height:200px;" to provide a visual demonstration.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<div class="form-row d-flex align-items-center" style="border: 1px solid black; height:200px;">
  <div class="form-group col-6">
    <label for="Addr">Address:</label>
    <input class="form-control" type="text" name="Addr" id="Addr" value="" placeholder="Enter Physical Address" maxlength="40">
  </div>
  <div class="form-group col-6 ">
    <div class="custom-control custom-checkbox ">
      <input class="custom-control-input" type="checkbox" name="sameAddress" id="sameAddress" value="Y">
      <label class="custom-control-label" for="sameAddress">check this box if mailing address is the same as physical address</label>
    </div>
  </div>
</div>

Answer №2

Using display: flex is a common technique for aligning elements effortlessly.
When implementing it in your CSS, the code would look like this :

section.container {
  display: flex;
  align-items: center;
}

/* I adjusted the bottom margins to resolve alignment issues */
section.form-group.col-6 {
  margin-bottom: 0;
}

Answer №3

If you want to align it perfectly with your input box, consider wrapping it in a div class and adjusting the margin.

To achieve this, simply include the following CSS code and enclose your custom-control element within a div tagged with the centered CSS class.

Take a look at this live example https://jsfiddle.net/qpwsmoh8/ as well as the provided code below

CSS

.centered {
    margin-top:38px;
}

HTML

<div class="centered">
    <div class="custom-control custom-checkbox">
    ...
    </div>
</div>

Answer №4

Revise this 

<div class="custom-control custom-checkbox">
                          <input class="custom-control-input" type="checkbox" name="sameAddress" id="sameAddress" value="Y">
                          <label class="custom-control-label" for="sameAddress">tick this box if mailing address matches physical address</label>
                        </div>

Transform to this code - 

<div class="custom-control custom-checkbox" style="
                    display: flex;
                    justify-items: center;
                    align-items: center;
                ">
                    <label class="custom-control-label" style="
                    float: left;
                "></label>
                      <input class="custom-control-input" type="checkbox" name="sameAddress" id="sameAddress" value="Y">
                      <label class="" for="sameAddress">check this box if mailing address is the same as physical address</label>
                    </div>

Answer №5

One suggestion is to include the following CSS code in your stylesheet for the input tag or its corresponding classname:

input {
vertical-align: bottom;
position: relative;
}

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

Using JavaScript to modify the width of an element

I have been struggling to increase the width of an element in my HTML using JS, but it's not working correctly. This is crucial for responsive design as the content should scroll when necessary. I attempted to achieve this with the following code, ...

javascriptjqueryhtmlcss

CSS not aligning email header correctly

I have been given the task of coding an HTML email for mailing campaigns. I have managed to get everything working, except for a particular piece of code. What I am trying to accomplish is having an image with other elements on top such as titles, a button ...

htmlcssemailoutlook

Building a Dynamic Web Widget with the Perfect Blend of HTML, JS,

While developing a javascript-based web widget, I am aiming to steer clear of using iframes and avoid relying on the page's CSS. It is infeasible for me to utilize custom CSS, as it defeats the purpose, and iframe integration would not present a user- ...

javascripthtmlcsstwitter-bootstrapweb-widget

What is the best way to extract all image URLs from a website using JavaScript?

There are various methods to retrieve image src urls using JavaScript, such as utilizing document.images or by targeting all img elements and fetching their src attributes. However, I am currently unable to extract the image urls specified within CSS styl ...

javascripthtmljquerycssdom

`Is there a way to hide inline text on small screens using Boostrap 4?`

Within this specific scenario, my goal is to conceal the text when viewed on smaller screens and solely display the icon located to the left (an icon representing comments from font awesome): <a id="newCommentLink" href="#"> & ...

htmlcsstwitter-bootstrapbootstrap-4

Crop and resize a portion of an image using CSS

Is there a way to display just part of an image on a webpage and scale that specific area either larger or smaller using CSS? A common method is by using the following code: $("#myDiv").css({ width: 100, height: 100, background: "url('myurl.jpg ...

htmlcssimage-scalingimage-extraction

Enhancing user experience with jQuery tooltips

Having trouble adding a tooltip to a glyphicon. The JSFiddle example provided does not work for me as I am using jQuery to create the HTML elements like this: var trashIcon = $('<i>').addClass('glyphicon glyphicon-trash'); How ...

javascriptjqueryhtmlcss

Issues with Bootstrap Navbar Dropdown functionality, including flickering or unresponsiveness

While working on a project, I incorporated the FlexStart Bootstrap Template. However, I encountered an issue with the Dropdown feature on the navbar. When hovering over the menu and submenu, they flicker incessantly. Despite investing a considerable amount ...

javascripthtmljquerycssbootstrap-5

Unable to move cursor in contenteditable section

I am currently working on developing a rich text editor in React, but I have encountered an issue that has me stuck. The problem I am facing is that as I type each character, the insertion point does not update accordingly, causing the cursor to remain stu ...

javascripthtmlcssreactjs

Expanding section beneath a Row in a Table (Semantic UI React)

I'm attempting to implement expandable Table Rows in a Table that can be activated by clicking on them individually. For instance, upon clicking on the designated area in the provided image below, a Segment or Container will reveal itself with embedd ...

htmlcssnode.jsreactjssemantic-ui-react

Does CSS positioning change depending on the screen size?

I need help fixing the positioning of my logo on the screen. I want it to be 40px from the top and centered horizontally regardless of the screen size. Here is the code that I have: <html> <head> <style type="text/css> body{ back ...

htmlcsspositioning

Align the date input field to the center for better visual appeal

I am facing a challenge in centering the date in an input, not the entire input element inside a div. When I attempt to center it, the date gets positioned within a portion of the input due to a resizable right-hand side panel for selecting a date from a c ...

javascriptjquerycsshtml

Personalized designing of each letter

Is there a way to style numbers without using something like <span></span>? I'm looking for a clean way to do this for each sign. Attached is an example showing a "flip clock" effect that I would like to achieve. I have come across plugi ...

htmlcss

The Bootstrap row has surpassed the maximum height of the container-fluid

I've encountered a problem while working with the bootstrap grid system (Version v4.5.2). I have set a max-height of 50vh on a container-fluid, which is working fine. However, when I add a row with 2 columns to the container, the images within the row ...

htmlcsstwitter-bootstrapbootstrap-4

Display text upon hovering over a button using jQuery

I'm currently attempting to implement a feature where a line of text is displayed beneath a row of buttons and the content of the text changes based on which button is hovered over. I've encountered some challenges while using the .hover() and .s ...

javascriptjqueryhtmlcsstwitter-bootstrap

Changing the style of a single element in various components in Vue

I need to alter the design of a specific div that is used in different components within my Vue.js application. The #app div should have a padding of 172px only in the Hello.vue component, while it should remain at 0px in all other components. Is there a w ...

htmlcssvue.js

Guidelines for accessing the value of the parent function upon clicking the button within the child function?

I have a pair of buttons labeled as ok and cancel. <div class="buttons-div"> <button class='cancel'>Cancel</button> <button class='ok'>Ok</button> </div> The functions I am working wi ...

javascripthtmlcsscurrying

The capacity to rotate div containers, adjust their dimensions, and engage with the content within

I'm attempting to design small clickable div boxes that flip 180° when clicked to reveal interactive content. This includes the ability to click links, copy text, or manipulate the content with additional buttons. Although I've successfully ach ...

javascripthtmlcss

Modifying ID styling using JavaScript on Internet Explorer

I need to change the CSS display property from none to block using JavaScript, but only for Internet Explorer. My current code is not working for the ID #backfill-image. <script> function checkForIE() { var userAgent = navigator.userAgent; ...

javascripthtmlcssinternet-explorerdisplay

Customize the default getstream component styles in a NextJS Component

Is there a way to customize the CSS of getStream.io components using custom CSS? I have created a component as shown below and now I want to override the styles for various classes of its components. Following the instructions in this README file, I impor ...

cssreactjsnext.jsgetstream-io