How do I center this text with css?

Posted on 2011-10-06
Last Modified: 2012-05-12
I have this bit of text:

<td class="component text label readonly "><label id="LABELID_VAR10" class="hidden" for="VAR10"></label></td><td class="control left">
<p id="VAR10"><font size="2">Please select the <b>Building</b> and enter the <b>Office</b> and <b>Phone Extension</b> for each person below.</font></p>
<label class="hidden" for="VAR10"></label><input name="VAR10" value="&lt;font size=&quot;2&quot;&gt;Please select the &lt;b&gt;Building&lt;/b&gt; and enter the &lt;b&gt;Office&lt;/b&gt; and &lt;b&gt;Phone Extension&lt;/b&gt; for each person below.&lt;/font&gt;" type="hidden">
I need to center the "Please select the..: section
That I need to center on the page.

Any help would be most appreciated
Question by:Donnie Walker
    LVL 30

    Expert Comment

    We need to see the rest of the table and any CSS accompanying. If the page is very large or complex, a live URL would be best.
    LVL 41

    Expert Comment

    Center what  ... the table?, the column?, the paragraph?, the input?

    Author Comment

    by:Donnie Walker
    I need to center this:

    <td class="control left">
    <p id="VAR10"><font size="2">Please select the <b>Building</b> and enter the <b>Office</b> and <b>Phone Extension</b> for each person below.</font></p>

    No live url. This is on an intranet.
    LVL 30

    Expert Comment

    You have 2 ways to do it depending on your situation:
    1) give your <div> an id or class and then give it a width and margin:0 auto in  your CSS.
    2) You could use align="center" on the td, however I would stay away from that since it's depreciated and not proper coding practice.

    If your trying to center the text in the p#VAR10, then use text-align:center; in your CSS for that element.

    There are 2 ways to center things in CSS:
    1) Block level elements like divs, h tags, etc can be given a width and use margin:0 auto.
    2)Text-align:center can be used for inline elements such as p, a and span tags.
    LVL 13

    Accepted Solution

    so add this to your css  #VAR10 { text-align:center}

    Author Closing Comment

    by:Donnie Walker

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    Training Course: Adobe Photoshop CC 2015

    Photoshop has become the standard in image manipulation among professional photographers and graphic designers. This course covers exam objectives for the Adobe Certified Associate (ACA) certification.

    Unordered lists (HTML ul tags) are very handy to create menus of all types, shapes and sizes.  All it takes is a little knowledge of CSS and the possibilities are endless. First off, you should know the general format for menus created using the …
    This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
    In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
    In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …

    759 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

    10 Experts available now in Live!

    Get 1:1 Help Now