Question

我试图水平居中固定和旋转的div（橙色方块）。 div应该贴在导航栏上并且应该响应。我已经尝试了很长时间，但我似乎无法找到正确的解决方案。我目前的代码如下所示。

希望你们中的一些人有正确的答案。先感谢您！

（P.s。我刚加入了stackoverflow，一切对我来说还是新的。：P）

HTML：

<!DOCTYPE html>
<html>
<head>
    <title>My test website!</title>
    <link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
    <section id="nav">
        <div class="navbar"> <!-- Navbar Section -->
            <ul id="navcontent">
                <li><a href="#" class="active">Home</a></li>
                <li><a href="#about">About</a></li>
                <a href="#" class="navbarlogo"><img src="img/logo001.png" width="auto" height="40px" alt="Logo"/></a>
                <li><a href="#portfolio">Portfolio</a></li>
                <li><a href="#contact">Contact</a>
            </ul>
            <div id="navsquare">
                <div>
                    <div class="navsquare"></div>
                </div>
            </div>
        </div>
    </section>
    <section id="header"> <!-- Header Section -->
        <div class="header">
            <img src="img/photo002.jpeg" width="100%" height="650" alt="Header image"/>
        </div>
    </section>

CSS：

    #nav {
        z-index: 30;
        position: fixed;
    }

    #header {
        z-index: 10;
        position: relative;
        height: 650px;
    }

    .navbar {
        background-color: #fb7507;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 63px;
        text-align: center;
        box-shadow: 0px 5px 50px #222;
    }

    #navcontent {
        display: inline-block;
        list-style-type: none;
        margin: 0px 0px 0px 40px;
        padding: 0;
        text-align: center;
    }

    .navsquare {
        height: 115px;
        width: 115px;
        background-color: #fb7507;
        border-radius: 5px;
        -ms-transform: rotate(45deg); /* IE 9 */
        -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
        transform: rotate(45deg);
        box-shadow: 0px 5px 50px #222;
        position: fixed;
        left: 50%;
        right: 50%
    }

截图：

http://prntscr.com/b04gty

Answer 1

使用此css

 .navsquare {
        height: 115px;
        width: 115px;
        background-color: #fb7507;
        border-radius: 5px;
        -ms-transform: rotate(45deg); /* IE 9 */
        -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
        transform: rotate(45deg);
        box-shadow: 0px 5px 50px #222;           
        display: inline-block;

代替你的

.navsquare {
        height: 115px;
        width: 115px;
        background-color: #fb7507;
        border-radius: 5px;
        -ms-transform: rotate(45deg); /* IE 9 */
        -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
        transform: rotate(45deg);
        box-shadow: 0px 5px 50px #222;
        position: fixed;
        left: 50%;
        right: 50%
    }

Answer 2

您只需更改 .navsquare 类样式

.navsquare{
   height: 115px;
   width: 115px;
   background-color: #fb7507;
   border-radius: 5px;
   -ms-transform: rotate(45deg);
   -webkit-transform: rotate(45deg);
   transform: rotate(45deg);
   box-shadow: 0px 5px 50px #222;
   position: fixed;
   left: 0;
   right: 0;
   margin: auto;

}

Answer 3

这是一个常见问题，你也可以在这里找到答案：Center a position:fixed element

解决方案是向right: 0;添加left: 0;，margin: 0 auto和.navsquare。最终结果如下：

<强> CSS

.navsquare {
    height: 115px;
    width: 115px;
    background-color: #fb7507;
    border-radius: 5px;
    -ms-transform: rotate(45deg); /* IE 9 */
    -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
    transform: rotate(45deg);
    box-shadow: 0px 5px 50px #222;
    position: fixed;
    left: 0;
    right: 0;
    margin: 0 auto;
}

此外，您还可以使用负边距。在这里，您使用left: 50%;和margin-left: half-of-div-width;。由于你的div的角度，这在你的情况下会稍微复杂一点，但可以通过一些简单的计算来实现：

<强> CSS

.navsquare {
    height: 115px;
    width: 115px;
    background-color: #fb7507;
    border-radius: 5px;
    -ms-transform: rotate(45deg); /* IE 9 */
    -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
    transform: rotate(45deg);
    box-shadow: 0px 5px 50px #222;
    position: fixed;
    left: 50%;
    margin-left: -58px;
}

如何将旋转的<div>置于固定位置？

3 个答案: