Question

我已经开始使用react-grid-gallery，它似乎非常适合我的需要。我唯一的问题是我似乎无法弄清楚如何将其居中。以下是它在屏幕上的显示方式：

我似乎根本无法调整画廊的边缘或将其居中。

class Testimonials extends React.Component {
    render() {
        return (
            <div>
                <h2>See what people are saying...</h2>
                <body className="testimonial-body">
                    <p>"Dependable, trustworthy, and expert workmanship all 
                       describe Kevin and his business.  
                       He completely transformed our condo, painting it from top to 
                       bottom, among other projects.
                       Not only does he do excellent work, but he's a 
                       pleasure to have in your home. For any future projects, 
                       there's no one we'd rather have than Kevin." 
                       <span class="testimonial-signature"> - Doug and Sue &sdot; Brookfield, WI</span>
                    </p>
                </body>
                <center><Gallery images={doug_and_sue_images}/></center>
            </div>
        );
    }
}

Answer 1

<center>已过时-使用CSS。以下是在视口中水平倾斜的标准方法-

Gallery { margin: 0 auto;}

我不确定您是否正在使用元素-这应该是具有“图库”类的div吗？

或将其放在样式居中的div中

<div class="gallery-wrapper">
   <Gallery images={doug_and_sue_images}/>
</div>

// css
.gallery-wrapper {
  text-align: center;
}
.gallery-wrapper Gallery {
  max-width: 80%; // or whatever you want
  margin: 0 auto;
}

居中React-Grid-Gallery ReactJS库

1 个答案: