使div居中並出現問題
[英]Centering a div and having issues
問題描述
我在將這個div居中時遇到問題，該div在JavaScript中被激活以顯示<a>標記的onclick。 可以在頁面底部找到帶有小填充背景的文本“ This is a test”。 通常，它只會與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>
4 個解決方案
解決方案1
1 2018-06-17 08:37:04
唯一具有position:relative塊是.wrap因此#showDev相對於主體定位。
position:relative對於.container元素添加以下position:relative .container並且#showDev將執行此塊的80％。
解決方案2
1 2018-06-17 11:13:13
我將使用margin：auto和text-align：center。
.nameOfTheDiv{
margin: auto;
text-align: center;
}
這將有助於將div定位在中心。
解決方案3
0 已采納 2018-06-17 08:53:33
在更多show-more類中，您使用margin-left: auto; margin-right: auto; 。 但是，您再次使用了margin: 275px 0 0 0; 正在操縱先前設置的值。 另外，您必須添加left: 0; right: 0; 用它。
因此，如下更改：
.show-more {
width: 80%;
margin-left: auto;
margin-right: auto;
text-align: center;
background-color: lightblue;
position: absolute;
margin-top: 275px;
left: 0;
right: 0;
}
解決方案4
0 2018-06-17 11:41:38
如果您正在尋找一些可以使div居中的東西，例如警報框
div {
position: absolute;
margin: auto;
max-width: 300px;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
Ajax的新增功能，嘗試在div中加載另一個頁面，但Safari出現問題
[英]New to Ajax, trying to load another page in a div but having issues with Safari
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.