How to place the text next to the image
Question
I was creating a website using CSS and came across this problem: I was making an "About Me" page but somehow instead of the text appearing next to the image, it's placed under the image. Any ideas?
CSS:
.about-img {
width: 50%;
padding: 0 15px;
}
.about-text {
width:50%
padding: 0 15px;
}
4 answers
solution1
0 2021-12-28 14:23:01
Assuming both the text and image are nested in the same div. You can set a display: flex; on the parent div about . By default, a flex display has a flex-direction: row; , so the elements should line up side by side. Then you can add align-items: center; to align the text in the center of the image.
.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>
solution2
0 2021-12-28 14:26:08
Wrap your image and text in a div and set it a display: flex;
.about-wrap { display: flex }
<div class="about-wrap"> <img class="about-img" /> <div class="about-text"></div> </div>
solution3
0 2021-12-28 14:26:50
You can use flex class, something like this:
CSS
.flex {
display:flex;
}
HTML
<div class="flex">
<div> *YOUR IMG* </div>
<div> *YOUR TEXT* </div>
</div>
solution4
-1 2021-12-28 14:28:47
You can refer this code to align text next to the image.
.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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.