分类导航
程序笔记程序问答

如何将 Box 阴影与屏幕中心对齐？

程序问答   发布时间：2022-06-01  发布网站：大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了如何将 Box 阴影与屏幕中心对齐？，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

如何解决如何将 Box 阴影与屏幕中心对齐？？

开发过程中遇到如何将 Box 阴影与屏幕中心对齐？的问题如何解决？下面主要结合日常开发的经验，给出你关于如何将 Box 阴影与屏幕中心对齐？的解决方法建议，希望对你解决如何将 Box 阴影与屏幕中心对齐？有所启发或帮助；

请问在屏幕中央显示方框阴影的最佳方法是什么？我一直在寻找，但我没有找到任何可以在那种光中提供某种形式帮助的东西。 我编写的 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;
  }

这已经放在了 div 中，该 div 应该在 HTML 区域中显示 Boxshadow。 我只是想让它居中。我该如何处理这样的事情？

编辑

Box-Shadow 没有出现在屏幕的中心，而是在页面的左侧开始。 现在这是应该对齐 CSS 的 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',sans-serif;
}

.footerlinks{
    color: white;
    display: inline-block;
    Font-size: 14px;
    text-decoration: none;
    Font-family:'Gill Sans',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 与类 paypalPayment

那么请问我如何将 Boxshadow 推到中心？

编辑 2

到目前为止，我想我已经把它放在了中心位置。现在它相互对抗。现在看起来像这样

如何将 Box 阴影与屏幕中心对齐？

我该如何转空间呢？我是 CSS 的新手

解决方法

我认为这是你想做的

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",sans-serif;
}
.copyrightText {
  color: white;
  font-size: 14px;
  font-family: "Gill Sans",sans-serif;
}
.footerLogo img {
  width: 30px;
  height: auto;
  margin-top: 10px;
}

HomePage.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

大佬总结

以上是大佬教程为你收集整理的如何将 Box 阴影与屏幕中心对齐？全部内容，希望文章能够帮你解决如何将 Box 阴影与屏幕中心对齐？所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。
标签：如何将
猜你在找的程序问答相关文章
其他相关热搜词更多
phpJavaPython程序员load中如何string使用参数jquery开发安装listlinuxiosandroid工具javascriptcap