Question

我有一个主页面有三种颜色，每种颜色分为1/3页面，每种颜色必须是一个居中的图片，当它悬停在它上面时会翻转。我无法管理三张图片完全对齐，但也在每一个颜色方面都居中。

＆＃13;

    body{
    margin: 0;
    padding: 0;
    width: 100%;
    background: url(../img/backgroundIndex.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

.indexLogo{
    width: 100%;
}

.indexLogoImg{
    width: 40%;
    margin-left: 30%;
    z-index: 10;
    position: absolute;
}

#f1_container {
    position: relative;
    margin-top: 25%;
    width: 200px;
    height: 120px;
    z-index: 1;
    padding-right: 10%;
    padding-left: 8%;
    float:left;
}
#f1_container {
    perspective: 1000;
}
#f1_card {
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: all 0.4s linear;
}
#f1_container:hover #f1_card {
    transform: rotateY(180deg);
}
.face {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
}
.face.back {
    display: block;
    transform: rotateY(180deg);
    box-sizing: border-box;
    padding: 10px;
    color: white;
    text-align: center;
    background-color: #aaa;
}

＆＃13;

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Uitgaanscentrum De Bonte Koe</title>
    <meta charset="utf-8"/>
    <link rel="stylesheet" href="css/index.css" type="text/css"/>
    <meta name="description" content="Uitgaanscentrum De Bonte Koe door Mustafa Tosuncu en Alperen Yavuz">
    <meta name="keywords" content="Mustafa, Tosuncu, Mustafa, Tosuncu, Website, ALA, De, Bonte, Koe, Alperen, Yavuz">
    <meta name="author" content="Mustafa Tosuncu">
</head>
<body>
    <header class="indexLogo"><img class="indexLogoImg" src="img/logo.png"/></header>
    <div id="f1_container">
        <div id="f1_card" class="shadow">
            <div class="front face">
                <img src="http://www.startpagina.nl/athene/dochters/rimini/images/party_time-1280x800.jpg" width="200" height="120"/>
            </div>
            <a href="#"><div class="back face center">
                    <p>This is nice for exposing more information about an image.</p>
                    <p>Any content can go here.</p>
                </div></a>
        </div>
    </div>
    <div id="f1_container">
        <div id="f1_card" class="shadow">
            <div class="front face">
                <img src="http://www.restauranthoteldelakei.nl/wp-content/uploads/2014/01/restaurant.jpeg" width="200" height="120"/>
            </div>
            <a href="#"><div class="back face center">
                    <p>This is nice for exposing more information about an image.</p>
                    <p>Any content can go here.</p>
                </div></a>
        </div>
    </div>
    <div id="f1_container">
        <div id="f1_card" class="shadow">
            <div class="front face">
                <img src="http://emmaseetcafe.nl/wp-content/uploads/2014/09/Cinema.jpg" width="200" height="120"/>
            </div>
            <a href="#"><div class="back face center">
                    <p>This is nice for exposing more information about an image.</p>
                    <p>Any content can go here.</p>
                </div></a>
        </div>
    </div>
</body>
</html>

＆＃13;

Answer 1

你可以使用下面给出的这个css;

DataFrame

如何水平对齐3张图片？

1 个答案: