首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >将React-Grid-Gallery ReactJS库居中

将React-Grid-Gallery ReactJS库居中
EN

Stack Overflow用户
提问于 2018-12-11 08:23:36
回答 1查看 470关注 0票数 0

我已经开始使用react-grid-gallery了,它看起来非常适合我所需要的东西。我对它唯一的问题是,我似乎不知道如何真正地将它居中。下面是它在屏幕上的显示方式:

我似乎不能调整画廊的边距,也不能使它居中。

代码语言:javascript
复制
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>
        );
    }
}
EN

回答 1

Stack Overflow用户

发布于 2018-12-11 08:30:03

<center>已弃用-请使用css。以下是在视口中水平移动的标准方法:

代码语言:javascript
复制
Gallery { margin: 0 auto;}

有一件事我不太确定,那就是你使用的是一个元素--这应该是一个带有"gallery“类的div吗?

或者将其放在具有居中样式的div中

代码语言:javascript
复制
<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;
}
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/53715685

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档