Question

我体内有3个div，我需要它们始终保持居中，不重叠。

我会将链接发布到页面，但目前正在本地托管以进行测试。

body {
background-color: #c8dbdd;
background-image: url("http://www.splashpage.dev/wpcontent/uploads/2016/01/splashbackground.jpg");
background-position: center center; 
display:inline-block;
}

#title {
left: 50%;
top: 50%;
/* bring your own prefixes */
transform: translate(-50%, -50%);
margin-top: 80px;
margin-bottom: 20px;
display:block;
position:absolute;
display:inline-block;
}

.carousel {
left: 50%;
top: 50%;
/* bring your own prefixes */
transform: translate(-50%, -50%);
height: 210px;
width: 950px;
background-color: rgba(255, 255, 255, 0.24);
position:fixed;
padding: 10px;
outline: #fff solid thin;
display:table;
clear:both;
display:inline-block;
}

.text {
font-family:'Ubuntu', sans-serif;
color: #ffffff;
font-size: 12px;
text-align:center; 
margin-bottom: 3px;
line-height: 25px;
}

.bottom {
font-family:'Ubuntu', sans-serif;
position:fixed;
bottom:20px;
width:100%;
text-align:center;
color: #fff;
font-size:12px;
letter-spacing: 5px;
}

a {
color: #fff;
text-decoration: none;
}

<body>
    <div id="title">
        <div style="text-align: center"></div>
    </div> 
    <div class="carousel" id="carousel">
        <div class="text" id="text"><font size="4px"></div>
    </div>
    <div id="bottom">
        <div class="bottom" style="text-align: center">
           <a href="http://www.splashpage.dev/">THE DESTINATIONS</a>
           <a href="http://www.splashpage.dev/mission-statement/">THE MISSION</a> 
           <a href="http://www.splashpage.dev/contact-us">CONTACT</a> 
           <a href="http://www.splashpage.dev/careers/">CAREERS</a> 
        </div>
    </div>
</body>

我尝试了各种位置，浮动，清晰和边距组合，我可以让它们居中但我不能阻止它们重叠。

Answer 1

尝试以下CSS代码。 display:table;行被评论，.carousel的高度也增加到height:442px;，超链接文字颜色变为白色，因为背景是黑色的，并且它不会出现。

@import url(//fonts.googleapis.com/css?family=Ubuntu:300,400,500,700);

body {
    background-color: #000;
    background-image: url("http://www.splashpage.dev/wp-content/uploads/2016/01/splashbackground.jpg");
    background-position: center center; 
}

#title {
    //float: center;
    margin-top: 80px;
}

.carousel {
    margin: 0 auto;
    height: 442px;
    width: 950px;
    background-color: rgba(255, 255, 255, 0.24);
//  position:relative;
    padding: 10px;
    outline: #fff solid thin;
    //display: table;
}

.text {
    font-family:'Ubuntu', sans-serif;
    color: #000;
    font-size: 12px;
    text-align:center; 
    margin-bottom: 3px;
    line-height: 25px;
}

.bottom {
    font-family:'Ubuntu', sans-serif;
//  position:fixed;
    bottom:20px;
    width:100%;
    text-align:center;
    color: white;
    font-size:12px;
    letter-spacing: 5px;
}

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

保持3个浮动中心堆叠

1 个答案: