项目符号点垂直对齐答案

【问题标题】：Bullet point vertical alignment项目符号点垂直对齐
【发布时间】：2017-05-28 19:08:05
【问题描述】：

如何将项目符号点与此代码中的文本垂直对齐？我找不到 CSS 属性：

网址：https://scienceofhappyrelationships.com/mistake-10-neglecting-your-appearance/

感谢

【问题讨论】：

【解决方案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;
}

因为旋转会提高项目符号点，所以需要将变换的中心设置为项目符号点的中间，这样旋转不会改变高度，所以需要添加

transform-origin: -50%;

希望这会有所帮助！

【讨论】：

谢谢！以及如何将项目符号与文本垂直对齐？项目符号位于文本的垂直中线上方。
对于一个快速肮脏的方式，你可以添加一个 translateY 变换以使其更加对齐，即transform: translateY(7px) rotate(45deg);
看我的编辑，非快速和肮脏的方法是设置transform-origin: -50%;希望你能让我的答案成为接受的答案。
好的，我将您的答案设为已接受的答案。再次感谢您！