Geek Answers Handbook

Center text with css

I used the following code for a simple image gallery (the actual code found at http://w3schools.com , it works great). After css editing, the text change was changed. I want to align the text in the center. Does anyone know the answer, please help me.

My HTML is:

<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 is:

 #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: enter image description here

+4
source share
4 answers

Remove the width of the div.

 .desc { text-align: center; font-weight: normal; margin: 2px; }

And also change it to text-align . Attribute alignment does not exist.

+4
source

Try the following:

 .desc{ margin: 0 auto; }
+2
source

you need to change the value of the margin property:

 .desc { text-align:center; font-weight:normal; width:120px; margin:2px auto; }

this part also lacks a hash sign:

 <style> d { width : 660; border:1px; }

it needs to be changed as follows:

 <style> #d { width : 660; border:1px; }
+2
source

Change css to

 .desc { text-align:center; font-weight:normal; width:120px; margin:2px; }

change align:center; on text-align:center;

+1
source

More articles:


All Articles