The checkbox label should be centered directly beneath the checkbox

I'm feeling a bit lost. I came across this code snippet on jsfiddle:

https://jsfiddle.net/rx90f38u/1/

There seems to be some styling included, but I can't figure out why the "remember" me text is showing below the checkbox.

The checkbox and its label should actually be centered on the same line.

CSS:

.bbp-login-form input[type=text], .bbp-login-form input[type=password], .bbp-login-form select {
  width: 100% !important;
  display: inline-block !important;
  border: 1px solid #ccc;
  border-radius: 4px;
    -moz-border-radius:4px;
  -webkit-border-radius:4px;
  box-sizing: border-box;
    color: #000;
    background-color: #c1c1c1;
}

.bbp-login-form label {
    text-align:left;
  width: 100% !important;
  margin: 10px 0;
  display: inline-block !important;
}

HTML:

<!DOCTYPE html>
<html>

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Untitled 1</title>
</head>

<body>

<h2 class="widgettitle">Support Forums</h2>
<form action="https://www.publictalksoftware.co.uk/wp-login.php" class="bbp-login-form" method="post">
    <fieldset>
    <div class="bbp-username">
        <label for="user_login">Username: </label>
        <input id="user_login" name="log" size="20" tabindex="103" type="text" value="">
    </div>
    <div class="bbp-password">
        <label for="user_pass">Password: </label>
        <input id="user_pass" name="pwd" size="20" tabindex="104" type="password" value="">
    </div>
    <div class="bbp-remember-me">
        <input id="rememberme" name="rememberme" tabindex="105" type="checkbox" value="forever">
        <label for="rememberme">Remember Me</label> </div>
    </fieldset></form>

</body>

When I try adding this CSS snippet, I manage to center Remember Me:

.bbp-login-form .bbp-remember-me label {
    text-align: center;
  width: 50%;
}

However, no matter how much I adjust the width, the problem persists.

Answer №1

Give this a shot

.bbp-login-form .bbp-remember-me label {
        text-align: left;
        width: auto !important;
        vertical-align: initial;
    }

Answer №2

Here is some CSS code that you can try:

.bbp-login-form label {
  margin: 10px 0;
  display: inline-block !important;
}

.bbp-remember-me{
   text-align: center;
}

Click here to view the code on jsFiddle

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

Update the image and heading simultaneously when hovering over the parent div

I am looking to enhance the user experience on my website by changing the color of headings and images when a user hovers over a specific section. Currently, I have been able to achieve this effect individually for each element but not simultaneously. Any ...

What is the best way to display an HTML array?

I'm currently facing an issue with rendering an array containing both <p> and <div> items as HTML. Despite my attempts to render them properly, the values appear as plain code instead of formatted paragraphs. To illustrate, let's cons ...

Tips for wrapping text labels in mat-slide-toggles (Angular Material)

Is there a way to get the title in mat-slide-toggle to wrap if it's too long while keeping its default position to the right of the toggle? <mat-slide-toggle class="slider">A really long title wrapped</mat-slide-toggle> I attemp ...

Problem of background and shadow blending in CSS

I'm experimenting with creating an element using a radial gradient effect. My initial approach was to use a white circular container and apply a white box shadow. However, I encountered some issues where the color of the shadow did not match the backg ...

The Twitter Bootstrap navbar dropdown is hidden behind the slider image

I am having an issue with my navbar built using Twitter Bootstrap 3.1.1. On iPhones and iPads, the dropdown menu is hiding behind the slider image. It is set to position absolute and has a z-index of 1000. Strangely, on desktop screens, everything works f ...

Safari's CSS Hacking Problem

After testing the code below, it appears to be working on both Safari and Chrome. I am seeking a hack specifically for Safari, not Chrome .contactDiv img:not(:root:root) { margin-top:-75px; } @media screen and (-webkit-min-device-pixel-ratio:0) { ...

Issue with Django's empty_label for ModelMultipleChoiceField: Getting multiple values for the 'empty_label' keyword argument

Is there a way to add a placeholder in a Select2 field using the empty_label? I keep encountering this error: TypeError: __init__() got multiple values for keyword argument 'empty_label' This is my current code setup: self.fields['work_ty ...

The URL "http://packagist.org/p/provider-3.json" was unable to be retrieved due to a bad request error (HTTP/1.1 400 Bad Request)

Encountering a 400 bad request issue when trying to connect over HTTP, despite the package only being installable via HTTP. Attempting to override in composer.json to force HTTPS as suggested by others for a workaround, but that solution doesn't seem ...

Enhancing Title and Meta Tags with Decorative Styles

Looking to style the <title><p>AAA</p></title> and <meta name="decrition" content="AAA">. But when I added <p> and applied CSS with: p{color:red;size:1000px} The title is being displayed as <p>AAA</p> Any ...

I'm attempting to align my text at the center of my tab navigation but it doesn't seem to be working

I'm struggling with centering the text within the li tags in my tabbed navigation bar. I don't want to add padding to the top of the text because I want the entire tab to be clickable. Any advice on how to achieve this? Also, how can I make the l ...

Improve navigation by integrating jQuery validation to resolve input errors seamlessly

I have been working with the jQuery validation plugin and Bootstrap. I recently added a fixed navigation bar at the top of the page using Bootstrap CSS. However, I encountered an issue where the fixed navigation was overlapping with the error message for i ...

Looking to access a variable in Python Flask before it is referenced

I encountered an issue while trying to reference the variable "found_user," an object of the User class; it is defined within an if statement when a user logs in to the home page for the first time. My intention is to utilize the user's id to generate ...

Using React Native's stylesheet to apply multiple values in a CSS statement

Here's a scenario to help clarify my question: Imagine I want to add margin to an element in the following way: const myView = () => <View style={styles.viewStyle}></View> const styles = StyleSheet.create({ viewStyle: { margin: ...

`Is there a way to retrieve the ID of an element upon clicking on it?`

Can you help me with a JavaScript query? I have two HTML div elements with ids of 'div1' and 'div2'. When I click on any of the divs, I want to display the id of the clicked div. Any thoughts? <div id="div1"></div> <div ...

Modifying KineticJs.Image with css styling

Hey there, I'm currently working on a project that involves canvas manipulation. I've successfully figured out how to draw an image and move it within the canvas, which wasn't too difficult to achieve. However, I'm now facing a challeng ...

Having trouble with bootstrap carousel malfunctioning on Firefox browser?

I'm experiencing an issue with the carousel slider on my website. It seems to only be working in Chrome and not in Mozilla Firefox. You can view the live site at: Below is the code I have used for the carousel: <header id="myCarousel" class="car ...

Slide the first div upward to display the text in the second div when hovering over the first div

I'm facing an issue where a div needs to move upwards when hovering over it. To see an example, take a look at this JSfiddle. The desired outcome is as follows: As illustrated, the right div is the one being hovered. I have attempted to create this ...

What is the best way to convert minutes into both hours and seconds using javascript?

In order to achieve this functionality, I am trying to implement a pop-up text box where the user can choose either h for hours or s for seconds. Once they make their selection, another pop-up will display the answer. However, I am facing issues with gett ...

Updating rows within a table dynamically using AJAX

I currently have a table with an empty body: <table id="tablem" border="1" width="100"> <thead> <tr> <th style="width: 10%">PageName</th> <th style="width: 5%">Lang</th> ...

Is the tabindex feature malfunctioning for the submit button in an HTML form?

Hey there, I created the design like this. However, the submit Tabindex is not working as expected. Can you please take a look at it and let me know what might be causing this issue? <input id="id" type="text" value="" class="input" tabindex="1"/> ...