#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2013
    Posts
    5
    Rep Power
    0

    Vertical-Center a list in CSS


    Please advise:

    I am haveing trouble Vertically centering a list with bullets
    Below is what i have in CSS I have used Text-align: Center; and this does not work to center it

    In CSS For the UL:
    ul { list-style-image: url('bullet.gif'); }
    ul { Line-height: 1.5; }

    This is what is listed in the HTML
    <ul>
    <li>Certified Teachers</li>
    <li>Noise-free Learning Atmosphere</li>
    <li>Proven Teaching Methods</li>
    <li>100% Satisfaction Guaranteed</li>
    </ul>
  2. #2
  3. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,124
    Rep Power
    4303
    Welcome to DevShed Forums, NCCSTUDENT.

    What are you trying to vertical align your list in relation to?

    The "text-align" property is for horizontal alignment for text and inline elements (as opposed to block elements).
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2013
    Posts
    5
    Rep Power
    0
    Originally Posted by Kravvitz
    Welcome to DevShed Forums, NCCSTUDENT.

    What are you trying to vertical align your list in relation to?

    The "text-align" property is for horizontal alignment for text and inline elements (as opposed to block elements).
    thank you Kravvitz! ... I'm trying to align it to a heading of the page i've been using Vertical-align: Center; property andi t's not working.
  6. #4
  7. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,124
    Rep Power
    4303
    The vertical-align property only applies to table-cells and inline elements. A list is neither. Also it uses "middle" as a value, not "center".

    It seems we need to see more of your code, so please post your HTML and CSS. When posting code, please place it between [code][/code] tags.
    If you want to use the button to add the tags, paste the code in the textarea and then select it before clicking the button (so you don't get the problematic JavaScript prompt dialog).
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  8. #5
  9. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2013
    Posts
    5
    Rep Power
    0
    Originally Posted by Kravvitz
    The vertical-align property only applies to table-cells and inline elements. A list is neither. Also it uses "middle" as a value, not "center".

    It seems we need to see more of your code, so please post your HTML and CSS. When posting code, please place it between
    If you want to use the button to add the tags, paste the code in the textarea and then select it before clicking the button (so you don't get the problematic JavaScript prompt dialog).
    Hi Kravvitz thank you agian for your help below is the HTML and the CSS codes for the list

    HTML CODE [
    <h3>Count On Us For:</h3>
    <ul>
    <li>Certified Teachers</li>
    <li>Noise-free Learning Atmosphere</li>
    <li>Proven Teaching Methods</li>
    <li>100% Satisfaction Guaranteed</li>
    </ul> ]

    CSS CODE [
    Ul { list-style-image: url('bullet.gif'); }
    ul { Line-height: 1.5; }
    ul { Vertical-align: center;} ]
  10. #6
  11. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,124
    Rep Power
    4303
    Do you want them to be next to each other with the heading vertically aligned to the middle of the list?

    I recommend you read this: Grouping and Nesting
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  12. #7
  13. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2013
    Posts
    5
    Rep Power
    0
    Originally Posted by Kravvitz
    Do you want them to be next to each other with the heading vertically aligned to the middle of the list?

    I recommend you read this: /]Grouping and Nesting[/url]
    Thank you KRAVVITZ this site was helpful

IMN logo majestic logo threadwatch logo seochat tools logo