本帖最后由 cqwcns 于 2020-1-7 12:48 编辑
如下图，我希望.custom-template水平居中，CSS要怎么改？谢谢
[JavaScript] 纯文本查看 复制代码 <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
.custom-template {
position: fixed;
left: 50%;
transform: translateY(-100%);
bottom: -250px;
width: 40%;
height: 250px;
display: block;
z-index: 1;
background: #ffffff;
transition: all .3s;
z-index: 1003;
box-shadow: -1px 1px 20px rgba(69, 65, 78, 0.15);
transition: all .5s;
}
.custom-template.open {
right: 0px;
}
.custom-template .custom-toggle {
position: absolute;
width: 45px;
height: 45px;
background: rgb(88, 103, 221);
top: 50%;
left: -45px;
transform: translateY(-50%);
display: flex;
align-items: center;
justify-content: center;
text-align: center;
border-right: 1px solid #177dff;
cursor: pointer;
color: #ffffff;
box-shadow: -5px 5px 20px rgba(69, 65, 78, 0.21);
}
.custom-template .custom-toggle i {
font-size: 20px;
}
.custom-template .title {
padding: 15px;
text-align: left;
font-size: 16px;
font-weight: 600;
color: #ffffff;
border-radius: 5px 5px 0px 0px;
border-bottom: 1px solid #ebedf2;
background: #5867dd;
}
.custom-template .custom-content {
padding: 20px 15px;
max-height: 160px;
overflow: auto;
}
.custom-template .switcher {
padding: 5px 0;
}
.custom-template .switch-block h4 {
font-size: 13px;
font-weight: 600;
color: #444;
line-height: 1.3;
margin-bottom: 0;
text-transform: uppercase;
}
.custom-template .btnSwitch {
margin-top: 20px;
margin-bottom: 25px;
}
.custom-template .btnSwitch button {
border: 0px;
height: 20px;
width: 20px;
outline: 0;
margin-right: 10px;
margin-bottom: 10px;
cursor: pointer;
padding: 0;
border-radius: 50%;
border: 2px solid #eee;
position: relative;
transition: all .2s;
}
.custom-template .btnSwitch button:hover {
border-color: #0bf;
}
.custom-template .btnSwitch button.selected {
border-color: #0bf;
}
.custom-template .img-pick {
padding: 4px;
min-height: 100px;
border-radius: 5px;
cursor: pointer;
}
.custom-template .img-pick img {
height: 100%;
height: 100px;
width: 100%;
border-radius: 5px;
border: 2px solid transparent;
}
.custom-template .img-pick:hover img, .custom-template .img-pick.active img {
border-color: #177dff;
}
</style>
</head>
<body>
<div class="custom-template open">
<div class="title">主题</div>
<div class="custom-content">
<div class="switcher">
<div class="switch-block">
<h4>Logo</h4>
<div class="btnSwitch">
<button type="button" class="changeLogoHeaderColor" data-color="dark"></button>
<button type="button" class="selected changeLogoHeaderColor" data-color="blue"></button>
<button type="button" class="changeLogoHeaderColor" data-color="purple"></button>
<button type="button" class="changeLogoHeaderColor" data-color="light-blue"></button>
<button type="button" class="changeLogoHeaderColor" data-color="green"></button>
<button type="button" class="changeLogoHeaderColor" data-color="orange"></button>
<button type="button" class="changeLogoHeaderColor" data-color="red"></button>
<button type="button" class="changeLogoHeaderColor" data-color="white"></button>
<br/>
<button type="button" class="changeLogoHeaderColor" data-color="dark2"></button>
<button type="button" class="changeLogoHeaderColor" data-color="blue2"></button>
<button type="button" class="changeLogoHeaderColor" data-color="purple2"></button>
<button type="button" class="changeLogoHeaderColor" data-color="light-blue2"></button>
<button type="button" class="changeLogoHeaderColor" data-color="green2"></button>
<button type="button" class="changeLogoHeaderColor" data-color="orange2"></button>
<button type="button" class="changeLogoHeaderColor" data-color="red2"></button>
</div>
</div>
<div class="switch-block">
<h4>导航</h4>
<div class="btnSwitch">
<button type="button" class="changeTopBarColor" data-color="dark"></button>
<button type="button" class="changeTopBarColor" data-color="blue"></button>
<button type="button" class="changeTopBarColor" data-color="purple"></button>
<button type="button" class="changeTopBarColor" data-color="light-blue"></button>
<button type="button" class="changeTopBarColor" data-color="green"></button>
<button type="button" class="changeTopBarColor" data-color="orange"></button>
<button type="button" class="changeTopBarColor" data-color="red"></button>
<button type="button" class="changeTopBarColor" data-color="white"></button>
<br/>
<button type="button" class="changeTopBarColor" data-color="dark2"></button>
<button type="button" class="selected changeTopBarColor" data-color="blue2"></button>
<button type="button" class="changeTopBarColor" data-color="purple2"></button>
<button type="button" class="changeTopBarColor" data-color="light-blue2"></button>
<button type="button" class="changeTopBarColor" data-color="green2"></button>
<button type="button" class="changeTopBarColor" data-color="orange2"></button>
<button type="button" class="changeTopBarColor" data-color="red2"></button>
</div>
</div>
<div class="switch-block">
<h4>目录</h4>
<div class="btnSwitch">
<button type="button" class="selected changeSideBarColor" data-color="white"></button>
<button type="button" class="changeSideBarColor" data-color="dark"></button>
<button type="button" class="changeSideBarColor" data-color="dark2"></button>
</div>
</div>
<div class="switch-block">
<h4>背景</h4>
<div class="btnSwitch">
<button type="button" class="changeBackgroundColor" data-color="bg2"></button>
<button type="button" class="changeBackgroundColor selected" data-color="bg1"></button>
<button type="button" class="changeBackgroundColor" data-color="bg3"></button>
<button type="button" class="changeBackgroundColor" data-color="dark"></button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
| 
发表于 2020-1-7 09:38
|
发表于 2020-1-7 10:02
