Ola Mohey Ola Mohey - 2 months ago 10
CSS Question

How to set two image and text in same line

I have a simple problem, how I could set image and text in a single line. like this

[image - text - image]
and so on



<html>
<head>
<title></title>
<style>
img {
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<img src="http://i164.photobucket.com/albums/u8/hemi1hemi/COLOR/COL9-6.jpg">
<h1>afdsgdf dfgsdf dsfgf</h1>
<img src="http://i164.photobucket.com/albums/u8/hemi1hemi/COLOR/COL9-6.jpg">
</body>
</html>




Answer

<img> and <h1> are block elements by default. So they will display their content on their own line.

So you need to use the display property. And set its value to inline

<html>

<head>
    <title></title>
    <style>
        img {
            display: inline;w
            width: 100px;
            height: 100px;
        }
        h1 {
            display: inline;
        }
    </style>
</head>

<body>
    <img src="http://i164.photobucket.com/albums/u8/hemi1hemi/COLOR/COL9-6.jpg">
    <h1>afdsgdf dfgsdf dsfgf</h1>
    <img src="http://i164.photobucket.com/albums/u8/hemi1hemi/COLOR/COL9-6.jpg">
</body>

</html>

Read more about it here => https://developer.mozilla.org/en-US/docs/Web/CSS/display

Comments