Solved

Centering captions with css

Posted on 2014-03-25
2
245 Views
Last Modified: 2014-03-25
Hello,
I'm creating a photo gallery here http://www.paulb.com/1-gallery.htm and I'm trying to center the captions under the pics. I've tried setting the margins to auto, adding padding and margins, but I can't get them to move at all, let alone centered.
 I also have the attached gallery.css file that's attached to the page, but I don't thing it affects what I'm trying to do here.
Thanks,
Paul

This is the code I'm using on this page only:


<style type="text/css">
#gallery #thumbs tr td a img {
            text-decoration: none;
      border-top-width: 0px;
      border-right-width: 0px;
      border-bottom-width: 0px;
      border-left-width: 0px;
      border-top-style: 0;
      border-right-style: 0;
      border-bottom-style: 0;
      border-left-style: 0;
      margin-bottom: 10px;
      /*text-align: left;*/
      margin-left: 10px;
      }
#gallery #thumbs tr td h3 a {
      font-size: 12px;
      color: #33cc00;
      text-align: center;
      text-decoration: none;
      font-family: AndikaBasicRegular;
      padding-left: 25px;
      margin-left: 25px;
}
</style>
gallery.css
0
Comment
Question by:paulbsb
2 Comments
 
LVL 8

Accepted Solution

by:
soupBoy earned 500 total points
ID: 39954536
Try adding:
text-align: center;
display: block;

to your anchor (a):

#thumbs tr td h3 a {
      font-size: 12px;
      color: #33cc00;
      text-align: center;
      text-decoration: none;
      font-family: AndikaBasicRegular;
      padding-left: 25px;
      margin-left: 25px;
      text-align: center;
      display: block;
}
0
 

Author Closing Comment

by:paulbsb
ID: 39954577
It works. I had tried the text align: center; but not the display:block;
Thanks!
0

Featured Post

Gigs: Get Your Project Delivered by an Expert

Select from freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely and get projects done right.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

What is Node.js? Node.js is a server side scripting language much like PHP or ASP but is used to implement the complete package of HTTP webserver and application framework. The difference is that Node.js’s execution engine is asynchronous and event…
Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
The viewer will learn how to count occurrences of each item in an array.

776 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question