Question

我试图将图像对齐在页面中间，但它没有做到这一点。目前，它位于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处于中间位置，我应该添加/编辑什么？

Answer 1

尝试做

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

.container {
   width: 100%;
}

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

Answer 2

如果您的徽标具有设定的宽度和高度，您可能只需要

#logo{
    margin: 0 auto;
}

前提是您的图片包含整个徽标容器。如果您的图片尺寸小于#logo div，则只需添加

即可

#logo{
    text-align: center;
}

将其内容水平居中。

Answer 3

#logo {
  text-align: center;
}

将图像对齐在中间

3 个答案: