Question

我不是网页设计师，但我创建了一个网站，而且我遇到了一些非常容易的事情。无论屏幕大小如何，我如何将所有内容对齐到中心。在这种情况下，在Scroll组件中，我返回一个Post组件，它返回一个react-bootstrap缩略图，我想在Scroll组件中对齐中心（想象一下将bootstrap卡对齐到中心）。任何帮助都将非常感谢。

//发布组件

<Thumbnail className = "post">
<img src="https://robohash.org/abc"></img>
<h3>facemash user</h3>
<div>
    <ButtonGroup>
        <Button bsStyle = 'success' bsSize="small">
            <Glyphicon glyph="thumbs-up" /> Clap
        </Button>
        <Button bsStyle = 'info' bsSize="small">
            <Glyphicon glyph="edit" /> Comment
        </Button>
        <Button bsStyle = 'danger' bsSize="small">
            <Glyphicon glyph="share" /> Share
        </Button>
    </ButtonGroup>
</div>
</Thumbnail>

//滚动组件

<div className = "scroll">
    {props.children}
</div>

//主要组件

    <Scroll> 
        <Post/> // these should centre align
        <Post/>
        <Post/>
    </Scroll>

//所有CSS样式

/*Main*/

.Main{
    min-height: 98%;
    text-align: center;
}

/*Scroll Component*/

.scroll{
    /*background: linear-gradient(to right, yellow, lime);*/
    min-height: 100%;
    font-size: 24px;
    overflow-y:scroll;
    text-align: center;
    border:4px solid  pink;
}

/*Post*/

.post{
    justify-content: center;
    text-align: center;
    min-width: 320px;
    max-width: 400px;
}

Answer 1

如果你使用flex-box，你应该在parrent容器中设置一些样式来对齐儿童中心：

.scroll{
 /*background: linear-gradient(to right, yellow, lime);*/
 min-height: 100%;
 font-size: 24px;
 overflow-y:scroll;
 text-align: center;
 border:4px solid  pink;
 width: 100%;
 display: flex;
 flex-direction: column;
 justify-content: center;
 align-items: center;
 align-content: center;
 text-align: center;
}

将所有内容对齐到中心

1 个答案: