Center content and make their position adjustable - css

Question

I'm new to react and css.
My goal here is to center my 3 switches and the name of them in the center of my page. Then I would like the 3 switches button to adjust their position automatically no matter the length of the text on its left.
Here is what I have for the moment.
This is the switch button + text. I made a style to align the text with the middle of the switch icon. I tried the verticalAlign: "middle" but it the text went at the bottom position.
import React, { useState } from "react";
import Switch from "react-switch";
const SwitchMode = ({text}) => {
const [checked, setChecked] = useState(false)
const handleChange = StateCheck => {
setChecked(StateCheck)
}
return(
<div className="switch-position">
<label>
<span style={{display: "inline-flex", verticalAlign: '50%', marginRight: '4%'}}>{text}</span>
<Switch
onChange={handleChange}
checked={checked}
className="react-switch"
/>
</label>
</div>
)
}
export default SwitchMode
And this is the css I've made for the moment
body {
margin: 0;
}
.image-position {
display: flex;
justify-content: center;
width: 100%;
margin-top: 5%;
height: auto;
}
.service-position {
display: flex;
flex-direction: column;
margin-top: 5%;
}
.switch-position {
display: inline;
justify-content: center;
width: 100%;
margin-top: 1%;
}
in this file I create my switch button, apply the css and give them a name.
import React from 'react';
import './index.css';
import ReactRoundedImage from "react-rounded-image";
import Img from './images/Diamond.png'
import SwitchMode from './Switch';
const Profile = () => {
return(
<div>
<div className='image-position'>
<ReactRoundedImage image={Img} roundedSize="0" imageWidth="150" imageHeight="150" />
</div>
<div className='service-position'>
<SwitchMode text="Discord"/>
<SwitchMode text="Google"/>
<SwitchMode text="FEJZIOFZEJ"/>
</div>
</div>
)
}
export default Profile
this is the actual result

Answer 1

You can do something like this:
body {
margin: 0;
}
.image-position {
display: flex;
justify-content: center;
width: 100%;
margin-top: 5%;
height: auto;
}
.service-position {
display: flex;
justify-content: center;
flex-direction: row;
margin-top: 5%;
}
.switch-position {
text-align: center;
width: 100px;
}
and change your SwitchMode component to this:
const SwitchMode = ({ text }) => {
const [checked, setChecked] = useState(false);
const handleChange = (StateCheck) => {
setChecked(StateCheck);
};
return (
<div className="switch-position">
<label>
<span>{text}</span>
<Switch
onChange={handleChange}
checked={checked}
className="react-switch"
/>
</label>
</div>
);
};
The main things I did was set justify-content: center and flex-direction: row on .service-position. To make sure the .switch-position items displayed in a row and were centered.
For centering the text next to the switch button I used text-align: center and to make sure the text is displayed above the switch button I set a fixed with on .switch-position.
Sandbox Example