我正在开发一个网站,我想用自己的关闭按钮将横幅固定在页面底部,以便人们可以关闭广告。
我用css实现div的整体表现,但我不可能将它集中在中心,我尝试text-align:center,margin-left:auto,margin-right:auto,margin:0 auto,fix width to 300px和许多其他选择,什么都不起作用!!
这是横幅的代码CSS:
#fragment {
font-size: 12px;
font-family: tahoma;
/* border: 1px solid #ccc;*/
color: #555;
display: block;
/* padding: 10px; */
box-sizing: border-box;
text-decoration: none;
min-height: 50px;
width: 300px;
overflow: hidden;
position: fixed;
bottom: 0;
margin-left: auto;
margin-right: auto;
}
#fragment:hover {
box-shadow: 2px 2px 5px rgba(0, 0, 0, .2);
}
#close {
float: right;
display: inline-block;
padding: 2px 5px;
background: #ccc;
}
#close:hover {
float: right;
display: inline-block;
padding: 2px 5px;
background: #ccc;
color: #fff;
}

<div id="fragment">
<span id="close" onclick="myFunction()">x</span>
<!--THE X ICON TO CLOSE THE BANNER -->
<!-- the script code of the ads provided by some company -->
</div>
&#13;
答案 0 :(得分:2)
我在div中添加了div#fragment,其宽度为100%。在div中,div #fragie居中对齐。我在CSS中做了一些修改。 请检查代码段,如下所示:
/* Styles go here */
#fragment {
font-size: 12px;
font-family: tahoma;
border: 1px solid #ccc;
color: #555;
display: block;
box-sizing: border-box;
text-decoration: none;
min-height: 50px;
width: 300px;
overflow: hidden;
margin-left: auto;
margin-right: auto;
}
#fragment:hover {
box-shadow: 2px 2px 5px rgba(0, 0, 0, .2);
}
.row {
text-align: center;
position: fixed;
bottom: 0;
min-width: 100%;
}
.item-right {
text-align: right;
}
#close {
display: inline-block;
padding: 2px 5px;
background: #ccc;
}
#close:hover {
display: inline-block;
padding: 2px 5px;
background: #ccc;
color: #fff;
cursor: pointer;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="row">
<div id="fragment" class="item-right">
<span id="close" onclick="this.parentElement.style.display='none';">x</span>
</div>
</div>
</body>
</html>
相同的Plunker链接:https://plnkr.co/edit/57JYKVe5r459mmQsRQk5?p=preview
答案 1 :(得分:1)
在今天的网络中,你有很多选择以居中为中心。但是,由于您可能对需要较少代码的代码感兴趣(没有包装器,没有在其他元素上设置属性等等),这里有一个快速的代码:
#fragment {
left: 50%;
transform: translateX(-50%);
}
#fragment {
font-size: 12px;
font-family: tahoma;
border: 1px solid #ccc;
color: #555;
display: block;
/* padding: 10px; */
box-sizing: border-box;
text-decoration: none;
min-height: 50px;
width: 300px;
overflow: hidden;
position: fixed;
bottom: 0;
left: 50%;
transform: translateX(-50%);
}
#fragment:hover {
box-shadow: 2px 2px 5px rgba(0, 0, 0, .2);
}
#close {
float: right;
display: inline-block;
padding: 2px 5px;
background: #ccc;
}
#close:hover {
float: right;
display: inline-block;
padding: 2px 5px;
background: #ccc;
color: #fff;
}
&#13;
<div id="fragment">
<span id="close" onclick="myFunction()">x</span> <!--THE X ICON TO CLOSE THE BANNER -->
<!-- the script code of the ads provided by some company -->
</div>
&#13;