Ways to position <label> and text next to each other in HTML

I have a query about aligning a label and text side by side horizontally. How can I adjust their alignment to center the text within the label rather than at the bottom of it?

Below is my current HTML code:

<div>
    <label class="switchnmn">
       <input type="checkbox" checked>
       <div class="slidernmn round"></div>
    </label>
        <b style="font-size:15px">I am able to accept customer's any request date.</b>    
</dlv>

And here is the corresponding CSS:

.switchnmn {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

.switchnmn input {display:none;}
/* Other styles for switchnmn and slidernmn classes */

.slidernmn.round:before {
  border-radius: 50%;
}

Can you guide me on where I should make the necessary changes to achieve the desired alignment?

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

htmlcss

Answer №1

To center align the label and b element, you can use vertical-align: middle.

.switchnmn {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

.switchnmn input {display:none;}

.slidernmn {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slidernmn:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slidernmn {
  background-color: #2196F3;
}

input:focus + .slidernmn {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slidernmn:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded sliders */
.slidernmn.round {
  border-radius: 34px;
}

.slidernmn.round:before {
  border-radius: 50%;
}
label, b {
  vertical-align: middle;
}
<div>
  <label class="switchnmn">
    <input type="checkbox" checked>
    <div class="slidernmn round"></div>
  </label>
  <b style="font-size:15px">I am able to accept customer's any request date.</b>
</div>

Answer №2

Set all three components to have display: inline-block; and vertical-align: middle; properties like the example below:

.x > * {
  display: inline-block;
  vertical-align: middle;
}

.switchnmn {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

.switchnmn input {
  display: none;
}

.slidernmn {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slidernmn:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked+.slidernmn {
  background-color: #2196F3;
}

input:focus+.slidernmn {
  box-shadow: 0 0 1px #2196F3;
} 

input:checked+.slidernmn:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}


/* Rounded sliders */

.slidernmn.round {
  border-radius: 34px;
}

.slidernmn.round:before {
  border-radius: 50%;
}
<div class="x">
  <label for="y" class="switchnmn">
       <input type="checkbox" id="y" checked>
       <div class="slidernmn round"></div>
    </label>
  <b style="font-size:15px">I am able to accept customer's any request date.</b>
  </dlv>

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

I need the CSS to make sure the div extends its container's width

The structure of my current HTML includes a footer div that is positioned alone within the BODY section. <div id="footer"> <div class="container"> <div id="footer-bg"> <div class="footer1"> & ...

csshtmlwidthpositionabsolute

The button appears flawless in Chrome and Firefox, but unfortunately fails miserably in Internet Explorer. Is there any way to make it functional in all

Check out this JFiddle link: http://jsfiddle.net/Zfnz2/ I'm seeking ideas from the wise minds of the internet. Any thoughts? ...

htmlcssbutton

Ensuring the height of the body and content div in Bootstrap 4 combined with Angular set to

Is there a way to center the <div class="card"> in the middle of the page or body? It works perfectly on a desktop browser, but on mobile view, it's not aligning properly. How can I center it using... html, body { height: 100%; background: ...

htmlcssangularbootstrap-4

implementation of bug decrementation with a fadeout

For my current project, I need to implement a feature where individual elements containing a photo and their corresponding title fade out when clicked. However, the issue is that clicking on any picture fades out everything. How can I resolve this so only ...

javascripthtml

The progress bar for uploading a file is causing issues with the redirect function in the

I am currently facing an issue with my file submission form and progress bar in JavaScript. The progress bar is interfering with the controller, preventing it from redirecting back home with the link. I have tried removing window.location.href="/"; but thi ...

javascripthtmljqueryajaxlaravel

HTML5's drag-and-drop feature, including nested targets, allows for intuitive and interactive user

I'm currently implementing HTML5 drag and drop functionality. I have a parent div that is droppable, and inside it, there is another child div that is also droppable. <div id="target-parent"> <div id="target-child"></div> </d ...

javascripthtmlnesteddrag-and-drop

Steps for displaying a division on clicking a hyperlink

I am currently working on my main menu layout in HTML, and here is the code snippet: <div id="main-container"> <div id="main-wrapper"> <div id="logo"> <h1 id="title">port ...

javascriptjqueryhtmlcssanimation

More efficient method for sending id to jQuery

I was curious to find a more streamlined approach for passing an id into the timepicker function. Here's my current implementation: JS: function setTimer(id){ $("#" + id).timepicker(); $("#" + id).timepicker('option', { 'minTime ...

javascriptjqueryhtml

Parallax not functioning properly due to CSS before and after elements

I am attempting to use before and after pseudo-elements for a parallax effect on my div element <div id="OurPhilosophy" class="parallax-window" data-parallax="scroll" data-image-src="https://cdn6.bigcommerce.com/s-jhmi7y5v2c/product_images/uploaded_ima ...

htmlcss

Expanding the Background Color when Hovered Over

Despite my extensive search on SO, none of the answers I found seem to address my specific situation. In a col-md-2 section where I have a navigation bar, I am trying to change the background color to extend up to the border when hovering. While I can cha ...

htmlcsshover

Problem with CSS: In Chrome, text fields have 3px additional margin-right

https://i.sstatic.net/I8mzi.jpg I am facing an issue with the margins of my text fields. Even though I have set a margin-right of 5px for each field, Google Chrome seems to be adding an additional 3-4px automatically. This problem is evident when I dynami ...

javascriptjqueryhtmlcssgoogle-chrome

Guide to setting the ng-selected value within AngularJS

I am currently working on a project where I have a select element in my AngularJS application. I am populating the options using JSON values with ng-repeat, and I want to display the first value from the JSON as selected by default. I have tried two diffe ...

htmlangularjs

The cookie is not being sent by $http in request

Our current project involves developing a RESTful Webservice using AngularJS and Java Servlets. Upon user login, our backend sends a "Set-Cookie" header to the frontend. The cookie is accessed in Angular through $cookies (ngCookie module) and then set. On ...

htmlangularjswebkitxmlhttprequest

What is the best way to incorporate quotes within inline CSS code?

Can anyone help me with inserting the following CSS into HTML? Here is the CSS snippet that needs to be converted to HTML: .group .circular-progress::before { ... content: "10%"; ... } This is what I have attempted so far: <div class="group"&g ...

htmlcssruby-on-railsruby

Issue with jQuery: Changing colors does not work on Chrome and Safarirowsers

I'm puzzled as to why the code snippet below only works in Firefox, but not in Chrome and Safari. Can you shed some light on this issue? if ($(this).css("color") == "Fuchsia"){ $(this).css("color","#000000"); } Here is the link in question: If you ...

jquerycsswebkit

JS editing an array in a datatable

I have created an HTML page where users can enter data, which is then uploaded to a SQL server. I have been studying DataTables to load an array into a table and tried editing it, but still haven't had success. Can anyone offer assistance? var array ...

javascripthtmldatatable

Troubleshooting CSS: Issue with :nth-child(3n):after clearfix functionality

Hey there! I've been experimenting with some CSS code that I thought should work, but unfortunately it's not displaying properly in Google Chrome. <ul> <li><a href="...">bla</a></li> <li><a href="...">bl ...

csscss-selectorsclearfix

Certain CSS styles for components are missing from the current build

After building my Vue/Nuxt app, I noticed that certain component styles are not being applied. In the DEVELOPMENT environment, the styles appear as expected. However, once deployed, they seem to disappear. All other component styles render properly. Dev ...

javascriptcssvue.jsnuxt.js

Avoiding using the symbols < and > in JavaScript code before assigning it to InnerHtml

I am dynamically adding JavaScript code to a script tag by setting the InnerHtml property of the HtmlNode. scriptNode.InnerHtml = new_script; The issue arises when my JavaScript code contains less than < and/or greater than > characters, which dist ...

javascripthtmlhtml-agility-pack

Using CSS Grid to Align Images

I want to utilize CSS 3 Grid to position specific images on my home page that I imported. The desired outcome is as follows: https://i.sstatic.net/aYshN.jpg Currently, my grid looks like this: https://i.sstatic.net/oEUWX.png Below is the code snippet: ...

htmlcss