javascript - 对齐在页脚的反应中不起作用
问题描述
我正在尝试正确获取页脚,但我无法获得结果,我希望
这是我期望的:
以下是我所拥有的:
版权文本在右侧某处丢失。你看不到它,因为背景是白色的。
这是代码:
import React, {} from 'react';
import {Form, InputGroup} from 'react-bootstrap';
import { Navbar } from 'react-bootstrap';
import TextContents from '../assets/translations/TextContents';
import WhiteButton from './materialdesign/WhiteButton';
import SiteLogo from '../assets/images/village-logo.svg';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faFacebook, faTwitter, faLinkedinIn, faInstagram } from '@fortawesome/free-brands-svg-icons'
import './Footer.css';
class Footer extends React.Component {
constructor(props, context) {
super(props);
this.state = {showLogin: false};
}
render() {
return (
<div>
<div className="container">
<Navbar className="navbar" width="100" expand="lg">
<div className="footer-menu">
<div>
<Navbar.Brand href="/">
<img
src= { SiteLogo }
className="logo"
alt="Village"
/>
</Navbar.Brand>
</div>
<div className="subscribe">
<InputGroup className="subscribe-form">
<Form.Control
type="email"
placeholder={TextContents.EmailSubscribe}
className="subscribe-form-control"
/>
</InputGroup>
</div>
<div className="follow-container">
<WhiteButton textSize="14" link_href="#" text={TextContents.Join} />
<p className="follow-text"> {TextContents.Follow} </p>
<FontAwesomeIcon icon={faFacebook} className="follow-icon"/>
<FontAwesomeIcon icon={faTwitter} className="follow-icon"/>
<FontAwesomeIcon icon={faInstagram} className="follow-icon"/>
<FontAwesomeIcon icon={faLinkedinIn} className="follow-icon"/>
</div>
</div>
</Navbar>
</div>
<div>
<p className="copyright-text">{TextContents.Copyright}</p>
</div>
</div>);
}
}
export default Footer;
和CSS
.navbar{
background-color: white;
width: 80%;
margin-top: 2%;
margin-bottom: 2%;
font-family: "Fredoka One";
font-size: 18px;
margin: auto;
}
.logo {
width: 214px;
height: 28px;
margin-right: 24;/*theme.spacing(3)*/
}
.container{
display: flex;
box-shadow: none;
background-color: #ffffff;
/*margin-top: 24; /*theme.spacing(3),*/
position: absolute;
bottom: 0;
width: 80%;
height: 2.5rem;
}
.footer-menu {
display: flex;
position: relative;
}
.subscribe {
display: flex;
position: relative;
border-radius: 21px;
background-color: #f4f7f8;
margin-right: 16; /*theme.spacing(2),*/
margin-left: 24; /*theme.spacing(3),*/
width: 467px;
height: 40px;
}
.follow-container {
text-align: center;
align-items: center;
justify-content: center;
margin-left: 16px;/*theme.spacing(2),*/
min-width: 300px;
}
.follow-text {
display: inline-block;
font-size: 14px;
font-weight: bold;
color: #ff7255;
font-family: Source Sans Pro;
min-width: 75px;
margin-left: 20px;
margin-right: 5px;
}
.follow-icon {
width: 18px;
height: 18px;
margin-right: 2px;
margin-left: 2px;
color: #ff7255;
}
.copyright-text {
font-size: 14px;
font-weight: bold;
text-align: center;
color: #ffff7255;
font-family: Source Sans Pro;
}
.subscribe-form {
width: 470px;
height: 40px;
border-radius: 20px;
margin-left: 60px;
}
.subscribe-form-control {
font-family: Source Sans Pro;
text-align: left;
color: #cdcece;
background-color: #f4f7f8;
border-style: none;
}
任何想法如何正确居中并确保我有 2 行。谢谢
解决方案
版权文本在右侧某处丢失。你看不到它,因为背景是白色的
是因为.container
有position: absolute
您可以放入copyright div
容器内(并应用必要的更改使其显示在下方.navbar
)或摆脱position: absolute
任何想法如何正确居中并确保我有 2 行。
当您使用display: flex
时,有两个属性允许您以垂直/水平方式对齐东西justify-content
, (尽管align-items
它们取决于)flex-direction
推荐阅读
- javascript - 当应用程序终止时,EXPO BackgoroundFecth 对 android 应用程序的依赖是否仍将在后台工作?
- javascript - Mongodb位置运算符不起作用
- javascript - _firebase_config__WEBPACK_IMPORTED_MODULE_3__.default.createUserWithEmailAndPassword 不是 Vue Js 中的函数
- jenkins - 在同一个执行器上运行下游作业?
- onchange - 当我们将 tfield 重置为 oldvalue 时,不会触发 tfield.onchange
- ruby - 为什么 Ruby Gems 代码有某些文件只需要同名的文件,但唯一的区别是它们有蛇盒?
- android - 文字转语音在模拟器上不起作用吗?
- google-chrome - chrome.identity.getAuthToken 需要用户重新授权,即使用户已经授予我的应用程序权限
- java - 数组中的多数元素 (n/3)
- python - 通过使用替换/正则表达式,用忽略的单词列表替换文本