A checkbox appears directly beneath the heading element with the h2 tag

My question concerns an HTML checkbox containing an h2 within the same div element.

h2.childcares {
  font-family: Source Sans;
  color: black;
  background-color: #ff9f01;
  display: inline;
  padding: 5px;
  border: 1px solid blue;
  border-radius: 15px;
}
<div class="custom-control custom-checkbox">
  <input type="checkbox" class="custom-control-input" id="childcares" unchecked>
  <label class="custom-control-label" for="childcares"></label>
  <h2 class="childcares">Childcares</h2>
</div>

Here is the visual representation:

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

I would like to align the checkbox with the center of the h2 tag.

htmlcss

Answer №1

To ensure uniformity, it would be beneficial to apply a vertical-align: middle style to all the children:

h2.children {
    font-family: Source Sans;
    color: black;
    background-color: #ff9f01;
    display: inline;
    padding: 5px;
    border: 1px solid blue;
    border-radius: 15px;
}

.custom-control-label,
.custom-control-input,
.children {
    vertical-align: middle;
}
<div class="custom-control custom-checkbox">
   <input type="checkbox" class="custom-control-input" id="children" unchecked>
   <label class="custom-control-label" for="children"></label>
   <h2 class="children">Children</h2>
</div>

Answer №2

To ensure your checkbox is properly aligned in the middle, it may be a caching issue causing problems for you. However, if you want to centralize it, simply add this single property to your CSS and your checkbox alignment will be fixed.

h2.childcares {
    vertical-align: baseline;
  }

For a clearer explanation, please refer to the following link: checkbox property alignment

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

Implementing a Function Triggered by Clicking Text in Angular 8

Is there a way to create an HTML anchor tag with a click event that triggers a function without causing the page to reload or refresh? <div *ngIf="showOTPResendText"> <p style="text-align: center;">Please wait {{counte ...

javascripthtmlangulartypescript

Place two anchors side by side using inline-blocks without using the float property

Is there a way to align two buttons next to each other without using floating? I have encountered an issue where adding a width to one of the buttons causes it to jump down and be on a different line than the other button. The buttons are centered, so th ...

htmlcss

What is the correct way to display a URL in Jupyter Lab?

This is a direct link for searching the keyword "google" on google.com: https://www.google.com/search?q=google&rlz=1C1CHBD_elGR899GR899&oq=google&aqs=chrome..69i57j69i60l4j69i65l2j69i60.1647j0j7&sourceid=chrome&ie=UTF-8 When I run the ...

pythonhtmljupyter

Reducing URL query parameters

In my application, I have a variety of filtering options that users can use to narrow down their search results. For example: <input type="checkbox" name="filters[1][]" value="4" /> Filter 1-4<br /> <input type="checkbox" name="filters[1][] ...

phphtmlmysqlurl

Tips for modifying a biography with PHP

I'm working on a feature that allows users to edit their biography. I want the text stored in the database to show up in the text box, rather than just as a placeholder. How can I achieve this? Currently, the text is set as a placeholder, but my goal ...

phphtml

Utilizing Regex Patterns to Manipulate CSS Attributes

I am dealing with a string containing CSS properties and their values: str = "filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000'); background: -webkit-linear-gradient(top, black, wh ...

javascriptcssregex

Optimizing code through concatenation

When working with PHP scripts, I often find myself combining HTML and PHP/MySQL data (as shown in the first example). This usually leads to messy code due to the lack of structure in this mix. So, my question is, would the second script be slower or less ...

phphtmloptimization

Creative ways to position and underline text using CSS

I'm having difficulty with positioning the text and extending the underline to the edge of the screen in order to create a specific visual effect. .header { height: 550px; width: 100%; background-color: #1F2041; position: relative; } . ...

htmlcsstextunderline

Why doesn't "align-self: flex-end" relocate the game board to the bottom of the screen?

Hey there, I am currently working on developing a Connect 4 game and have decided to use a table for the board. To position the board properly, I am utilizing flexbox. Although I have specified align-items as 'flex-end' in order to bring it to th ...

cssflexbox

Move the div with jQuery

I am currently working on making a div draggable without relying on jQuery UI. Here is the HTML code: <div class="wrapper"> <div class="toddler"></div> </div> And here is the script I have written: $.fn.slider = function () { ...

jqueryhtmlcss

Difficulty in updating the value of HTML Range element using Angular6 function

My goal is to retrieve the changing values from a series of HTML range sliders. This is how they are set up: <li *ngFor="let rgbVal of rgbVals; let i=index"> {{i}}: {{rgbVal}} <br> <div class="color-box" [style.back ...

javascripthtmlangulartypescriptslider

Flip elements in jQuery that are overlapping other elements following them

Utilizing the jQuery flip plugin to create image flip animations within an ejs file in a Node environment. The issue arises where any element positioned below the flip element ends up overlapping with it, causing visual discrepancies. Here is a simple co ...

jqueryhtmlnode.jsejs

Data attribute in jQuery not functioning properly

I'm attempting to identify a 'tr' element that has a matching data-title value and then change the data-qty value for that specific element. This is my current approach: var menu_type = data.type; switch (menu_type) { case 'breakfa ...

javascriptjqueryhtmldomattributes

Creating a div resizing function using only JavaScript is a fun and useful project to tackle

Seeking help to create a div resizer using only pure JavaScript as jQuery is restricted. The current functionality works, but breaks when the position of the slider-div is not set to absolute. Any solutions to fix this issue would be greatly appreciated. ...

javascripthtmlcss

The request is unsuccessful due to the absence of the 'Access-Control-Allow-Origin' header

I've set up a form using Get Response (the email client) and I'm attempting to implement ajax in order to display a custom success or failure message upon submission. The code seems to be functioning correctly. However, as soon as I connect the a ...

javascripthtmlajax

Incorporated new code into the website, functioning properly, although it appears to keep scrolling endlessly below the footer

My website is experiencing a strange issue where the page seems to keep extending beyond the footer due to some JS code. I am not very familiar with JavaScript and have tried different solutions without success. I have searched extensively online for a so ...

javascripthtmlcss

menu roll-up in an upward direction

Is there a way to implement the CSS effects mentioned in this article to make the menu roll up instead of down? Learn How to Create a Menu that Rolls Up Using CSS! ...

htmlcssdrop-down-menu

ToggleClass is not being applied to every single div

I am currently designing a pricing table with hover effects. You can view the progress here: Upon hovering on a pricing table, all the divs are toggling classes which is not the desired behavior. I want each element to have its own separate interaction. ...

javascriptjqueryhtmlcss

Turn off validation for back button in Django form

I have a form in Django 1.10 that displays quiz questions and a result at the end. I want to add two more buttons beside the "Check" button: "Mark" and "Back". When the user clicks on "Back", the view handles the behavior correctly, but a pop-up appears wi ...

pythondjangohtmlformstwitter-bootstrap

triggering phpmailer to send an email upon data deletion

My current system includes a form that successfully adds a user to a MySQL database table and also sends an email with the new information to a specified address. However, I am now facing an issue with implementing a form that is meant for deleting record ...

phphtmlmysqlphpmailer