我正在使用 CSS 創建一個網站并遇到了這個問題：我正在制作一個“關于我”頁面，但不知何故而不是出現在影像旁邊的文本，它被放置在影像下方。有任何想法嗎？
CSS：
.about-img {
width: 50%;
padding: 0 15px;
}
.about-text {
width:50%
padding: 0 15px;
}
uj5u.com熱心網友回復：
假設文本和影像都嵌套在同一個 div 中。您可以display: flex;在父 div 上設定 a about。默認情況下，一個 flex 顯示有一個flex-direction: row;，所以元素應該并排排列。然后您可以添加align-items: center;對齊影像中心的文本。
.about-img {
width: 50%;
padding: 0 15px;
}
.about-text {
width: 50%;
padding: 0 15px;
}
.about {
display: flex;
align-items: center;
}<div class="about">
<img src="https://dummyimage.com/300/000/fff" />
<p class="about-text">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing
software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</div>uj5u.com熱心網友回復：
將您的影像和文本包裹在一個 div 中并將其設定為 display: flex;
.about-wrap {
display: flex
}<div class="about-wrap">
<img class="about-img" />
<div class="about-text"></div>
</div>uj5u.com熱心網友回復：
您可以使用 flex 類，如下所示：
CSS
.flex {
display:flex;
}
HTML
<div class="flex">
<div> *YOUR IMG* </div>
<div> *YOUR TEXT* </div>
</div>
uj5u.com熱心網友回復：
您可以參考此代碼來對齊影像旁邊的文本。
.about {
display: flex;
align-items: center;
justify-content: center
}
img {
max-width: 100%
}
.about-image {
flex-basis: 40%
}
.about-text {
font-size: 20px;
padding-left: 20px;
} <body>
<div class="about">
<div class="about-image">
<img src="https://i.pinimg.com/originals/26/ea/fc/26eafc0b14488fea03fa8fa9751203ff.jpg">
</div>
<div class="about-text">
<h1>Paris is one of the most beautiful cities in France.</h1>
</div>
</div>
</body>轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/396371.html