Question

给出以下简单页面，其中显示了无序列表：

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>Day Picker</title>    
    <style>
        *          { margin: 0; }
        html, body { height: 100%; }

        .unordered-list
        {
            height:          100%;
            margin:          0 auto;
            width:           75%;
            text-align:      center;
            list-style-type: none;
        }
        .unordered-list li
        {       
            background: red;        
            float:      left;
            height:     33%;
        }
    </style>    
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function()
        {
            function initializeUnorderedList(unorderedList)
            {
                // initialize layout
                var items = unorderedList.querySelectorAll("li");

                var blockIndices = [];              
                $(items).each(function(index, element)
                {
                    if ($(element).hasClass("block"))
                        blockIndices.push(index);
                });

                blockIndices.push(items.length);
                for (var i = 0, j = 0; i < blockIndices.length - 1; ++i)
                {
                    var width = 100 / (blockIndices[i + 1] - blockIndices[i]);
                    do {
                        $(items.item(j)).css("width", width + "%");
                    } while (++j < blockIndices[i + 1]);
                }
            }

            var unorderedLists = document.querySelectorAll(".unordered-list");
            for (var i = 0; i < unorderedLists.length; ++i)
                initializeUnorderedList(unorderedLists.item(i));
        });
    </script>
</head>
<body>
    <ul class="unordered-list">
        <li class="block">first row, first column</li>

        <li class="block">second row, first column</li>
        <li>second row, second column</li>

        <li class="block">third row, first column</li>
        <li>third row, second column</li>
        <li>third row, third column</li>
        <li>third row, fourth column</li>
        <li>third row, fifth column</li>
        <li>third row, sixth column</li>
        <li>third row, seventh column</li>
    </ul>
</body>
</html>

<li>元素内的文本应居中（垂直和水平）。

修改修复坏标记

Answer 1

它显示在以下示例的中心位置：

<强> Working Example

虽然取决于您的浏览器和标记的有效性，它可能无效，但通常HTML不喜欢<div>中的<ul>元素。

建议的解决方案：

使用指针指向您要指定的行，例如“1”，“2”和“3”，让Javascript / jQuery处理您的宽度情况。

<强> HTML：

<ul class="unordered-list">
            <li class='1'>first row, first column</li>
            <li class='2'>second row, first column</li>
            <li class='2'>second row, second column</li>
            <li class='3'>third row, first column</li>
            <li class='3'>third row, second column</li>
            <li class='3'>third row, third column</li>
            <li class='3'>third row, fourth column</li>
            <li class='3'>third row, fifth column</li>
            <li class='3'>third row, sixth column</li>
            <li class='3'>third row, seventh column</li>
</ul>

<强> jQuery的：

//This will group each of your classes and apply the %-based width.
$('.1,.2,.3').each(function(){
    var width = Math.floor(100/($('.' + $(this).attr('class')).length));
    $(this).css('width',width + '%');
});

<强> Prosposed Solution Example

jQuery（尝试垂直居中）：

$('.1,.2,.3').each(function(){
    var width = Math.floor(100/($('.' + $(this).attr('class')).length));
    var height = $(this).height() / 2;
    $(this).css('width',width + '%')
    .css('margin-top',height + 'px')
    .css('height',($(this).height() - height) + 'px');
});

<强> Try out the Vertical-Centered Example

为什么文本未在列表项中对齐？

1 个答案: