stackoom
  简体   繁体   中英

Centering a div and having issues

 原文  2018-06-17 08:24:53  4   4    javascript/ jquery/ html/ css

Question

I am having issues centering this div which is being activated in JavaScript to show onclick of an <a> tag. It can be found at the bottom of the page with the text "This is a test" with a small padding background. Usually it would only appear with an onclick but I have disabled that for now.

I have tried justify-content and all the usuals (I think). I have a feeling that a parent tag is interfering with it and giving it CSS that I don't want it to. I have used Inspect Element to no avail in finding this, if it is the case.

Any advice would be appreciated.

Thanks. 

 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 answers

solution1
 1  2018-06-17 08:37:04

The only block with position:relative is the .wrap so #showDev is positioned relatively to the body.

Add the following position:relative to the .container element and #showDev will do 80% of this block.

solution2
 1  2018-06-17 11:13:13

I would use margin:auto and text-align: center. 

.nameOfTheDiv{
      margin: auto;
      text-align: center;
 }

This will help to position your div in the center.

solution3
 0 ACCPTED  2018-06-17 08:53:33

In your show-more class you are using margin-left: auto; and margin-right: auto; . But again you have used margin: 275px 0 0 0; which is manipulating the previously set values. Additionally, you have to add left: 0; and right: 0; with it.

So, change it like below: 

.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;
}

solution4
 0  2018-06-17 11:41:38

In case you are looking for something to center the div like an alert box 

div {
    position: absolute;
    margin: auto;
    max-width: 300px;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question Having trouble centering a DIV element Having trouble centering content in a div Masonry: Having issues with div layout Centering parent div scroll bar, having dynamic width centering a div within a div vertically centering a div in a div New to Ajax, trying to load another page in a div but having issues with Safari Centering a div on a page with an overlay Centering a div on a scrolled page Centering an “i” element in a div
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM