How to add text under the image to the right in HTML?

SafwonBinFaisal
June 13, 2023
142 views
2 votes
3 Answers

I am new to HTML and I want the text to be under the image to the right.

I have tried using float: right; but then the text is beside the image to the right.

.image-container {
    position: absolute;
    text-align: right;
}

.image {
    max-width: 100%;
    height: auto;
    margin-left: 10px;
    float: right;
}

.text {
    text-align: right;
    margin-top: 10px;
}

<div id="image-container">
    <img src="Safwon.png" alt="Picture of the author" width="150" height="200" class="image" />
    <div class="text">This is me</div>
</div>

Tags: css html

Answers

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container{
            display: flex;
            gap: 10px;
        }
        p{
            align-self: flex-end;
        }
    </style>

</head>
<body>
    <div class="container">
        <img src="https://www.ayvalikpetshop.com/wp-content/uploads/2017/09/kedi-bakimi.jpg" alt="">
        <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eveniet, rem.</p>
    </div>
</body>
</html>

- KevinMMansour
- June 10, 2023 at 7:44 pm
- 0 votes
0
You have specified image-container to your <div> as an id but in your CSS, you wrote it as a class therefore your code didn’t work. Change .image-container to #image-container.
#image-container { float: right; } .image { max-width: 100%; height: auto; } .text { text-align: center; margin-top: 10px; }

<div id="image-container"> <img src="https://via.placeholder.com/600x400.png" alt="Picture of the author" width="150" height="200" class="image"> <div class="text">This is me</div> </div>
Login or Signup to reply.