What is the best way to align the centers of these text pieces vertically next to a toggle switch?

Query:

I'm feeling a bit out of practice with CSS, so this might be an easy question.

This is the current look of the relevant section on my page.

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

To make it easier to analyze, I've extracted the code into a JSFiddle for you to review.

https://jsfiddle.net/srap5maw/

I've tinkered with it quite a bit and even tried my best at Google searching, but nothing obvious seems to stand out.

Snippet of Code:

<div class="centering-table">
<div class="centering-row">
  <div class="centering-element">
    <b>Yes</b>
  </div>
  <div class="centering-element">
    <div class="switch-container">
      <label class="switch">
        <input type="checkbox">
        <div class="slider round"></div>
      </label>
    </div>
  </div>
  <div class="centering-element">
    <b>No</b>
  </div>
</div>
</div>
htmlcss

Answer №1

To achieve the desired alignment, it is necessary to switch the display property of the element to block instead of inline-block, and then apply vertical-align: middle to the .centering-element class. Additionally, the line-height has been removed from the .centering-element:

* {
    padding: 0;
    margin: 0;
    outline: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    text-align: center;
    font-family: Arial;
    font-weight: 400;
    font-size: 20px;
}

.centering-table {
    margin-top: 20px;
    font-size: 26px;
    display: table;
    margin: 0 auto;
}

.centering-row {
    display: table-row;
}

.centering-element {
    display: table-cell;
    vertical-align:middle;
}

.centering-element b {
    font-weight: 600;
}

.switch-container {
    position: relative;
}

.switch input {
    display: none;
}

.switch {
    position: relative;
    display: block;
    width: 60px;
    height: 34px;
}

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

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
    border: 1px solid rgba(211,211,211, .8);
}

.slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: #73c82b;
    -webkit-transition: .4s;
    transition: .4s;
}

.slider.round:before {
    border-radius: 50%;
}
<div class="centering-table">
  <div class="centering-row">
    <div class="centering-element">
      <b>Yes</b>
    </div>
    <div class="centering-element">
      <div class="switch-container">
        <label class="switch">
          <input type="checkbox">
          <div class="slider round"></div>
        </label>
      </div>
    </div>
    <div class="centering-element">
      <b>No</b>
    </div>
  </div>
</div>

Updated fiddle

Answer №2

To define the class .centering-row, the following CSS should be used:

.centering-row {
  display: flex;
  align-items: center;
  justify-content: center;
}

Additionally, the class .switch must be a block element:

.switch {
  position: relative;
  display: block;
  width: 60px;
  height: 34px;
}


* {
    padding: 0;
    margin: 0;
    outline: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    text-align: center;
    font-family: Arial;
    font-weight: 400;
    font-size: 20px;
    line-height: 28px;
}

.centering-table {
    margin-top: 20px;
    font-size: 26px;
    display: table;
    margin: 0 auto;
}

.centering-row {
    display: flex;
    align-items: center;
    justify-content: center;
}

.centering-element {
    display: table-cell;
    line-height: 50px;
}

.centering-element b {
    font-weight: 600;
}

.switch-container {
    position: relative;
}

.switch input {
    display: none;
}

.switch {
    position: relative;
    display: block;
    width: 60px;
    height: 34px;
}

.switch input {
    display: none;
}

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

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
    border: 1px solid rgba(211,211,211, .8);
}

.slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: #73c82b;
    -webkit-transition: .4s;
    transition: .4s;
}

.slider.round:before {
    border-radius: 50%;
}
<div class="centering-table">
  <div class="centering-row">
    <div class="centering-element">
      <b>Yes</b>
    </div>
    <div class="centering-element">
      <div class="switch-container">
        <label class="switch">
          <input type="checkbox">
          <div class="slider round"></div>
        </label>
      </div>
    </div>
    <div class="centering-element">
      <b>No</b>
    </div>
  </div>
</div>

Answer №3

To vertically center your content, you can utilize flexbox in CSS.

HTML

<div class="centering-table">

    <div class="centering-element"><b>Yes</b></div>

    <div class="centering-element">
      <div class="switch-container">
        <label class="switch">
          <input type="checkbox">
          <div class="slider round"></div>
        </label>
      </div>
    </div>

    <div class="centering-element"><b>No</b></div>

</div>

CSS

* {
    padding: 0;
    margin: 0;
    outline: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    text-align: center;
    font-family: Arial;
    font-weight: 400;
    font-size: 20px;
    line-height: 28px;
}

.centering-table {
    margin-top: 20px;
    font-size: 26px;
    display: flex;
    align-items: center;
    justify-content: space-around;
    width: 200px;
    margin: 0 auto;
    background: transparent;
}

.centering-row {
}

.centering-element {
    align-self: auto;
    background: transparent;
}

.centering-element b {
    font-weight: 600;
}

.switch input {
    display: none;
}

.switch {
    position: relative;
    display: block;
    width: 60px;
    height: 34px;
}

.switch input {
    display: none;
}

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

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
    border: 1px solid rgba(211,211,211, .8);
}

.slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: #73c82b;
    -webkit-transition: .4s;
    transition: .4s;
}

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

Check out the demo here: https://jsfiddle.net/srap5maw/2/. I hope this explanation is helpful.

Answer №4

Simply follow these steps:

1) Add vertical-align: middle; to the CSS for .centering-element

2) Include vertical-align: middle; in the style for .switch

See a demo here

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

What is the process for customizing the arrow of a <select> dropdown menu exclusively?

Here is the code for a dropdown menu: <select id="dropdown"> <option value="">Go to page...</option> <option value="http://stackoverflow.com">CSS-Tricks</option> <option valu ...

javascriptjquerycssxhtml

