文章/答案/技术大牛

发布

问对齐中间的图像
EN

Stack Overflow用户

提问于 2017-08-14 16:10:39

回答 3查看 61关注 0票数 0

我试着在页面中间对齐图像，但是它做不到这一点。目前，它位于container的最左边。React的呈现代码：

return (
            <div>
                <div className="container">
                    <div id="logo">
                        <img src={require('../../images/vidn_logo.png')} />
                    </div>
                    {heading}
                    <form className="form-signin" onSubmit={this.formSubmit}>
                        <input onChange={this.setEmail} type="email" className="form-control"
                               autoComplete="email" placeholder="Email" required></input>
                        <input onChange={this.setPass} type="password" className="form-control"
                               autoComplete="new-password" placeholder="Password" required></input>
                        <button className="btn btn-lg btn-primary btn-block"
                                type="submit" style={{marginTop: '20px'}}>Log In</button>
                    </form>
                </div>
                <Footer />
            </div>
        )

CSS:

.container {
        width: auto;
        padding: 60px 0 100px;
    }
#logo {
        margin-bottom: 50px;
        height: 30px;
    }

为了使img处于中间位置，我应该添加/编辑什么？

css

reactjs

回答 3

Stack Overflow用户

发布于 2017-08-14 16:12:26

试着做

<div className="logo-wrapper"><div id="logo>...</div></div>

.container {
   width: 100%;
}

.logo-wrapper {
    display: flex;
    justify-content: center;
    width: 100%;
}

票数 1

Stack Overflow用户

发布于 2017-08-14 17:04:52

如果您的徽标有固定的宽度和高度，您可以直接这样做。

#logo{
    margin: 0 auto;
}

如果您的图像包含整个徽标容器。如果图像的大小小于#徽标div，则只需添加

#logo{
    text-align: center;
}

使其内容水平地居中。

票数 1

Stack Overflow用户

发布于 2017-08-14 16:56:56

#logo {
  text-align: center;
}

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/45678674

复制

相似问题

问对齐中间的图像
EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问对齐中间的图像EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问对齐中间的图像
EN