时间戳

首页 > 解决方案 > react 图标组件不在 li 中居中

html - react 图标组件不在 li 中居中

问题描述

https://i.stack.imgur.com/MOyFn.png 我正在使用 react-icons 创建博客文章，但图标组件不在 li 项中居中。我不知道我在css中犯的错误在哪里。任何建议将不胜感激。

import React from 'react';
import './Blog.css';

import { IoLogoFacebook, IoLogoTwitter, IoLogoInstagram, IoLogoYoutube } from "react-icons/io";

const Blog = () => {
return (
<div className="blog-card">
  <div className="meta">
    <div className="photo"></div>
      <ul className="details">
        <li className="author"><a href="#">John Doe</a></li>
        <li className="date">
           <IoLogoFacebook />
              Aug. 24, 2020
        </li>
      </ul>
    </div>
 </div>
</div>
)

这是CSS

.blog-card .details,
.blog-card .details ul {
  margin: auto;
  padding: 0;
  list-style: none;
}

.blog-card .details {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -100%;
  margin: auto;
  transition: left 0.2s;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  padding: 10px;
  width: 100%;
  font-size: 0.9rem;
}

.blog-card .details ul li {
  display: inline-block;
}

标签： htmlcssreactjs

解决方案

尝试将其添加到您的日期类样式中

.date {
  display: flex; 
  align-items: center; 
}

我已经在@Maniraj 的沙箱上对其进行了测试：解决方案

推荐阅读