CSS - 将元素对齐到页面的右侧答案

【问题标题】：CSS - Align element to the right of the pageCSS - 将元素对齐到页面的右侧
【发布时间】：2021-09-28 11:10:47
【问题描述】：

我在将元素对齐到页面右侧时遇到问题，因为我确实使用了多种方法，例如 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.";
  }
}

【问题讨论】：

这是一个代码转储。请提供reproducible example，您的问题将更容易调试。

标签： html css reactjs bootstrap-4

【解决方案1】：

尝试使用 css 属性 position: relative 和 position: absolute 来对齐项目。

简短的解释。相对位置分配给父级，在这种情况下，您可以分配给部分主页。然后，绝对位置被分配给想要对齐的孩子。之后，对于子元素，您可以使用右、上、下、左等定位属性来调整定位。

例如

#home {
  position: relative;
  width: 100%;
  height: 90vh;
}

.content {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
}

【讨论】：