Question

我试图将图像置于DIV的中心并且已经完成了很多次，但在这种情况下它不起作用。我希望图像在div中垂直和水平居中，当页面调整大小时，图像保持在中心。您能否查看我的代码并提出任何想法？

谢谢堆

div class =“headerContainer”＆gt;

    <div class="headerContainerLogoContainer">
        <div class="headerContainerLogoContainerLogo">
            <img src="images/blinkLogo.png" alt="">
        </div>

    </div>

    <div class="nav">

        <ul>
            <li><a href="#home"> <br>BLINK</a></li>
            <li><a href="#news"><br>ADVERTISING WITH BLINK</a></li>
            <li><a href="#contact"><br>EDUCATING WITH BLINK</a></li>
            <li><a href="#about"><br>ABOUT US</a></li>
        </ul>

    </div>


</div>

body {
    margin: 0px;
    background-color: #000000;
    height: 2000px;
}


/* 1. HEADER */

.headerContainer {
    width: auto;
    height: 320px;
    background-color: #000000;
    position: relative;
    border: 1px dotted #fff;
}

.headerContainerLogoContainer {
    width: auto;
    height: 250px;
    background-color: #000000;
    position: relative;
}

.headerContainerLogoContainerLogo {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -50px;
    margin-top: -50px;
}

.nav {

    width: auto;
    height: 70px;
    background-color: #0f0f0f;
    position: relative;
    overflow: hidden;

}

Answer 1

#content img {
    display: table-cell;
    text-align: center;
    vertical-align: middle
}

试试这个，否则你可以在你的img标签周围使用中心标签，并创建一个x px的边距顶部来放置你的图像。

Answer 2

只需使用：text-align:center; 对于 .headerContainerLogoContainer

将图像定位在DIV的中心

2 个答案: