堆棧內存溢出
  簡體   English   中英

如何將 Box 陰影與屏幕中心對齊？

[英]How do I align Box shadow to the Center of the screen?

 原文  2021-03-14 05:50:50  4   1    javascript/ html/ css/ reactjs

問題描述

請問什么是使盒子陰影出現在屏幕中央的最佳方法？ 通過尋找，我沒有找到任何可以在那個光中提供某種形式的幫助的東西。 我寫的 css 如下所示：

  .paypalPayment{
    width: 700px;
    height: 52px;
    margin:59px;
    position:absolute;
    border:2px solid #fff;
    background: url(pp2.png) no-repeat;
    box-shadow: 10px 10px 5px #ccc;
    -moz-box-shadow: 10px 10px 5px #ccc;
    -webkit-box-shadow: 10px 10px 5px #ccc;
    -khtml-box-shadow: 10px 10px 5px #ccc;
  }

這已經被放在了應該在 HTML 區域中顯示 Boxshadow 的 div 中。 我只是想讓它居中。 我該如何處理這樣的事情？

編輯

Box-Shadow 不是來到屏幕的中心，而是轉到頁面的左開始。 現在這是 css class 應該對齊 css，我嘗試使用align-items: center; 原來它從來沒有成功。

我的 Html 代碼如下所示：

import React from 'react';
import './app-styles.css';
import Vector from './Vector.png'
import ie_logo from './ie_logo.png';
import {Link} from 'react-router-dom';


function HomePage() {
  return (
    <div className="App">
        <header className="header">
        <img src={Vector} style={{margin:7, flexDirection:'column', alignItems: 'center'}} alt="Vector" />
        <img src={ie_logo} style={{margin:7, flexDirection: 'row', width:114, height:25}} alt="ie_logo" />
        <p className="needhelpText">NEED HELP?</p>
        </header>
            <form>
                <div className="InstructionText">
                    payment
                </div>

                <div className="paypalPayment" >
                </div>
            </form>
        <footer className="footer">
        <a href="#" className="footerLinks"> Privacy Policy | &nbsp; </a>
        <a href="#" className="footerLinks">Do Not Sell My Personal Information | &nbsp; </a>
        <a href="#" className="footerLinks">Advertising Guidelines | &nbsp;</a>   
        <a href="#" className="footerLinks">Site Map  &nbsp;</a>  

        <div className="copyrightText">
        © Copyright 2021 | Luther Corp | All Rights Reserved
        </div>
        <div className="footerLogo"> 
        <img src={ie_logo}  alt="ie_logo" />
        </div>
        </footer>
    </div>
  );
}

export default HomePage;

這是我的 CSS

.header{
    background-color: #007FC0;
    width: 100%;
    padding: 25px 0;
}

.container{
    flex : 1 1 auto;
    color:white;
}

.needhelpText{
    text-align: right;
    font-weight: bold;
    color: white;
    margin-left: 22px;
    display: inline-block;
    padding: 10px;
    float: right;
    font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-size: medium;
}

.copyrightText{
    color: white;
    font-size: 14px;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}

.footerLinks{
    color: white;
    display: inline-block;
    font-size: 14px;
    text-decoration: none;
    font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}

.footerLogo{
    float: right;
    display:flex;   
    margin-right: 17px;
    margin-left: 22px;
    text-align: center;
    width: 114px;
    height : 30px;
}

.footer{
    position: fixed;
    left: 0;
    padding: 10px;
    bottom: 0;
    width: 100%;
    height: 70px;
    background-color: #16192C;
}

.InstructionText {
    margin-bottom: auto;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 35px;
    justify-content: center;
    color: #007FC0;
    text-transform: uppercase;
    font-style: italic;
    font-weight:bolder;
    display: flex;
  }
  
  .InstructionText:after {
    content: "";
    border-bottom: 4px solid #FF9900;
    width: 100px;
    margin-bottom: 7px;
    width: 549px; 
  }

  .paypalPayment{
    width: 700px;
    height: 52px;
    margin:59px;
    align-items: center;
    position:absolute;
    border:2px solid #fff;
    background: url(pp2.png) no-repeat;
    box-shadow: 10px 10px 5px #ccc;
    -moz-box-shadow: 10px 10px 5px #ccc;
    -webkit-box-shadow: 10px 10px 5px #ccc;
    -khtml-box-shadow: 10px 10px 5px #ccc;
  }

負責執行此操作的 CSS 與 class paypalPayment

那么請我如何將 boxshadow 推到中心？

編輯 2

到目前為止，我想我已經把它放在了中心。 現在它相互碰撞。 現在看起來像這樣

12.png

我怎么反過來空間呢？ 我對 CSS 有點陌生

1 個解決方案

解決方案1
 0  2021-03-16 22:23:23

我想這是你想做的

CSS 文件

/* HEADER */
header {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  background-color: #007fc0;
  padding: 25px;
  margin-bottom: 30px;
}
.header-logo {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
.needhelpText {
  display: block;
  font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
  font-weight: 600;
  color: white;
}

/* MAIN */
main {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 25px;
}
.InstructionText {
  margin-bottom: auto;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 35px;
  justify-content: center;
  color: #007fc0;
  text-transform: uppercase;
  font-style: italic;
  font-weight: bolder;
  display: flex;
}
.InstructionText:after {
  content: "";
  border-bottom: 4px solid #ff9900;
  margin-bottom: 7px;
  width: 450px;
}
.paypalPayment {
  height: 52px;
  width: 450px;
  margin: 0 auto;
  margin-top: 50px;
  background: url("https://i.postimg.cc/qRBnhQhh/paypal-2.png") no-repeat;
  background-size: 85px;
  background-position-y: center;
  background-position-x: 10px;
  box-shadow: 10px 10px 5px #ccc;
  border: 1px solid rgb(177, 177, 177);
}

/* FOOTER */
footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 10px;
  width: 100%;
  height: 120px;
  background-color: #16192c;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.footerLinks {
  list-style: none;
  display: inline-flex;
  padding: 0;
}
.footerLinks li a::after {
  content: "|";
  margin-left: 5px;
  margin-right: 5px;
}
.footerLinks li:last-child a::after {
  content: "";
  margin: 0;
}
.footerLinks li a {
  color: white;
  font-size: 14px;
  text-decoration: none;
  font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
}
.copyrightText {
  color: white;
  font-size: 14px;
  font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
}
.footerLogo img {
  width: 30px;
  height: auto;
  margin-top: 10px;
}

主頁.js

return (
    <div className="App">
      <header>
        <div className="header-logo">
          <img src={vector} style={{width: "250px", height: "auto"}} alt="Vector" />
          <img src={ie_logo} style={{width: "114px", height: "auto"}} alt="ie_logo" />
        </div>
        <div className="needhelpText">NEED HELP?</div>
      </header>

      <main>
        <form>
          <div className="InstructionText">payment</div>
          <div className="paypalPayment" />
        </form>
      </main>

      <footer>
        <ul className="footerLinks">
          <li>
            <a href="#">Privacy Policy</a>
          </li>
          <li>
            <a href="#">Do Not Sell My Personal Information</a>
          </li>
          <li>
            <a href="#">Advertising Guidelines</a>
          </li>
          <li>
            <a href="#">Site Map</a>
          </li>
          <li>
            <a href="#">Privacy Policy</a>
          </li>
        </ul>
        <div className="copyrightText">
          © Copyright 2021 | Luther Corp | All Rights Reserved
        </div>
        <div className="footerLogo">
          <img src={ie_logo} alt="ie_logo" />
        </div>
      </footer>
    </div>

演示： stackblitz

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 如何居中對齊？ 如何讓塊對齊中心？ 如何在中心對齊圖標和文本？ 如何向新組件添加框陰影 如何將我的搜索框對准中心？ 如何使用 JavaScript 居中對齊文本？ HTML：如何居中對齊圖像 <li> 標簽 我如何給一個盒子陰影<div>元素或<hr />陰影從中間淡出的元素？ 如何將對話框定位在屏幕中央？ 我如何讓這個圓圈進入盒子的中心？
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM