个人中心
gpt4 book ai didi

javascript - 将 div 居中并出现问题

转载 作者：太空宇宙 更新时间：2023-11-04 01:12:36 25 4
gpt4 key购买 nike

我在将此 div 居中时遇到问题，该 div 在 JavaScript 中被激活以显示 <a> 的 onclick标签。它可以在页面底部找到带有小填充背景的文本“这是一个测试”。通常它只会在单击时出现，但我现在已将其禁用。

我试过了justify-content和所有常见的(我认为)。我有一种感觉，父标签正在干扰它并为其提供我不希望它使用的 CSS。如果是这样的话，我已经使用Inspect Element 无济于事地找到它。

如有任何建议，我们将不胜感激。

谢谢。

var mouseFollowX = 0,
  mouseFollowY = 0,
  x = 0,
  y = 0,
  friction = 2 / 30;

function backgroundMover() {
  x += (mouseFollowX - x) * friction;
  y += (mouseFollowY - y) * friction;

  translate = 'translate(' + x + 'px, ' + y + 'px) scale(1.3)';

  $('.bg').css({
    '-webit-transform': translate,
    '-moz-transform': translate,
    'transform': translate
  });

  window.requestAnimationFrame(backgroundMover);
}

$('.wrap').on('mousemove click', function(e) {

  var lMouseX = Math.max(-100, Math.min(100, $(window).width() / 2 - e.clientX));
  var lMouseY = Math.max(-100, Math.min(100, $(window).height() / 2 - e.clientY));
  mouseFollowX = (20 * lMouseX) / 100; // 100 : 12 = lMouxeX : lFollow
  mouseFollowY = (10 * lMouseY) / 100;

});

backgroundMover();

function showDevFunction() {
  var getDev = document.getElementById("showDev");
  if (getDev.style.display === "block") {
    getDev.style.display = "none";
  } else {
    getDev.style.display = "block";
  }
}
#mainnav {
  background-color: #FBFBFB;
}

h1 {
  margin-bottom: 0;
  padding: 0;
}

.header-brand {
  margin-bottom: -8px;
  margin-top: 0;
  margin-right: 20px;
}

h1.header-brand {
  margin-right: 25px;
  margin-top: -10px;
  margin-left: 20px;
}

.nav-bg {
  padding: 33px;
  margin: 0;
  background: url("../img/home/main-img-header-2.jpg") no-repeat center bottom;
}

h1.hero-heading {
  color: white;
  position: absolute;
  padding-left: 15%;
  top: 0.70em;
  left: -0.75em;
  line-height: 0.8;
  font-family: Roboto, sans-serif;
  font-size: 10vh;
  font-weight: bold;
  font-style: italic;
  text-transform: uppercase;
  text-shadow: 3px 3px 5px black;
}

.hero-heading span {
  padding-left: 0.5em;
}

h3.hero-content {
  color: white;
  position: absolute;
  background-color: rgba(53, 79, 92, 0.50);
  padding: 0.75em 0.75em 0.75em 15%;
  top: 11em;
  left: -0.75em;
  line-height: 1.5em;
  max-width: 76%;
  font-family: Roboto Slab, serif;
  font-size: 2.5vh;
  font-weight: lighter;
  font-style: normal;
}

.wrap {
  width: 100%;
  height: 55vh;
  position: relative;
  overflow: hidden;
  margin-bottom: 35px;
}

.bg {
  z-index: -1;
  position: static;
  background: url("../img/home/main-img-header-2.jpg") no-repeat center bottom;
  width: 100%;
  height: 55vh;
  transform: scale(1.3);
}

.cta {}

img.cta {
  opacity: 100;
  background: white;
  -o-transition: opacity .2s ease-out;
  -ms-transition: opacity .2s ease-out;
  -moz-transition: opacity .2s ease-out;
  -webkit-transition: opacity .2s ease-out;
  /* ...and now override with proper CSS property */
  transition: opacity .2s ease-out;
}

img.cta:hover {
  opacity: 0;
}

.cf {}

.cf img {
  position: absolute;
  -webkit-transition: opacity 0.2s ease-in-out;
  -moz-transition: opacity 0.2s ease-in-out;
  -o-transition: opacity 0.2s ease-in-out;
  transition: opacity 0.2s ease-in-out;
}

.cf img.top:hover {
  opacity: 0;
}

.cta-sub {
  position: relative;
  margin-top: 200px;
}

.show-more {
  width: 80%;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  background-color: lightblue;
  position: absolute;
  margin: 275px 0 0 0;
}

#showDev {
  display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!doctype html>

<html lang="en">

  <head>

    <title>Bootstrap Layouts</title>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">

    <!-- Custom CSS -->
    <link rel="stylesheet" href="styles/main.css" type="text/css">

    <!-- Fonts -->
    <link href="https://fonts.googleapis.com/css?family=Roboto:400,400i,700,700i" rel="stylesheet">

    <link href="https://fonts.googleapis.com/css?family=Roboto+Slab:300,400,700" rel="stylesheet">

  </head>

  <body>
    <header class="navbar-inverse" role="banner">
      <div id="mainnav">
        <!-- Can change class="navbar-static-top", to class="navbar-fixed-top" to have nav stuck top -->
        <nav class="navbar navbar-expand-lg navbar-light">
          <a class="navbar-brand" href="index.html">
					<a class="header-brand" href="index.html"><img src="img\main\logo-text-web.png" height="100" width="408"></a>
          <!-- <h1 class="header-brand">David Olijnyk <br>Webmaster Services</h1> -->
          </a>

          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
					<span class="navbar-toggler-icon"></span>
				  </button>

          <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav mr-auto">
              <li class="nav-item active">
                <a class="nav-link nav-bg" href="#">Home <span class="sr-only">(current)</span></a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
              </li>
              <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
						  Dropdown
						</a>
                <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                  <a class="dropdown-item" href="#">Action</a>
                  <a class="dropdown-item" href="#">Another action</a>
                  <div class="dropdown-divider"></div>
                  <a class="dropdown-item" href="#">Something else here</a>
                </div>
              </li>
              <li class="nav-item">
                <a class="nav-link disabled" href="#">Disabled</a>
              </li>
            </ul>
          </div>
        </nav>
      </div>
    </header>

    <div class="wrap">
      <div class="bg"></div>
      <h1 class="hero-heading"> your <br> <span>solution</span></h1>
      <div class="hero-content-box">
        <h3 class="hero-content">Keep your most important business services in one place, with easy and frequent communication. Having an online presence has never been so easy and impactful. </h3>
      </div>
    </div>

    <div class="container">
      <div class="row">
        <a href="#" class="cf col-4  d-flex justify-content-center" onclick="showDevFunction()">
				<img class="cta bottom rounded" src="img/home/dev-more.png">
				<img class="cta top rounded" src="img/home/development.png">
			</a>

        <div class="show-more" id="showDev">

          This is a test

        </div>

        <a href="#" class="cf col-4  d-flex justify-content-center" onclick="showDev">
				<img class="cta bottom rounded" src="img/home/photo-more.png">
				<img class="cta top rounded" src="img/home/photo.png">
			</a>

        <a href="#" class="cf col-4  d-flex justify-content-center">
				<img class="cta bottom rounded" src="img/home/dev-more.png">
				<img class="cta top rounded" src="img/home/development.png">
			</a>
      </div>
      <div class="row cta-sub">

        <h3 class="cf col-4  d-flex justify-content-center">Webmaster</h3>
        <h3 class="cf col-4  d-flex justify-content-center">Photography</h3>
        <h3 class="cf col-4  d-flex justify-content-center">Graphic Design</h3>

      </div>
    </div>




    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

    <script src="scripts/main.js"></script>

  </body>

</html>

最佳答案

唯一具有 position:relative 的 block 是 .wrap，因此 #showDev 相对于 body 定位。

将以下 position:relative 添加到 .container 元素，#showDev 将完成此 block 的 80%。

关于javascript - 将 div 居中并出现问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50894950/

25 4 0
文章推荐： javascript - 如何纠正node.js验证器中没有方法 'onValidationError'的错误？
文章推荐： c - 如何在 node.js 中创建较低级别的网络数据包
文章推荐： c - OpenGL VBO : Short or Float?
文章推荐： python - python 中的摩尔邻域
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com