Align text vertically alongside radio inputs

I'm working on incorporating two radio buttons in a form. I have successfully added text inside the buttons and customized them using labels. However, despite applying text-align=center;, the text remains at the top of the button instead of being vertically and horizontally aligned in the middle. It is currently aligned horizontally.

View image of the current state

Below is the code:

.buttonsform #locheck{
  position:absolute;
  top:0px;
  left:0px;
  display:inline-block;
  border-radius: 40px;
  width: 190.47px;
  height: 45.96px;
  text-align: center;
  border: 1px solid #333333;
  
  font-family:Montserrat;
  font-style: normal;
  font-weight:500;
  font-size: 18.192px;
  line-height:22px;
  text-transform: uppercase;
  color:#333333;
  cursor:pointer;
}

.buttonsform #lpcheck{
  position:absolute;
  top:0px;
  right:0px;
  border-radius: 40px;
  width: 190.47px;
  height: 45.96px;
  vertical-align: middle;
  text-align: center;
  border: 1px solid #333333;
  
  font-family:Montserrat;
  font-style: normal;
  font-weight:500;
  font-size: 18.192px;
  line-height:22px;
  text-transform: uppercase;
  color:#333333;
  cursor:pointer;
}
      <div class="buttonsform">
      <input type="radio" name="dentistry" id="ocheck">
      <input type="radio" name="podiatry" id="pcheck">
      <label for="ocheck" id="locheck">Dentistry</label>
      <label for="pcheck" id="lpcheck">Podiatry</label>
      </div>

htmlcss

Answer №1

Implementing the solution using flexbox is the way to go.

* {
  margin: 0;
  padding: 0;
  outline: 0;
  box-sizing: border-box;
}

body {
  height: 100vh;
  display: grid;
  place-items: center;
}

.container {
  display: flex;
  flex-direction: row;
}
.container .option {
  display: flex;
  padding: 1rem;
  align-items: center;
  border-radius: 60px;
  border: 1px solid red;
  flex-direction: row-reverse;
}
.container .option:nth-child(2) {
  margin-left: 1rem;
}
.container .option label {
  margin-left: 0.5rem;
}
.container .option input:checked .option {
  background-color: green;
}
<div class="container">
    <div class="option">
        <label for="option_1"> Odonotología </label>
        <input type="radio" id="option_1" />
    </div>
    <div class="option">
        <label for="option_2"> Podología </label>
        <input type="radio" id="option_2" />
    </div>
</div>

Give it a try and let me know if it works! 😊

Answer №2

It seems like this is what you're searching for.

    .boxed label {
  display: inline-block;
  width: 210px;
border-radius: 50px !important;
  padding: 10px;
  border: solid 1px rgb(43, 43, 43);
 
}

.boxed input[type="radio"] {
  display: none;
  
}

.boxed input[type="radio"]:checked + label {
 background-color: rgb(17, 173, 235);
}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8>
  <meta http-equiv="X-UA-Compatible" content="IE-edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>



<form class="boxed">
  <input type="radio" id="cb1" name="skills" value="cb1">
  <label for="cb1">Checkbox 1</label>

  <input type="radio" id="cb2" name="skills" value="cb2">
  <label for="cb2">checkbox2 </label>

 
</form>

</body>
</html>

Answer №3

Implement the following design enhancement

.buttonsform label {
    add: flex !important;
    align-items: center;
    justify-content: center;
}

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

Obtaining user input from a content editable div in a React component

Get content from editable div const contentref=useRef() const handleclick=()=>{ setContent(contentref.current.value) console.log(contentref.current.value) } Element Properties <div name="textbox" ref ={contentref} cla ...

htmlreactjscontenteditablereact-dom

How can I make an element stick at the bottom of another element using the top position

I have two stacking elements of varying heights within a scrolling container. When the lower element extends below the bottom of the container, I want to display a part of it affixed to the bottom. To achieve this, I applied position: sticky to position ...

htmlcsscss-positionsticky

Unusual sidebar scrolling issues experienced in Firefox

Currently, I am in the process of developing an app with a scrolling sidebar. However, there seems to be some unexpected behavior when using Firefox: the content within the sidebar disappears partially below the top of the div if the mouse is positioned lo ...

css

Tips for properly formatting a fixed table header

I'm currently facing an issue with the sticky header style in my data table. I have created a simple Angular component along with a specific directive: sticky.directive.ts @Directive({ selector: '[sticky]' }) export class StickyDirecti ...

htmlcssangularcss-tables

Ways to stop users from copying the content of a specific div using CSS

