這就是我想做的
這就是我現在所擁有的
這是我現在擁有的代碼，我嘗試使用行內和我能想到的所有 css 語法，但它仍然無法正常作業。我在反應中嘗試了邊距填充。我還使用一個盒子來裝箱所有組件以及包括影像和文本在內的所有內容。
p {
margin-left: 40%;
margin-top: -50%;
text-align: left;
font-family: "Montserrat", sans-serif;
font-weight: 100;
line-height: 1.5;
display: inline-block;
}
img {
height: 110px;
width: 110px;
margin-left: 5%;
display: inline-block;
}
.container {
display: inline-block;
}
下面是 react.js 檔案中的一些代碼
<div className={classes.empty}></div>
<div className="container">
<img
className={classes.img}
src={ProfilePic}
alt="Profile"
style={{ marginTop: "12%", display: "inline-block;" }}
></img>
<p>
So May See Macy <br />
Computer Science Major <br />
Current Standing: Sophomore <br />
GPA: 3.6
</p>
</div>
</div>
uj5u.com熱心網友回復：
嘗試：
.container {
display: flex;
align-items: center;
}
并從p和img元素中洗掉行內塊屬性。
uj5u.com熱心網友回復：
嘗試使用 flexbox
.container {
display: flex;
justiry-content: start;
align-itemt: center;
}
.container img, .container p {
flex-grow: 0;
}
.container img {
width: 110px;
height: 110px;
max-width: 100%;
max-height: 100%;
}
.container p {
margin-left: 40%;
margin-top: -50%;
text-align: left;
font-family: "Montserrat", sans-serif;
font-weight: 100;
line-height: 1.5;
}
閱讀 Flexbox 檔案
uj5u.com熱心網友回復：
.container {
display: flex;
justiry-content: start;
align-itemt: center;
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/344707.html