设置<ul>中圆点和文本的相对位置

我在网上做html和css习题 要求文本在框子里面居中 圆点处在

元素的下端。

但是。。。。。。我制作的ul效果如下图。

代码是这么写的：

div.advertisement ul li a{ display: block; color: rgb(211,83,59); font-size: 20px; text-decoration: none; vertical-align: middle; } div.advertisement ul li { font-size:4px; text-align: center; border: 1px solid rgb(211,83,59); background-color: rgb(241,241,241); margin-top:3px; height: 34px; line-height:46px; }

我的想法是在ul中加入line-height属性调整圆点和文本的整体高度，然后再在li中设置line-height属性单纯调整文本的高度，可是我在li中进行了设置之后圆点也跟着跑了.
我也曾经尝试过在li中加入line-height属性调整圆点和文本的整体高度，在a中加入line-height属性调整文本的高度，可是在a进行了line-height属性设置之后圆点的位置还是发生了变化。
大家有没有什么好的方法去实现题目中的效果？

试试 vertical-align: text-bottom; 好用不

简单一点的话，直接用list-style:none把li的样式去掉,然后给li设置伪类before,，然后自己画一个点，就行啦~

问题已经解决了 采取的做法是在广告对应的div中再加入一个无序列表，无序列表不插入任何东西，就留下来个圆点。调整这个无序列表的定位让它与广告栏的无序列表充齐，然后通过调整圆点的line-height（字体高度）属性从而调整它的位置。

我看懂了你的代码，也看懂了你的意思，原因在于你的思维还没有清晰，没事，多练习，多巩固，一点一点累积，我改了一下你的css代码，希望能帮助到你。

 <style>
        div.advertisement ul li a {
            display: block;
            color: rgb(211, 83, 59);
            font-size: 20px;
            text-decoration: none;
            vertical-align: middle;
            line-height: 46px;
        }

        div.advertisement ul li {
            text-align: center;
            border: 1px solid rgb(211, 83, 59);
            background-color: rgb(241, 241, 241);
        }
    </style>