个人中心
gpt4 book ai didi

javascript - 居中 DIV，但与其他 CSS 不允许

转载 作者：行者123 更新时间：2023-11-28 03:09:48 25 4
gpt4 key购买 nike

我想在 <body> 中居中放置一个 div ，但我就是不知道怎么做。我试过 flexboxes 和旧的 margin: 0 auto;诡计。这是我的代码:

        <link href="https://fonts.googleapis.com/css?family=Comfortaa|Cutive+Mono|Oswald" rel="stylesheet">
    <link href="../css/ham.css" rel="stylesheet">
    <link rel="stylesheet" href="../css/main.css" type="text/css" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script
      src="https://code.jquery.com/jquery-3.2.1.min.js"
      integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
      crossorigin="anonymous"></script>
  <script type="text/javascript">

  //Unselctable Function

    $.fn.extend({ 
        disableSelection: function() { 
            this.each(function() { 
                if (typeof this.onselectstart != 'undefined') {
                    this.onselectstart = function() { return false; };
                } else if (typeof this.style.MozUserSelect != 'undefined') {
                    this.style.MozUserSelect = 'none';
                } else {
                    this.onmousedown = function() { return false; };
                }
            }); 
        } 
    });

    $(document).ready(function() {

        //NAVBAR HIDE

        $('nav').hide();

        //UNSELECTABLE

        $('.unselectable').disableSelection();

        //HAMBURGERS

        var $hamburger = $(".hamburger");
        $hamburger.on("click", function(e) {
        $hamburger.toggleClass("is-active");
        $('nav').slideToggle();
    });
    });
  </script>
</head>
<body>
    <nav>
        <ul>
            <li><a href="../">home</a></li>
            <li><a href="../work">work</a></li>
            <li><a href="../contact">contact</a></li>
        </ul>
    </nav>
    <button class="hamburger hamburger--spin" type="button">
        <span class="hamburger-box">
            <span class="hamburger-inner"></span>
        </span>
    </button>
    <div>center this</div>

字面意思就是 </body>之后和我的结束 html - 之后没有脚本。

这是我的 CSS:

/* FONTS

font-family: 'Comfortaa', cursive;
font-family: 'Oswald', sans-serif;
font-family: 'Cutive Mono', monospace;

*/

/*RESET*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

a {
    text-decoration: none;
    color: white;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

/*STYLES*/

.unselectable {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

body {
    background-color: black;
    background-image: url(../images/bg.jpg);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center; 
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    width: inherit;
    background-color: #212121;
}

li {
    float: left;
    color: #fff;
    cursor: pointer;
}

li a {
    display: block;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-family: 'Comfortaa', cursive;
    /*transition*/
    -webkit-transition: color 0.2s; /* Safari */
    transition: color 0.2s;
}

li a:hover {
    color: #BDBDBD;
}

.hamburger {
    position: absolute;
}

button:focus {
    outline: none;
}

@media only screen and (max-width: 768px) {
    /* For mobile phones: */
    * {
        width: 100%;
    }

    li a {
        padding: 0;
        padding-top: 14px;
        text-align: center;
    }

    li:last-child {
        padding-bottom: 14px;
    }

}

.content {
     margin: 0 auto;
     width: 100px;
}

^ .content是我想在页面中垂直和水平居中的内容。我应该说，我也在使用 https://jonsuh.com/hamburgers/ - 顺便说一句，这是一个很棒的图书馆。

如果这个问题之前已经回答过，我很抱歉，但我在任何地方都找不到。

谢谢阿利斯泰尔

最佳答案

您可以通过 css 将任何 div 居中，给它一个固定的宽度和边距(标准方式)。

.any{
  width:300px;/*  use your required wid and height */
  height:300px;
  background:red; /*  Just for example */
  margin :0px auto;
}

你甚至可以看看这个箱子: https://jsbin.com/rewayuwoso/edit?html,css,output

关于javascript - 居中 DIV，但与其他 CSS 不允许，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45773958/

25 4 0
文章推荐： css - 如何更改 Razor View 中第一个字母的颜色？
文章推荐： javascript - 我需要我的 javascript 代码来通过代码块检索 id
文章推荐： javascript - 为笔记本电脑和移动设备使用不同的元素？
文章推荐： javascript - tensorflow js 模型(从 Keras 转换而来)有 3 个输出。我怎样才能提取它们？
行者123
个人简介

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

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