我在将元素对齐到页面右侧时遇到问题,因为我确实使用了多种方法,例如 float、flex,但它们都不起作用。为了更容易理解,我附上了图片,以便它可以描述我的意思。我不知道我的代码有什么问题,所以有人可以帮我解决问题吗?感谢您的帮助
Home.js:
import React from 'react';
import "./homeStyle.css";
import { Navbar, NavItem, NavDropdown, MenuItem, Nav, Form, FormControl, Button } from 'react-bootstrap';
import "./components/containers/Menu.css";
import "./homeScript";
import { Widget } from '@typeform/embed-react'
import logo from "./components/img/logo.png";
export default function Home() {
return(
<div>
<div className='App tc f3'>
<Navbar bg='dark' expand='lg'>
<Navbar.Brand href="">
<img src={logo}/>
</Navbar.Brand>
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav">
<Nav className='ml-auto'>
<Nav.Link href="#home"><button type="button">Login</button></Nav.Link>
</Nav>
</Navbar.Collapse>
</Navbar>
</div>
<section id="home">
<div className="inner-width">
<div className="content">
<h1 />
<div className="buttons">
<button>Not Prepare to Part Yet? Click to Learn More</button>
</div>
</div>
</div>
</section>
</div>
)
}
CSS:
*{
margin: 0;
padding:0;
text-decoration: none;
font-family: 'Montserrat', sans-serif;
box-sizing: border-box;
}
#home .inner-width {
display: flex;
align-items: center;
justify-content: right;
height: 100%;
text-align: center;
}
#home .content {
width: 100%;
color: white;
float: right;
}
#home .content h1 {
font-size: 60px;
margin-bottom: 60px;
}
#home .content h1::after {
content: " Family ";
animation: textAnim 10s linear infinite;
}
@keyframes textAnim {
25% {
content: " If not Now, When ? ";
}
50% {
content: " Just in case. ";
}
75% {
content: " For your loved one.";
}
}
答案 0 :(得分:2)
尝试使用 css 属性 position:relative 和 position: absolute 来对齐项目。
简短说明。 Position relative 分配给 parent,在这种情况下,您可以分配给 section home。然后,绝对位置被分配给想要对齐的孩子。之后,对于子元素,您可以使用 right、top、bottom 和 left 等定位属性来调整定位。
例如
#home {
position: relative;
width: 100%;
height: 90vh;
}
.content {
position: absolute;
top: 50%;
right: 0;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
}