时间戳

首页 > 解决方案 > 如何在中心对齐图像

css - 如何在中心对齐图像

问题描述

我有2个问题。

这是我的主页

1）我想将徽标图像和框移到中心。我不知道为什么它不起作用......我想我已经使用了包括对齐在内的所有东西，但它不动。我用 flex 解决了菜单。

2）我希望菜单和框的边界大小相同。重叠部分具有不同大小的线条。

谢谢阅读。

<style type="text/css">

.logo {
    display: flex;
    margin: auto;
    padding: 50px;
}

.nav {
    display: flex;   
}

.menu-center {
    display: flex;  
    margin: auto;
}

.menu-item {
    width: 100px;
    height: 30px;
    border: 1px solid gray;
    text-align: center;
    padding: 10px;
    padding-left: 100px;
    padding-right: 100px;
}

a {
    text-decoration: none;
    color: black;
}

.main {
    margin: 0;
    margin-top: 60px; 
}

.box  {
    display: flex; 
    width: 800px;
    height: 500px;
    border: 1px solid gray;
    margin-top: auto;
    text-align: center;

}

    .main_box {
        display: flex;
        width: 750px;
        height: 450px;
        border: 1px solid black;
        padding: 10px;
        margin: auto;

        text-align: center;

    }




   </style>
    <script type="text/javascript" src="js/jquery-1.12.4.js"></script>
    <script type="text/javascript">


    </script>
        </head>
        <body>
            <div class="logo">
                <a href="index.html"><img src="imgs/logo2.png" alt="" /></a>
            </div>
            <div class="nav">
                <div class="menus">
                    <a href="intro.html"><div class="menu-item">About Me</div></a>
                    <div class="menu-item">My Language</div>
                    <div class="menu-item">Photos</div>
                    <div class="menu-item">Login</div>
                </div>
            </div>
            <div class="box">
                <div class="main_box">
                </div>
            </div>
            <div id="footer">
            </div>
        </body>
    </html>

标签： css

解决方案

将边距自动属性添加到 div 内的锚标记

a {
        text-decoration: none;
        color: black;
        margin: auto;
    }

还有在盒子里

.box {
        display: flex;
        width: 800px;
        height: 500px;
        border: 1px solid gray;
        margin-top: auto;
        text-align: center;
        margin: auto;   
    }

推荐阅读