当前位置: 首页 > 面试题库 >

如何在

袁志专
2023-03-14
问题内容

我有一个水平线<ul>,我需要将每个<li>垂直线居中。我的标记如下。每个<li>都有一个边框,我需要物品及其内容垂直位于中间。请帮忙;
我是CSS新手。

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        .toolbar li
        {
            border: solid 1px black;
            display: block;
            float: left;
            height: 100px;
            list-style-type: none;
            margin: 10px;
            vertical-align: middle;
        }
        .toolbar li.button
        {
            height: 50px;
        }
    </style>
</head>
<body>
    <div class="toolbar">
        <ul>
            <li><a href="#">first item<br />
                first item<br />
                first item</a></li>
            <li><a href="#">second item</a></li>
            <li><a href="#">last item</a></li>
            <li class="button"><a href="#">button<br />
                button</a></li>
        </ul>
    </div>
</body>
</html>

问题答案:

我假设由于您使用的是XML声明,因此您不必担心IE或较旧的浏览器。

所以,你可以使用display:table-celldisplay:table-row像这样:

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        .toolbar ul {
            display:table-row;
        }
        .toolbar ul li
        {
            display: table-cell;
            height: 100px;
            list-style-type: none;
            margin: 10px;
            vertical-align: middle;
        }
        .toolbar ul li a {
            display:table-cell;
            vertical-align: middle;
            height:100px;
            border: solid 1px black;
        }
        .toolbar ul li.button a {
            height:50px;
            border: solid 1px black;
        }
    </style>
</head>
<body>
    <div class="toolbar">
        <ul>
            <li><a href="#">first item<br />
                first item<br />
                first item</a></li>
            <li><a href="#">second item</a></li>
            <li><a href="#">last item</a></li>
            <li class="button"><a href="#">button<br />
                button</a></li>
        </ul>
    </div>
</body>
</html>


 类似资料:
  • 我在做一个宠物项目(一种游戏)。我遇到了一个问题:当从控制台用命令调用应用程序时: 播放短的声音,但不播放长的声音。所有声音都在JAR中的“/资产”文件夹中。 音频的路径如下所示: 例如射击或跳跃。对于长音频数据,仅播放前 0.5 秒。 例如:如果您加载长度为0.834秒的声音,那么它会循环(背景音乐),声音将循环播放!(WAV 文件,0.843 秒,48 KB)。但是,如果加载 WAV 文件 2

  • 问题内容: 我有下表: 如果给定的ID不存在,我想插入具有默认Val的ID。但是,如果它已经存在,我想增加Val的值。 我有以下代码: 并且它可以工作,但是我想用一个SQL语句来完成。我可以吗? 编辑 : 从@ Xikinho90的答案,我的最终代码是 问题答案: 您可以使用插入或替换。 我认为这可以解决问题 您只需要用输入的ID替换数字 谢谢奇科

  • 我在为android版本添加提升时遇到一些问题 例如:如果我想根据材质设计为抽屉布局添加立面,我应该怎么做?

  • 我在这里看到了下面的代码。描述说: 我们还可以使用自动 我确实理解汽车的衰退

  • 问题内容: 我还不能弄清楚如何在Swift中获取a的子字符串: 我无法在Swift中创建范围。在Playground中自动完成并不是超级有帮助-这说明: 我在Swift标准参考库中找不到任何有帮助的东西。这是另一个疯狂的猜测: 还有这个: 我看过其他答案(在SwiftString中查找字符的索引),似乎暗示着由于是的桥类型,因此“旧”方法应该起作用,但尚不清楚如何- 例如,这也不起作用(似乎不是有

  • 在Perl中,使用Moo,可以围绕sub实现sub,它将围绕类中的其他方法。 如何在Raku中实现这种行为,最好使用角色?