项目符号垂直对齐

Question

如何在这段代码中垂直对齐项目符号点和文本？我找不到 CSS 属性:

URL: https://scienceofhappyrelationships.com/mistake-10-neglecting-your-appearance/

谢谢

Answer 1

他们通过在 <li> 之前添加一个伪对象来实现项目符号点，该伪对象的样式和位置与 css 下面的

.cnt article ul li:before {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    content: '\f04d';
    color: #408c52;
    display: inline-block;
    font-family: FontAwesome;
    line-height: 3em;
    font-size: 5px;
    padding-right: 10px;
}

因为rotate会升高bullet point所以需要将transofmation的中心设置在bullet point的中间这样rotate不会改变高度所以你需要添加

transform-origin: -50%;

希望对您有所帮助！

项目符号垂直对齐

Bullet point vertical alignment

css

bulletedlist