时间戳

首页 > 解决方案 > 将内容居中并使其位置可调

css - 将内容居中并使其位置可调

问题描述

我是react和的新手css。我的目标是将我的 3 个开关和它们的名称放在页面的中心。然后我希望 3 个开关按钮自动调整它们的位置，无论其左侧文本的长度如何。

这是我目前所拥有的。

这是switch button + text. 我制作了一种样式以将文本与开关图标的中间对齐。我尝试了，verticalAlign: "middle"但文本位于底部位置。

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

这是css我暂时做的

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%;
}

在这个文件中，我创建了我的切换按钮，应用 css 并给它们命名。

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

这是实际结果

在此处输入图像描述

标签： cssreactjs

解决方案

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

推荐阅读