How to center the div in this case?_html/css_WEB-ITnose

WBOY
Release: 2016-06-24 12:10:42
Original
1175 people have browsed it

My page is roughly:



    A while code

    < ;/ul>

    In short, the actual page tags generated are roughly:


    • ...

    • ...

    • ...

    • < /div>

    • ...

    • ...

    • ...


    • ...


    My current problem is with these divs How should I set the style so that it is centered in the entire ul?? I tried setting it to margin: 0 auto, but it didn’t work. The reason why I must use the centered style is because I want to use it in all sizes. It can be displayed in the center on the screen, otherwise just by adjusting the spacing of elements, the screen size will go off track

    Please help~~~~


    Reply to discussion (solution)

    Nested div elements under ul do not comply with XHTML specifications. ul is a block-level element. After setting a fixed width value, it can be centered through the margin:0 auto; style. If you also need to "group" list items to set different styles, you can do this by adding different style classes, such as:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title></head><body><style type="text/css">ul { margin:0 auto; width:200px; }li.listGroup1 { color:red; }</style><ul>  <li class="listGroup1">1</li>  <li class="listGroup1">2</li>  <li class="listGroup2">3</li></ul></body></html>
    Copy after login



    Set the ul inside Style: text-align:center can also see the effect. . . .

    But text-align seems to only work on text

    In the end, the problem was solved. I requested four columns in one row, so I created four divs in each row and set the widths to 25%. , then put

  • inside and set margin:auto

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template