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

Posted 2023-02-25

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

【英文标题】：styling a caption to the center of a slider in react

【发布时间】：2021-04-03 10:37:41

【问题描述】：

我正在尝试将标题文本居中到我使用 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;

【参考方案1】：

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

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