471,627 Members | 1,284 Online
Bytes | Software Development & Data Engineering Community
Post +

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 471,627 software developers and data experts.

How to align 'text' under each image?

How do I align each image text (i.e. <p>image2 text...) directly under the image? So image 'image2 text' would be under image2.jpg and 'image3 text' would be under image3.jpg.

[HTML]<html>
<body>

<img src="image1.jpg"
width="160" height="100">

<img src="image2.jpg"
width="160" height="100">

<img src="image3.jpg"
width="160" height="100">

<p>image1 text

</body>
</html>[/HTML]
Sep 24 '07 #1
4 60231
drhowarddrfine
7,435 Expert 4TB
[HTML]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
<title></title>

<style type="text/css">
p{float:left}
</style>
</head>

<body>

<img src="1.png">
<p>text</p>

</body>
</html>[/HTML]
Sep 24 '07 #2
Still unable to place each text under each image Directly, please see my code below:

[HTML]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<title></title>

<style type="text/css">

p{float:left}

</style>

</head>

<body>

<img src="test.jpg"width="160" height="100">

<p>image 1 text</p>

<img src="test.jpg"width="160" height="100">

<p>image 2 text</p>

<img src="test.jpg"width="160" height="100">

<p>image 3 text</p>
</body>

</html>[/HTML]
Sep 24 '07 #3
Death Slaught
1,137 1GB
Still unable to place each text under each image Directly, please see my code below:

[HTML]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<title></title>

<style type="text/css">

p{float:left}

</style>

</head>

<body>

<img src="test.jpg"width="160" height="100">

<p>image 1 text</p>

<img src="test.jpg"width="160" height="100">

<p>image 2 text</p>

<img src="test.jpg"width="160" height="100">

<p>image 3 text</p>
</body>

</html>[/HTML]
change the "float: left" to "float: top" and if you want it centered just add margin width to your CSS. Like this


[HTML]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<title></title>

<style type="text/css">

p {float: top; margin-left: 100px;}

</style>

</head>

<body>

<img src="test.jpg"width="160" height="100">

<p>image 1 text</p>

<img src="test.jpg"width="160" height="100">

<p>image 2 text</p>

<img src="test.jpg"width="160" height="100">

<p>image 3 text</p>
</body>

</html>[/HTML]


Hope it helps, Death
Sep 24 '07 #4
drhowarddrfine
7,435 Expert 4TB
change the "float: left" to "float: top"
There is no such thing as 'float:top'.

I only assumed you had the images and text inside some sort of container. If not, then the text float all the way to the left. Here may be a better idea but I don't know if it fits into your scheme:
[HTML]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
<title></title>

<style type="text/css">
li{list-style-type:none;float:left;}
p{text-align:center}
</style>
</head>

<body>

<ul>
<li><img src="1.png"><p>text</p></li>
<li><img src="1.png"><p>text</p></li>
</ul>
</body>
</html>[/HTML]
Sep 24 '07 #5

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

reply views Thread by Abhijeet Kumar | last post: by
4 posts views Thread by acko bogicevic | last post: by
2 posts views Thread by Tom McL. | last post: by
6 posts views Thread by tomasio | last post: by
4 posts views Thread by Yocheved | last post: by
1 post views Thread by XIAOLAOHU | last post: by
reply views Thread by leo001 | last post: by

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.