reactjs 如何将React应用的主页内容居中？

9gm1akwq  于 2023-10-17  发布在  React
关注(0)|答案(1)|浏览(97)

这是我第一次尝试使用Anima（一种设计到代码的工具）将Figma的设计转换为代码，但由于某些原因，内容不会居中。
我使用Vite创建了React应用程序，然后复制了从Anima生成的代码。
我试着改变Anima生成的CSS，让body使用display: flex和justify-content: center。我还使用#root { display: flex; justify-content: center }进行了相同的更改，因为我的React应用程序正在渲染（如果这个词正确的话）到我的html文件中的根ID，但这并不起作用。
我还在学习，所以请原谅我，纠正我，如果我在这方面使用了错误的措辞。
下面是我的CSS：

@import url('https://fonts.googleapis.com/css2?family=Hahmlet:wght@400;700&display=swap');

:root{
  --background-color: #faf6ef;
}

body {
  width: 1440px;
  margin: 0;
  background-color: var(--background-color);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.desktop .text-wrapper {
  color: #000000;
  font-family: 'Hahmlet', serif;
  font-size: 24px;
  font-weight: 400;
  left: 924px;
  letter-spacing: 0;
  line-height: normal;
  position: absolute;
  text-align: center;
  top: 3034px;
  width: 419px;
}

.content-contact {
  height: 410px;
  left: 188px;
  position: absolute;
  top: 2555px;
  width: 1067px;
}

.desktop .overlap-group {
  background-color: #ead4b8;
  height: 410px;
  position: relative;
  width: 1065px;
}

.desktop .div {
  color: #100b05;
  font-family: 'Hahmlet', serif;
  font-size: 64px;
  font-weight: 700;
  left: 389px;
  letter-spacing: 0;
  line-height: normal;
  position: absolute;
  text-align: center;
  top: 57px;
  white-space: nowrap;
  width: 285px;
}

.desktop .content-skills {
  height: 395px;
  left: 188px;
  position: absolute;
  top: 1988px;
  width: 1069px;
}

.desktop .programming-logos {
  height: 198px;
  left: 2px;
  position: absolute;
  top: 197px;
  width: 1065px;
}

.desktop .skills-heading {
  color: #100b05;
  font-family: 'Hahmlet', serif;
  font-size: 64px;
  font-weight: 700;
  left: 0;
  letter-spacing: 0;
  line-height: normal;
  position: absolute;
  text-align: center;
  top: 0;
  white-space: nowrap;
  width: 1063px;
}

.desktop .content-projects {
  height: 584px;
  left: 190px;
  position: absolute;
  top: 1232px;
  width: 1063px;
}

.desktop .overlap-2 {
  height: 584px;
  position: relative;
  width: 1065px;
}

.desktop .lines {
  height: 481px;
  left: 0;
  position: absolute;
  top: 103px;
  width: 1062px;
}

.desktop .project-hyper-links {
  height: 157px;
  left: 672px;
  position: absolute;
  top: 103px;
  width: 393px;
}

.desktop .text-wrapper-2 {
  color: #100b05;
  font-family: 'Hahmlet', serif;
  font-size: 40px;
  font-weight: 700;
  left: 0;
  letter-spacing: 0;
  line-height: normal;
  position: absolute;
  text-align: center;
  text-decoration: underline;
  top: 97px;
  width: 389px;
}

.desktop .text-wrapper-3 {
  color: #100b05;
  font-family: 'Hahmlet', serif;
  font-size: 40px;
  font-weight: 700;
  left: 0;
  letter-spacing: 0;
  line-height: normal;
  position: absolute;
  text-align: center;
  text-decoration: underline;
  top: 0;
  width: 389px;
}

.desktop .text-wrapper-4 {
  color: #100b05;
  font-family: 'Hahmlet', serif;
  font-size: 64px;
  font-weight: 700;
  left: 0;
  letter-spacing: 0;
  line-height: normal;
  position: absolute;
  top: 0;
  width: 387px;
}

.desktop .devicon-github {
  height: 128px;
  left: 62px;
  position: absolute;
  top: 456px;
  width: 128px;
}

.desktop .dots {
  height: 481px;
  left: 515px;
  position: absolute;
  top: 103px;
  transform: rotate(90deg);
  width: 29px;
}

.desktop .ellipse {
  background-color: #100b05;
  border-radius: 14.5px/13.7px;
  height: 27px;
  left: 0;
  position: absolute;
  top: 0;
  width: 29px;
}

.desktop .ellipse-2 {
  background-color: #100b05;
  border-radius: 14.5px/13.7px;
  height: 27px;
  left: 0;
  position: absolute;
  top: 76px;
  width: 29px;
}

.desktop .ellipse-3 {
  background-color: #100b05;
  border-radius: 14.5px/13.7px;
  height: 27px;
  left: 0;
  position: absolute;
  top: 151px;
  width: 29px;
}

.desktop .ellipse-4 {
  background-color: #100b05;
  border-radius: 14.5px/13.7px;
  height: 27px;
  left: 0;
  position: absolute;
  top: 227px;
  width: 29px;
}

.desktop .ellipse-5 {
  background-color: #100b05;
  border-radius: 14.5px/13.7px;
  height: 27px;
  left: 0;
  position: absolute;
  top: 302px;
  width: 29px;
}

.desktop .ellipse-6 {
  background-color: #100b05;
  border-radius: 14.5px/13.7px;
  height: 27px;
  left: 0;
  position: absolute;
  top: 378px;
  width: 29px;
}

.desktop .ellipse-7 {
  background-color: #100b05;
  border-radius: 14.5px/13.7px;
  height: 27px;
  left: 0;
  position: absolute;
  top: 454px;
  width: 29px;
}

.desktop .content-about {
  height: 539px;
  left: 186px;
  position: absolute;
  top: 522px;
  width: 1069px;
}

.desktop .p {
  color: #100b05;
  font-family: 'Hahmlet', serif;
  font-size: 24px;
  font-weight: 400;
  left: 629px;
  letter-spacing: 0;
  line-height: normal;
  position: absolute;
  top: 224px;
  width: 436px;
}

.desktop .hi-i-m-dakota {
  color: transparent;
  font-family: 'Hahmlet', serif;
  font-size: 40px;
  font-weight: 700;
  left: 629px;
  letter-spacing: 0;
  line-height: normal;
  position: absolute;
  top: 73px;
  width: 431px;
}

.desktop .span {
  color: #100b05;
}

.desktop .text-wrapper-5 {
  color: #6d9ad5;
  font-size: 64px;
}

.desktop .unsplash {
  background-image: url(./unsplash-giy2ly37kw8.png);
  background-position: 50% 50%;
  background-size: cover;
  height: 539px;
  left: 0;
  position: absolute;
  top: 0;
  width: 586px;
}

.desktop .navbar {
  height: 84px;
  left: 0;
  position: absolute;
  top: 19px;
  width: 1442px;
}

.desktop .overlap-3 {
  height: 84px;
  position: relative;
  width: 1440px;
}

.desktop .overlap-4 {
  height: 75px;
  left: 0;
  position: absolute;
  top: 9px;
  width: 1440px;
}

.desktop .line {
  height: 1px;
  left: 0;
  object-fit: cover;
  position: absolute;
  top: 74px;
  width: 1440px;
}

.desktop .navbar-2 {
  height: 75px;
  left: 795px;
  position: absolute;
  top: 0;
  width: 467px;
}

.desktop .text-wrapper-6 {
  color: #100b05;
  font-family: 'Hahmlet', serif;
  font-size: 24px;
  font-weight: 700;
  left: 0;
  letter-spacing: 0;
  line-height: normal;
  position: absolute;
  top: 0;
  width: 78px;
}

.desktop .text-wrapper-7 {
  color: #100b05;
  font-family: 'Hahmlet', serif;
  font-size: 24px;
  font-weight: 700;
  left: 117px;
  letter-spacing: 0;
  line-height: normal;
  position: absolute;
  top: 0;
  width: 68px;
}

.desktop .text-wrapper-8 {
  color: #100b05;
  font-family: 'Hahmlet', serif;
  font-size: 24px;
  font-weight: 700;
  left: 223px;
  letter-spacing: 0;
  line-height: normal;
  position: absolute;
  top: 0;
  width: 100px;
}

.desktop .text-wrapper-9 {
  color: #100b05;
  font-family: 'Hahmlet', serif;
  font-size: 24px;
  font-weight: 700;
  left: 361px;
  letter-spacing: 0;
  line-height: normal;
  position: absolute;
  top: 0;
  width: 98px;
}

.desktop .text-wrapper-10 {
  color: #100b05;
  font-family: 'Hahmlet', serif;
  font-size: 32px;
  font-weight: 700;
  left: 190px;
  letter-spacing: 0;
  line-height: normal;
  position: absolute;
  top: 0;
  width: 359px;
}

.desktop .heading {
  height: 139px;
  left: 348px;
  position: absolute;
  top: 243px;
  width: 746px;
}

.desktop .text-wrapper-11 {
  color: #100b05;
  font-family: 'Hahmlet', serif;
  font-size: 96px;
  font-weight: 700;
  left: 0;
  letter-spacing: 0;
  line-height: normal;
  position: absolute;
  top: 0;
}

.desktop .additional-lines {
  height: 3080px;
  left: 0;
  position: absolute;
  top: 0;
  width: 1440px;
}

.desktop .overlap-5 {
  height: 3080px;
  position: relative;
}

.desktop .img {
  height: 3080px;
  left: 96px;
  object-fit: cover;
  position: absolute;
  top: 0;
  width: 1px;
}

.desktop .line-2 {
  height: 3080px;
  left: 1345px;
  object-fit: cover;
  position: absolute;
  top: 0;
  width: 1px;
}

.desktop .line-3 {
  height: 2px;
  left: 0;
  object-fit: cover;
  position: absolute;
  top: 2975px;
  width: 1440px;
}

下面是我的HTML：

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Dakota Grey Bradford</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.jsx"></script>
  </body>
</html>

下面是我的React App.jsx：

import { useState } from 'react'

function App() {

  return (
    <div className="desktop">
      <div className="text-wrapper">lorem</div>
      <div className="content-contact">
        <div className="overlap-group">
          <div className="div">Get In Touch</div>
        </div>
      </div>
      <div className="content-skills">
        <img className="programming-logos" alt="Programming logos" src="programming-logos.png" />
        <div className="skills-heading">My Skills</div>
      </div>
      <div className="content-projects">
        <div className="overlap-2">
          <img className="lines" alt="Lines" src="lines.png" />
          <div className="project-hyper-links">
            <div className="text-wrapper-2">Project</div>
            <div className="text-wrapper-3">Project</div>
          </div>
          <div className="text-wrapper-4">Projects</div>
          <img className="devicon-github" alt="Devicon github" src="devicon-github.svg" />
          <div className="dots">
            <div className="ellipse" />
            <div className="ellipse-2" />
            <div className="ellipse-3" />
            <div className="ellipse-4" />
            <div className="ellipse-5" />
            <div className="ellipse-6" />
            <div className="ellipse-7" />
          </div>
        </div>
      </div>
      <div className="content-about">
        <p className="p">
          Lorem ipsum dolor sit amet consectetur. Tortor ut lectus non amet justo non. Dignissim adipiscing massa eget
          ut lectus pharetra nibh sed malesuada. Ut in sed maecenas non amet. Cursus sapien amet lectus ultricies
          aliquet.
        </p>
        <p className="hi-i-m-dakota">
          <span className="span">Hi, I’m </span>
          <span className="text-wrapper-5">Dakota</span>
          <span className="span">.</span>
        </p>
        <div className="unsplash" />
      </div>
      <div className="navbar">
        <div className="overlap-3">
          <div className="overlap-4">
            <img className="line" alt="Line" src="line-1.svg" />
            <div className="navbar-2">
              <div className="text-wrapper-6">About</div>
              <div className="text-wrapper-7">Skills</div>
              <div className="text-wrapper-8">Projects</div>
              <div className="text-wrapper-9">Contact</div>
            </div>
          </div>
          <div className="text-wrapper-10">Dakota</div>
        </div>
      </div>
      <div className="heading">
        <div className="text-wrapper-11">Web</div>
      </div>
      <div className="additional-lines">
        <div className="overlap-5">
          <img className="img" alt="Line" src="line-4.svg" />
          <img className="line-2" alt="Line" src="line-4.svg" />
          <img className="line-3" alt="Line" src="line-6.svg" />
        </div>
      </div>
    </div>
  )
}

export default App

下面是我的main.jsx：

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import './index.css'

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
)
reactjs

1条答案

按热度按时间
6ovsh4lw

6ovsh4lw1#

**这个问题主要是你的CSS样式，**有相当多的问题。我已经发现了一些，足以解决中心问题，但首先：
您使用了很多position: absolute。如果您不完全了解定位如何影响整体布局，并且没有为适当的父容器指定position: relative，则可能会扰乱布局。检查这些docs。

您应该尝试重新构建和重新设计整个页面布局，这是解决问题并了解更多关于CSS的最佳方法。您还可以添加一个屏幕截图的设计应该是什么样子，以获得更多的帮助。

**但是，要回答您关于在当前样式下居中页面的问题，**您应该使用以下样式修改CSS文件
即更改body并为.desktop本身添加样式（它是主页面 Package 器）：

body {
  background-color: var(--background-color);
}

.desktop {
  position: relative;
  width: 1440px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

这将使整个页面居中。
然而，就像我说的，**你应该学习更多关于定位和重组整个布局和样式的知识。

  • 目前调试起来也很麻烦*
赞(0）分享  回复(0）举报  2023-10-17
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备13028337号-1 大数据知识库 https://www.saoniuhuo.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com