在反应中将标题设置为滑块的中心

Question

我正在尝试将标题文本居中到我使用 react-slick 在 react 中创建的滑块上，我遇到的问题是，当我使用 CSS 属性 text-align: center in the caption div 时，应用程序需要我的幻灯片的长度作为屏幕的长度，并且仅将标题放在居中的幻灯片中（每张幻灯片占用整个屏幕宽度，然后滑动到下一张），我也不能正确设置 CSS 属性：0px；因为这也会删除所有其他标题，并将第一个滑块的标题设置在下一个 div 中我的滑块末尾。我该如何解决这个问题并设置每个 div 中心相对于其幻灯片的标题？代码如下所示：

import React from 'react';
import Slick from 'react-slick';
import './slider.css';
import { Link } from 'react-router-dom';

const SliderTemplates = (props) => {
    let template = null;
    const settings = {
        dots: true,
        infinite: true,
        arrows: false,
        speed: 500,
        slidesToShow: 1,
        slidesToScroll: 1,
    };
    switch (props.type) {
        case 'featured':
            template = props.data.map((item, i) => {
                return (
                    <div key={i}>
                        <div className="featured_item">
                            <div
                                className="featured_image"
                                style={{
                                    background: `url(../images/articles/${item.image})`,
                                }}></div>
                            <Link to={`/articles/${item.id}`}>
                                <div className="featured_caption">{item.title}</div>
                            </Link>
                        </div>
                    </div>
                );
            });
            break;
        default:
            template = null;
    }
    return <Slick {...settings}>{template}</Slick>;
};

export default SliderTemplates;

CSS代码如下

.featured {
position: relative;
}
.featured_item a {
    position: absolute;
    width: 100%;
    bottom: 0px;
    text-decoration: none;
}
.featured_image {
    height: 500px;
    background-size: cover !important;
    background-repeat: no-repeat;
}

.featured_caption {
    text-align: center;
    color: #eaf205;
    top: 0px;
    padding: 20px;
    font-weight: bold;
    box-sizing: border-box;
    font-size: 20px;
}

Answer 1

我有同样的问题，你可以将这个 CSS 添加到你的组件中，我希望这对你有用！

.slick-slide > div {
    display: grid;
    place-items: center;
}