'how to make an image inline with text in HTML

I am working on an HTML project and I want to make the van image be in line with the heading Vintage Camper Rentals. This is the code:

    <head>
    <title>Index Page</title>
</head>
<body>
    <img src="vintage1-logo.jpg">
    <li><a href="Index.html" target="blank" style="color: green; text-decoration: none; font-family: 'Times New Roman', Times, serif;">Home</a></li>
        <li><a href="about-us.html" target="blank" style="color: green; text-decoration: none; font-family: 'Times New Roman', Times, serif;">About Us</a></li>
        <li><a href="contact-us.html" target="blank" style="color: green; text-decoration: none; font-family: 'Times New Roman', Times, serif;">Contact Us</a></li>
    <h1 style="color: blue; font-family: 'Times New Roman', Times, serif; font-weight: normal; font-size: 24pt;">Vintage Camper Rentals</h1>
    <div style="font-family: 'Times New Roman', Times, serif; font-weight: normal; font-size: 12pt; float: left;">We specialise in Classic Retro VW Kombi camper van hire and Modern camper rental, or depending on where you come from, Microbus, Vanagon, T4 Transporter or Combi hire.
        Our stylish VW campervans combine the best of the old and the new, contrasting the legendary status of retro VW campers with updated features for a comfy, fun time.
    </div>
    <h2 style="color: lightblue; font-family: 'Times New Roman', Times, serif; font-weight: normal; font-size: 18pt;">Booking your camper today</h2>
    <img src="vintage2-image.jpg" style="float: right; margin-right: 10px;"><br>
    <img src="vintage3-footer.png">
    <p>Copyright 2020© - site designed by <a href="https://www.ajman.ac.ae" target="blank" style="color: green; text-decoration: none; font-family: 'Times New Roman', Times, serif;">Adnan Adel</p>    
</body>
htmlcssimage


Solution 1:[1]

An option is to use flexbox to make more items be inline, I wrapped the image and the h1 tag in a div and added the display of flex to the wrapper, I also added an external property, align-items to center the text with the image.

Note: I changed the src of the images with a placeholder image for the snippet, you need to change the src attribute with your images.

<li><a href="Index.html" target="blank" style="color: green; text-decoration: none; font-family: 'Times New Roman', Times, serif;">Home</a></li>
        <li><a href="about-us.html" target="blank" style="color: green; text-decoration: none; font-family: 'Times New Roman', Times, serif;">About Us</a></li>
        <li><a href="contact-us.html" target="blank" style="color: green; text-decoration: none; font-family: 'Times New Roman', Times, serif;">Contact Us</a></li>
        
        
    <div style="display: flex; align-items: center">
     <img src="https://via.placeholder.com/150"/>
     <h1 style="color: blue; font-family: 'Times New Roman', Times,      serif; font-weight: normal; font-size: 24pt;">Vintage Camper        Rentals</h1>
    </div>
    
    
    <div style="font-family: 'Times New Roman', Times, serif; font-weight: normal; font-size: 12pt; float: left;">We specialise in Classic Retro VW Kombi camper van hire and Modern camper rental, or depending on where you come from, Microbus, Vanagon, T4 Transporter or Combi hire.
        Our stylish VW campervans combine the best of the old and the new, contrasting the legendary status of retro VW campers with updated features for a comfy, fun time.
    </div>
    <h2 style="color: lightblue; font-family: 'Times New Roman', Times, serif; font-weight: normal; font-size: 18pt;">Booking your camper today</h2>
    <img src="https://via.placeholder.com/150" style="float: right; margin-right: 10px;"><br>
    <img src="https://via.placeholder.com/150">
    <p>Copyright 2020© - site designed by <a href="https://www.ajman.ac.ae" target="blank" style="color: green; text-decoration: none; font-family: 'Times New Roman', Times, serif;">Adnan Adel</p>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Tudor Alexandru

Related Questions