align price into centrally

Posted on 2011-05-08
Medium Priority
Last Modified: 2012-05-11

This is the page. I have a css problem. I don't know how to align the price centrally into the blue background. Can anyone help?
Question by:sorush
  • 2
  • 2
LVL 13

Expert Comment

ID: 35716870
Well, your first issue is that you have a centered website with no division that is containing the site. This will make doing things like this more tedious.

However, you can do this by changing your #contact and your #contactphone2 divs.

Try this - change the width of your #contact div to 240px from 740px. So the #contact div should look like this:

#contact {
    height: 38px;
    margin: 0 auto;
    width: 240px;

Open in new window

And along with this change your #contactphone2 div to this:

#contactphone2 {
    margin: 0 auto;
    width: 50%;

Open in new window

Here is a screenshot with the above applied.

I don't have any photo editing software on this computer, so I couldn't tell exactly how wide that number is. You might need to change the width of the #contact div if you don't feel it is exactly centered.


Author Comment

ID: 35717006
Thanks for the input, but I was talking about the prices in the service_boxes. I'm not sure if you follow.
text-align: center; works fine but I'm not sure how to do horizontal align.
LVL 13

Accepted Solution

jonahzona earned 2000 total points
ID: 35717028
Got it.

Sorry for the confusion.

You could achieve this using the line-height property, thought it will mess up the ones that have multiple lines.

You can add

line-height: 29px;

Open in new window

to your span.price at line 496.

Like I said, this will not work for a multiple line. See screenshot for comparison. If this will not work I will research different possibilities.


Author Comment

ID: 35717096
Thanks for the line height worked perfectly.

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

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

This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The first step to building an amazing About page is to figure out what you want the page to say about your company. You then must grab the attention of the reader, boast a bit, tell a story and let others brag about you. With a little bit of thought…
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …
Suggested Courses

840 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