Transforming a Multi-Dimensional Array into an HTML Table

Experimenting with a new idea. I hope the solution is straightforward; I just can't seem to figure it out. Imagine I have an array like this: var items = [[1,2,3],[4,5,6],[7,8,9],[10,11,12]]; My goal is to rearrange the data so that it looks like t ...

javascriptjqueryhtmlarrayshtml-table

Using jQuery to generate a JSON object dynamically based on the values entered in each input field

I'm facing a situation where I need to extract data from a JSON format using PHP. However, I'm struggling with how to structure the Javascript object in order to dynamically create the JSON format. Here is my current scenario: <input title=" ...

javascriptjqueryhtmljson

Modify the button's border color upon click action

I am looking to implement a feature where the border of a button changes when clicked once and reverts back when clicked again. This should apply individually to each of the 16 buttons with the same class. Additionally, I want to enable the ability to clic ...

javascriptjqueryhtmlcss

Guide to updating HTML table data using php and Javascript

Currently, my webpage fetches data from a MySQL database and displays it in an HTML table as soon as the page loads. Now I want to provide users with more advanced filtering options, such as filtering by name, age, etc. When a user submits their filterin ...

phpjavascripthtml

Are current web browsers able to block the code "<a href="javascript:window.open....?

I am looking to create a pop-up window for sharing on Facebook. The best way to achieve this is by using javascript to pop up a small window with a width of 400 pixels and a height of 200 pixels. Will pop-up blockers in Chrome, IE, or Google block this f ...

javascripthtmlcssbrowser

Why does it appear that Angular is undefined in this straightforward Angular demonstration?

I'm completely new to AngularJS and I've encountered an issue. Yesterday, I ran a very simple AngularJS application that I downloaded from a tutorial and it worked perfectly. The application consists of 2 files: 1) index.htm: <!DOCTYPE htm ...

javascripthtmlangularjsangularjs-scope

Craft a dynamic menu of categories using PHP

As a beginner in coding and PHP, I am working on creating an online shop for a school project. I am looking for a simple code that can select categories from my database and display them on the homepage. Additionally, when a user clicks on a category, I ...

phphtmlmysql

Tips for incorporating user-entered data from a text box into a JavaScript function and utilizing a loop

Although my code is functioning correctly, I am looking to make some adjustments but seem to be struggling to achieve the desired outcome. Essentially, I have two labels and an input field in which the user is prompted to enter a specific number of weeks ...

javascripthtml

Tips on optimizing a setTimeout script for seamless integration with an HTML form

Here is the script: <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script> function addToCart() { document.getElementById("msgs-box").innerHTML = "Item added to cart s ...

javascriptjqueryhtmlajaxforms

Discover the ins and outs of utilizing the Google+ Hangout API specifically for chatting purposes

I am currently working on a webpage and I want to include a hangout button that will allow users to connect with me and start chatting automatically when clicked. Here is the code I have so far: <script src="https://apis.google.com/js/platform.js" asy ...

javascripthtmlgoogle-api

I'm looking to keep the footer anchored at the bottom without using the absolute positioning

I am currently developing a website and have implemented a wrapper for the footer. My goal is to create a sticky footer, but when I minimize the screen, the footer ends up overlapping with the content and header. #footerWrapper { height: 177px; bottom: ...

htmlasp.netcsssticky-footer

How to present retrieved data with spaces or line breaks in PHP

I need help on how to display data with spaces or line breaks. Currently, I am using textarea for the news content when adding and editing, and the data type for my news content is text. This is how I want the content to be displayed: https://i.sstatic.ne ...

phphtmlcss

Position the button at the corner of the textarea

How can I position two buttons below a text_area, aligned with the bottom right corner of the text area? Here is what I have tried so far: https://i.sstatic.net/UcD2F.png Current code snippet: form with modal <%= form_for @note, :url => registrant ...

htmlcssruby-on-rails

Display the latest item using React

I've encountered a problem with displaying the last message in my pet chat application. Currently, I have to manually scroll to the bottom every time I open the chat in order to see the latest message. This scrolling behavior is not very user-friendly ...

cssreactjsnext.jsfrontend

Slide in the Toggle Effect to Your Navigation Menu

Seeking help with enhancing my jQuery dropdown menu to include a slide down toggle effect similar to this example: http://jsfiddle.net/LaSsr/188/. Any assistance in applying this slide effect to the following JSfiddle would be greatly appreciated. Thank yo ...

javascriptjqueryhtmlcss

What is the most efficient method for clearing the innerHTML when dealing with dynamic content?

Is there a more efficient method for cleaning the innerHTML of an element that is constantly changing? I created a function to clean the containers, but I'm not sure if it's the most efficient approach. While it works with the specified containe ...

javascriptjqueryhtml

Struggling to insert a high-quality image into inline divs of exactly 33.3333% width

After creating 3 inline divs, each taking up 33.333% of their parent width, I encountered an issue while trying to insert images into them. Whenever the image exceeds the 33.333% width of the div, it overflows outside the container. My goal is to make the ...

htmlcss

Update: Explored 0 web pages (at a rate of 0 pages per minute) and obtained information from 0 elements (at a rate of

I'm a beginner in Python and Scrapy, currently working on my first project to crawl web security information from a website. However, when I try to run it using cmd, I encounter the message "Crawled 0 pages (at 0 pages/min), scraped 0 items (at 0 item ...

pythoncssscrapyweb-crawler

The window.frames function is coming back with a blank, empty

In an attempt to set up a simple HTML file on my local machine, I have the following code: <html> <head> <title>Testing</title> </head> <frameset framespacing="0" frameborder="0" rows="20px,100%" border="0"> ...

htmlframeset