I used the following code for simple image gallery (actual code found in http://w3schools.com, it works perfectly). After editing css the alignment of text has been changed. I want to align the text at centre. Anybody knows the answer please help me.
My HTML Code:
<html>
<body>
<div id="d">
<div class="img">
<a target="_blank" href="klematis_big.htm">
<img src="a.jpg">
</a>
<div class="desc">
Add a description of the image here </div>
</div>
<div class="img">
<a target="_blank" href="klematis2_big.htm">
<img src="a.jpg">
</a>
<div class="desc">
<p>
Add a description of the image here</p>
</div>
</div>
<div class="img">
<a target="_blank" href="klematis3_big.htm">
<img src="a.jpg">
</a>
<div class="desc">
Add a description of the image here</div>
</div>
<div class="img">
<a target="_blank" href="klematis4_big.htm">
<img src="a.jpg">
</a>
<div class="desc">
<p>
Add a description of the image here</P>
</div>
</div>
<div class="img">
<a target="_blank" href="klematis_big.htm">
<img src="a.jpg">
</a>
<div class="desc">
Add a description of the image here</div>
</div>
<div class="img">
<a target="_blank" href="klematis2_big.htm">
<img src="a.jpg">
</a>
<div class="desc">
Add a description of the image here</div>
</div>
</div>
</body>
</html>
My CSS Code:
#d
{
width : 660;
border:1px;
}
.img
{
margin:3px;
border:1px solid #0000ff;
height:200;
width:200;
float:left;
text-align:center;
}
.img img
{
display:inline;
margin:3px;
border:1px solid #ffffff;
width:100;
height : auto;
}
.img a:hover img
{
border:2px solid #0000ff;
}
.desc
{
text-align:center;
font-weight:normal;
width:120px;
margin:2px;
}
Screenshot:
Remove the width of the div.
And also change it to text-align. The attribute align does not exist.