Show an item vertically centered within its parent container

Following is the appearance of the selector:

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

The text currently appears close to the bottom of the selector. I would like it to be centered vertically while maintaining its horizontal positioning towards the left side.

Here is the code for the selector element:

<div class="MuiFormControl-root searchPlatform"></div>

This element has the following styles applied:

border: 0;
margin: 0;
display: inline-flex;
padding: 0;
position: relative;
min-width: 0;
flex-direction: column;
vertical-align: top;

The label "Platform" is defined as: 

<label class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-outlined">

I attempted to include vertical-align: middle; in its style, but this did not alter its position.

Is there a way to center the text vertically within the element?

htmlcsslabeldropdown

Answer №1

justify-content is a solid choice in this situation:

.searchPlatform {
 /* solely for demonstration purposes*/ 
  border: 1px solid black;
  height: 50px;
  width: 150px;
  
  margin: 0;
  padding: 0;
  position: relative;
  min-width: 0;
  flex-direction: column;
  vertical-align: top;
  
  /* additional code snippet */
  display: inline-flex;
  justify-content: center;
    
}
<div class="MuiFormControl-root searchPlatform"><label class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-outlined">Platform</label></div>

Answer №2

If you want to center the contents of a div, you can achieve this by using the display property set to flex, along with justify-content and align-items properties set to center. This will ensure that the content is centered in both axes.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .center {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 200px;
        border: 3px solid green;
      }
    </style>
  </head>
  <body>
    <div class="center">
      <button>this is a button</button>
    </div>
  </body>
</html>


.center {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 200px;
        border: 3px solid green;
      }
<div class="center">
      <button>this is a button</button>
    </div>

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

Hiding my valuable content with a sneaky CSS nav bar

My current issue involves the nav bar overlaying my content Here is a link to the problem for reference I am seeking advice on how to resolve this issue, as I'm unsure of what steps to take The nav bar functions properly in responsive/mobile mode, ...

htmlcsscss-float

Preloading jQuery Images in Relation to the Present Document

I am looking to create a custom jQuery image preloader that dynamically loads images based on the current document. My plan is to use a jQuery script that combines the current document name and an adjustable imagename/extension. For example, if the curre ...

javascriptjqueryhtml

Having trouble rendering components due to conflicts between React Router and Semantic UI React

Below is the code in my App.js: import { useRecoilValue } from 'recoil'; import { authState } from './atoms/authAtom'; import { ToastContainer } from 'react-toastify'; import { ProtectedRoute } from './layout/ProtectedRou ...

javascriptcssreactjssemantic-ui-react

Why does the AngularJS ngRepeat filter permanently remove null values?

Check out this JSFiddle demonstration I created to illustrate the problem: http://jsfiddle.net/s6Lj2/2/ Observe that in the dataset $scope.places = [{ name: 'Chicago', status: 'Active', analyst: 'Sam', recor ...

javascriptarrayshtmlangularjs

Achieving Equal Heights for Nested DIVs within Containers

Below is the snippet of code I need help with: <table cellpadding="0" cellspacing="0" style="background-color:Aqua"> <tr> <td> <div style="background-color:Yellow">Navigation</div> </td> ...

javascripthtmlcss

JavaScript CheckBox Color Change Not Functioning

Hello, I am currently experimenting with the checkAll function. When I click on the checkAll checkbox, it should select all rows and change their background color accordingly. Below is the JavaScript code I am using: function checkAll(objRef) { v ...

javascripthtmlcssgridview

Explore the versatility of jQuery by utilizing multiple objects in your POST and GET requests to PHP for enhanced

I am trying to send multiple arrays to a PHP page using jQuery and retrieve results, but I am encountering an issue where the array values are not being properly passed to the PHP page. Notice: Undefined index: $name Notice: Undefined index: $type Notice ...

phpjqueryhtmlarrays

External Submit button malfunctioning when attempting to submit two distinct forms

I'm currently working on a program to add items to the cart, and I need to include product attributes like colors and sizes in the process. However, I seem to be encountering an issue where only one form is submitted when using jQuery's submit(), ...

javascriptphpjqueryhtmlforms

problems arising from the alignment of floating divs

I am struggling with aligning the image "logo.jpg" in a left-floated div. How can I center it both vertically and horizontally within the code below? Thank you. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtm ...

css

Button appearing at the top of the screen on mobile devices

I have a "back to top" button that starts off invisible, then as you scroll down, it slides up a bit and sticks to the bottom right corner until the end of the page. However, the button is not behaving as expected. I've tried placing the button below ...

htmlcssbootstrap-5

Filling out the form will automatically direct you to the text input section

I'm trying to figure out if I can create an input box in HTML that directs the user to a specific HTML file based on the word they enter. For example, if they type "Doctor", it would redirect them to the page doctor.html. This is for a school project ...

javascripthtmlcssformsinput

Tips for effectively removing objects from a PixiJS application

I have embarked on a game development project using Pixi.js that involves items falling from the top of the canvas. The functionality I've implemented so far allows items to spawn and move down the canvas until they reach the end of the window, at whi ...

javascripthtmlcanvaspixi.js

Encountering an IndexError while iterating through a table in Selenium using Python due to a list index being out of range

Encountering IndexError: list index out of range while iterating through an HTML table but unsure about the cause. My function for iterating through the table involves clicking on web page frames and downloading files from another frame. The table consis ...

pythonhtmlselenium

Unable to display <div> elements from CSS within the Wordpress Text Widget

Having trouble displaying a <div> from CSS in a Text Widget on Wordpress. <div class=”deffgall-cutlure” ></div> style.css .deffgall-cutlure { display:block; position:relative; width:100px; height:100px; backgrou ...

csswordpress

What is the best way to update the color CSS property of an element with jQuery?

Can someone explain to me how to modify CSS using jQuery? I am trying to change the font color of "Valid VIN" to red, but my current code doesn't seem to be working: $("#result").html(<font color="red">"Valid VIN"</font>); ...

jquerycss

When I use console.log to display my array, the values are properly shown. However, when I try to append those values to a div

Despite properly logging the array before and after iterating through it to build list items, the resulting HTML displays 10 list items all showing "undefined" instead of the expected values extracted from Chrome history. What could be causing this unexpe ...

javascripthtmlarrays

Unraveling the Mystery: Determining the Position of a Keyword in an HTML File

My challenge involves analyzing an HTML document in string form to locate a specific keyword and identify the tag in which it appears. For instance, if my document looks like this: $string = "<html> <head> <title> ...

phphtml

Ways to show alternative data from a database in Laravel 8

I am working on a project where I need to display additional data based on the option selected from a dropdown menu populated from a database. Can anyone guide me on how to achieve this using javascript or jquery? https://i.stack.imgur.com/k3WLl.png Belo ...

javascriptphphtmljquerylaravel

AngularJS errorCallBack

I'm currently struggling with AngularJS and would really appreciate any constructive assistance. Below is the Angular code snippet I am working on: app.controller('customersCtrl', function($scope, $http) { $scope.element = function(num ...

phphtmlangularjs

Finding a particular sequence of characters and extracting information that comes after it

A while back, I created a website and now I'm looking to transfer the data into a database without manually copying and pasting the 400+ pages it has accumulated. This way, I can transform the site into a database-driven platform. Each page on my sit ...

phphtmlparsing