Home >Web Front-end >HTML Tutorial >How to center the div in this case?_html/css_WEB-ITnose
How to center the div in this case?_html/css_WEB-ITnose
- WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOriginal
- 2016-06-24 12:10:421243browse
My page is roughly:
d8fceec1d2a62bc6b0ff36b9139ac3bf
e7bca01a38feec1cdb0daa11065754f7
A while code
6b3d0130bba23ae47fe2b8e8cddf0195
< ;/ul>
In short, the actual page tags generated are roughly:
d8fceec1d2a62bc6b0ff36b9139ac3bf
3485dd5d07d396d8723d5e25f27e946f
25edfb22a4f469ecb59f1190150159c6...bed06894275b65c1ab86501b08a632eb
25edfb22a4f469ecb59f1190150159c6...bed06894275b65c1ab86501b08a632eb
25edfb22a4f469ecb59f1190150159c6...bed06894275b65c1ab86501b08a632eb
950c0e09a208ea6a6c67c615a801fbc6
3485dd5d07d396d8723d5e25f27e946f
25edfb22a4f469ecb59f1190150159c6...bed06894275b65c1ab86501b08a632eb
25edfb22a4f469ecb59f1190150159c6...bed06894275b65c1ab86501b08a632eb
25edfb22a4f469ecb59f1190150159c6...bed06894275b65c1ab86501b08a632eb
16b28748ea4df4d9c2150843fecfba68
...
929d1f5ca49e04fdcb27f9465b944689
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>
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 25edfb22a4f469ecb59f1190150159c6 inside and set margin:auto