English 中文(简体)
我怎样把“Vite React”器具的内容集中起来?
原标题：How do I center the contents of a Vite React app?
  • 时间：2023-10-13 23:57:22
  •  标签：
  • css
  • reactjs

这是我第一次尝试将图谋从Figma转成使用Anima的编码,但出于某种原因,内容不会重。 我用火力制造了反应器,然后复制了Anima产生的代码。

我尝试改变由Anima生成的芯片,以便该机构使用<代码>:flex 和justification-content: Center。 我也使用<代码>#root{显示:flex;正当理由-content: Center } 做了同样的改动,因为我是这样。 在我的html档案中,正在对根 root进行反应(如果说正确的话),但这项工作没有奏效。

我仍然学习,如果我对我说错的话,那么我会听我的话。

这里是我的安保部:

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

这里是我的超文本:

<!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>

我在此重申:

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

我的主轴是:

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>,
)
问题回答

www.un.org/Depts/DGACM/index_spanish.htm 这个问题主要与你的经济、社会、文化权利委员会的束缚有关,在这方面存在许多问题。 我举出几个例子,足以解决中心问题,但首先:

You used a lot of position: absolute. This can mess with your layout if you do not fully understand how positioning affects the overall layout and you do not specify position: relative for the appropriate parent containers. Check these docs.

You should try restructuring and restyling the entire page layout, that s the best way to resolve the issue and learn more about CSS. You can also add a screenshot of what the design is supposed to look like, for more help.

www.un.org/Depts/DGACM/index_spanish.htm 然而,鉴于您目前的剪辑,请回答您关于该页的集中问题。 您应修改文具如下的文体。

<<>strong>i.e. change one and Add styling for .desktop (主页总结):

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

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

This would center your entire page.

然而,正如我所说的那样,you应当更多地了解如何定位和调整整个布局和缝.。

?

时间：2023-10-14 02:55:55


上一篇：
下一篇：


相关问题
CSS working only in Firefox

I am trying to create a search text-field like on the Apple website. The HTML looks like this: <div class="frm-search"> <div> <input class="btn" type="image" src="http://www....

时间：2009-11-13 05:37:01 回答：1 展示：1
jquery ui dialog opens only once

I have a button that opens a dialog when clicked. The dialog displays a div that was hidden After I close the dialog by clicking the X icon, the dialog can t be opened again.

时间：2009-11-09 15:55:58 回答：3 展示：1
Drop down background url in Safari Issue

selectBox.selectCSS { background: url(/Images/replacementSelectBackground.png) top left no-repeat height:auto; } I have an issue in Safari only where the image is not rendering on top ...

时间：2009-11-09 15:17:34 回答：1 展示：1
CSS specific for Safari

How do you target specifically safari in css with styles?

时间：2009-11-09 14:55:29 回答：2 展示：1
Aligning textarea in a form

Ive used the following css code to align my form elements: form { position:relative; } form input { position:absolute; left:11em; } However, the textarea element is not aligned correctly with the ...

时间：2009-11-09 14:54:33 回答：4 展示：1
Firefox background image horizontal centering oddity

I am building some basic HTML code for a CMS. One of the page-related options in the CMS is "background image" and "stretch page width / height to background image width / height." so that with large ...

时间：2009-11-09 14:33:21 回答：3 展示：1
CSS problem with page footer

I have defined my page footer in the css file as: #footer { position: absolute; height: 50px; text-align: center; background: #66CCCC; bottom: 0px; left: 0px; width: 100%; height: ...

时间：2009-11-09 14:28:05 回答：4 展示：1
热门标签

友情链接

Allggapp Alljchome-教程家园 mvfinale.com-影视剧情大结局大全