CODEWITHSUNDEEP
htmlcss
user1124
user1124

Reputation: 27

How to place an image and text under it, side by side using HTML and css?

I want to achieve something like this:

|-----------|     |-----------|     |-----------|
|           |     |           |     |           | 
|  image    |     |  image    |     |  image    |
|           |     |           |     |           |
|-----------|     |-----------|     |-----------|
   image 1           image 2           image 3

There should be images side by side and also there should be description about these images under each image. I tried placing each image under its own "div" tag and also used display:inline property of css but above format is not getting displayed.

Upvotes: 2

Views: 12446

Answers (7)

user3266067
user3266067

Reputation:

simplest solution:

<style type="text/css">
   #container{
   height:100%;
   width: 100px; 
}
</script
<body>
<div id="container">
<img id="a" src="" height="100" width="100" ></img><br /><p> this is text1</p><br />
<img id="b" src="" height="100" width="100" ></img><br /><p> this is text2</p><br />
<img id="c" src="" height="100" width="100" ></img><br /><p> this is text3</p><br />
<img id="d" src="" height="100" width="100" ></img><br /><p> this is text4</p><br />
</div>
</body

in src you put your image source, i have left blank and remember the width of your image should not exceed from the width of container.

Upvotes: 0

Jaykumar Patel
Jaykumar Patel

Reputation: 27624

You can do something like this

JsFiddle Demo

CSS

.container{
    width: 150px;
    margin-left: 10px;
    float: left;
}
img{
    width: 150px;
    height:150px;
    float: left;
}
.text{
    text-align:center;
}

Upvotes: 2

halex
halex

Reputation: 16403

HTML5 introduced the figure element that is used to connect an image with its caption with figcaption.

<figure>
    <img src="path/to/your/image" width="150px" height="150px" />
    <figcaption>First image</figcaption>
</figure>

To get the figures side by side use the css

figure {
    display:inline-block;
}

and to center the text below the image use 

figcaption {
    text-align: center;
}

See http://jsfiddle.net/TSWND/1/ for an example with 3 dummy images

Upvotes: 3

n1cko_r
n1cko_r

Reputation: 392

U can also use 

<figure>
<img src="">
<legend></legend>
</figure>

Use this structure to contain your elements, tha float each figure element to the right or left and than add div with clear:both style.

Upvotes: 0

WhiteHawk
WhiteHawk

Reputation: 89

use float :left in css in middle DIV

<div>

   <div> image code</div>// <-- use here float left
   <div> discription code </div>//<-- use here float left
</div

Upvotes: 0

m-farhan
m-farhan

Reputation: 1426

use div 

display:block;
float:left;

Upvotes: 0

aslawin
aslawin

Reputation: 1981

you need to create div container with two children: div wher you have img and another div with text. Add them proper width and float: left. That should help

EDIT: fiddle: fiddle

Upvotes: 0

Related Questions