align price into centrally

Posted on 2011-05-08
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
    LVL 13

    Expert Comment

    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

    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

    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

    Thanks for the line height worked perfectly.

    Featured Post

    Highfive Gives IT Their Time Back

    Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

    Join & Write a Comment

    When applying CSS to your HTML, there are many different ways to select which element(s) the CSS applies to.  Some of these selectors are more commonly known and used than others - Here are the more common ones: #X - Matches an ID of X .X - Matche…
    Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
    In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…
    In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…

    754 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

    Need Help in Real-Time?

    Connect with top rated Experts

    20 Experts available now in Live!

    Get 1:1 Help Now