Is it possible to completely disable user text selection with CSS? Check out the code snippet below: .unselectable{ -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-s ...

htmlcssselectionhighlightingtextselection

Tips for making radio button selection mandatory in an HTML5 form

How can I require a user to select one radio button in an HTML 5 form before submitting it? I attempted to use the required attribute, but since there is no radio button group, how can I apply this requirement? <form action="/Home/Sendtitle" method=" ...

htmlformsvalidationradio-buttonform-submit

The <button> tag and the <a> tag have different display properties

I am in the process of creating unique custom buttons using CSS. Below is the code snippet that I have created for this purpose. Interestingly, when I apply the CSS to a <button> element, it behaves as expected. However, when I use it with an <a& ...

htmlcsstwitter-bootstrap

Learn how to create text animations using CSS triggered by a scroll event listener

I'm looking to create a text animation similar to the one on this website: They have 3 keyframes for two types of animations: Left to Right and Right to Left. The RTL animation starts at 164vh, while LTR starts at -200vh. These text animations only ...

javascriptcssreactjsnext.js

Difficulty with replacing colors in an image on certain devices when using HTML5 Canvas

I have created a 2d RTS HTML5 / Javascript game that utilizes images to represent the player's units and buildings. To achieve different variations of these images with different colors, I use a script that replaces certain colors in the original imag ...

javascripthtmlcanvas

Automatic playback of the next video in a video slider

Looking to upgrade my video slider functionality - switching between videos, playing automatically when one finishes. Struggling to find a solution that combines manual control with automatic playback. My attempt: function videoUrl(hmmmmmm){ ...

javascripthtmlcss

Transfer the values selected from checkboxes into an HTML input field

I am attempting to capture the values of checkboxes and then insert them into an input field once they have been checked. Using JavaScript, I have managed to show these values in a <span> tag successfully. However, when trying to do the same within a ...

javascriptjqueryhtml

PHP Math Crunching

Hey everyone, I have created two separate pages: index.php test.php Here is index.php <!DOCTYPE HTML> <html> <head> <style> .error {color: #FF0000;} </style> </head> <body> <form method="get" action="test.p ...

phphtml

What is the best way to create a JavaScript animation for altering the width of a div element?

Need help with creating a dynamic poll chart based on YES and NO votes? Check out this project where you can visually see the results by clicking HERE. Looking to add some animation effects to your poll? You can achieve a smooth transition using CSS with ...

javascripthtmlcssanimation

Extracting image dimensions using JavaScript - a simple guide

Having created a test for an upcoming project, I have encountered a problem that I am struggling to resolve. Despite my efforts to search the internet for a solution, I have been unable to find one due to: My limited understanding of Javascript The code l ...

javascripthtmljquery

Image not found in Rotativa PDF document

We have implemented Rotativa to generate and save a PDF version of our web page on the server. Below is the ASP.NET MVC 4 code snippet used for this purpose: var pdfResult = new ActionAsPdf("Index", new { orderId = orderValidated.orderID }) { FileName = ...

cssasp.netasp.net-mvcpdfpdf-generation

Adjust the Placement of Images in Relation to Mouse Movements

Is there a way to creatively animate the positions of images or background images based on mouse movement? Let's take Github, for instance: https://github.com/thispagedoesntexist The 404 page on Github is truly impressive. I aim to captivate my use ...

javascriptcsscss-transitions

Understanding the Hierarchy of CSS and Bootstrap Styles

I have been using a custom CSS file along with bootstrap. Initially, I had my custom CSS written before the Bootstrap CSS. However, I recently discovered that it's recommended to include Bootstrap CSS first before any custom CSS. As a result, I'm ...

htmlcsstwitter-bootstrapbootstrap-4

Setting a variable for a JavaScript function to insert a video - a step-by-step guide

Here is a grid structure that I am working with: <div class="main"> <ul id="og-grid" class="og-grid"> <li> <a href="http://..." data-video="my-url" data-largesrc="images/1.jpg" data-title="Title" data-descript ...

javascriptjqueryhtml

Inject data from ajax into the body of the html document

Is it possible to retrieve values from an ajax call and insert them into the body of an HTML document? Here is an example: function check() { $.ajax({ url : '/check', datatype : 'json', async ...

javascriptjqueryhtmlajax

Optimal approach for blending release and debug code in a web application

Currently, I am in the process of developing a simple browser-based game for two players. While my main focus lies on the backend, I need to monitor the states of both players simultaneously. To achieve this without the hassle of working with two separate ...

javascripthtmlcsswebstorm