我正在尝试制作一个投资组合网站。但是,我遇到了 CSS 定位错误。我想知道,将图像保存在“容器”内,这样我就可以将它居中,我如何才能将它向下移动一点点。
import "./App.css";
export default function App() {
return (
<div className="App">
<div className="container">
<div className="text-container">
<h1>Hey, I'm <span>Jaxson</span>.</h1>
<p>I am a <u>13 year old</u> front-end developer. I am top of my class in computer programming. I am know: JavaScript, HTML, CSS, Java, and Python. I am learning React JS and Kotlin. I also have joined the lego robotics team, and coded my Stem Tank (Science Fair) project using an Arduino Uno.</p>
</div>
<div className="image-container">
<img src="https://mail.google.com/mail/u/1?ui=2&ik=417fae867b&attid=0.1.1&permmsgid=msg-f:1764564355309681295&th=187cfdee9d8cba8f&view=fimg&fur=ip&sz=s0-l75-ft&attbid=ANGjdJ8XCKr1gjbLPb5wVB7i2eN66jk6W7ZrdvifuuNWQcPW9ndJ7taOUyxM0YTgBK33mWCfVe2RGtiz7rLlUC_-pxRp5MuDFZzBykhX6bv7f_oGtA3BD1UK5HAmSN8&disp=emb"></img>
</div>
</div>
</div>
)
}
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200&family=Quicksand&display=swap');
html {
min-height: 100%;
}
body {
height: 100%;
width: 100%;
background-color: #191a1d;
}
h1 {
color: #f6f5ff;
font-family: Quicksand;
}
p {
color: rgb(212, 212, 212);
font-family: Poppins;
font-weight: 200;
}
h1, p {
width: 450px;
}
.container {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
span {
background-image: linear-gradient(to right, #dd5e89, #f7bb97);
background-clip: text;
-webkit-text-fill-color: transparent;
}
img {
height: 250px;
border-radius: 10px;
position: relative;
}
.text-container, .image-container {
display: inline-block;
border: 1px dashed red;
}
.image-container {
}
<3
我试图给它一些额外的边距或填充,但那没有用。帮助!
您可能想参考使用 flexbox 使元素居中的 StackOverflow 答案:https://stackoverflow.com/a/19461564/8888888
一般的想法是您需要将父元素设置为 flexbox
display: flex
,然后您可以将子元素与其他 flexbox 属性对齐。
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200&family=Quicksand&display=swap');
.App {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.container {
display: flex;
align-items: center;
justify-content: center;
}
/* Other existing CSS below */
html {
height: 100%;
}
body {
min-height: 100%;
width: 100%;
background-color: #191a1d;
margin: 0;
}
h1 {
color: #f6f5ff;
font-family: Quicksand;
}
p {
color: rgb(212, 212, 212);
font-family: Poppins;
font-weight: 200;
}
h1,
p {
width: 450px;
}
span {
background-image: linear-gradient(to right, #dd5e89, #f7bb97);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
img {
height: 250px;
border-radius: 10px;
position: relative;
}
<div class="App">
<div class="container">
<div class="text-container">
<h1>Hey, I'm <span>Jaxson</span>.</h1>
<p>I am a <u>13 year old</u> front-end developer. I am top of my class in computer programming. I am know: JavaScript, HTML, CSS, Java, and Python. I am learning React JS and Kotlin. I also have joined the lego robotics team, and coded my Stem Tank
(Science Fair) project using an Arduino Uno.</p>
</div>
<div class="image-container">
<img src="https://placekitten.com/250/250" />
</div>
</div>
</div>