Javascript 如何获得引导卡停留在屏幕的中间 我试图让我的卡留在屏幕中央,但是它不起作用。我使用对齐项目和对齐内容。 我看过不同的网站
//Login.jsJavascript 如何获得引导卡停留在屏幕的中间 我试图让我的卡留在屏幕中央,但是它不起作用。我使用对齐项目和对齐内容。 我看过不同的网站,javascript,css,reactjs,twitter-bootstrap,web,Javascript,Css,Reactjs,Twitter Bootstrap,Web,//Login.js import React, { Component } from 'react'; import './App.css'; class Login extends Component { render() { return ( <div className="App"> <div className="card cardalign w-50"> <div className="car
import React, { Component } from 'react';
import './App.css';
class Login extends Component {
render() {
return (
<div className="App">
<div className="card cardalign w-50">
<div className="card-body">
<img className="logo" src="https://cdn.macrumors.com/article-new/2018/05/apple-music-note-800x420.jpg"/>
<h1 className="signintext">MusicFlo Signin</h1>
<form className="logininputs">
<input className="emailinput" placeholder="Email"/>
<input className="passwordinput" placeholder="Password"/>
<button className="btn btn-primary btn-md m-2">Log In</button>
</form>
</div>
</div>
</div>
);
}
}
export default Login;
我看了这部纪录片。它仍然没有显示在中心。请看图片。多谢各位
任何信息都很好这些家伙:
align-items: center;
justify-content: center;
仅当与显示:flex一起设置时才能工作
此外,它们只对flex容器的子项起作用,因此我认为将卡片作为flex容器是行不通的(假设需要居中的是卡片)。因此,card
的父项应具有以下设置:
display: flex;
align-items: center;
justify-content: center;
width: 100%; // make sure the parent is full screen
height: 100%; // so that the content will center correctly
将此添加到应用程序css类
margin-left: auto;
margin-right: auto;
它不会显示上传照片时存在的空白。但基本上,它在我的屏幕左上角可能重复的可能重复的或-保证金:0自动;
margin-left: auto;
margin-right: auto;