使自定义HTML对象居中
使自定义HTML对象居中
提问于 2020-10-13 02:08:36
我得到了一个自定义的HTML-object，并且我尝试将类放在中心的每一种方法都失败了。有谁有主意吗？致以亲切的问候。
我试过了。其他对象居中，只有这个对象不居中。我尝试了边距: 0px auto。我试过了。我的自定义对象保持左对齐。我想可能有一个属性
.switch-mode {
display: flex;
margin-bottom: 36px;
overflow: hidden;
}
.switch-mode input {
position: absolute !important;
clip: rect(0, 0, 0, 0);
height: 1px;
width: 1px;
border: 0;
overflow: hidden;
}
.switch-mode label {
background-color: #e4e4e4;
color: rgba(0, 0, 0, 0.6);
font-size: 14px;
line-height: 1;
text-align: center;
padding: 8px 16px;
margin-right: -1px;
border: 1px solid rgba(0, 0, 0, 0.2);
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1);
transition: all 0.1s ease-in-out;
}
.switch-mode label:hover {
cursor: pointer;
}
.switch-mode input:checked+label {
background-color: #C23434;
box-shadow: none;
}
.switch-mode label:first-of-type {
border-radius: 4px 0 0 4px;
}
.switch-mode label:last-of-type {
border-radius: 0 4px 4px 0;
}<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="switch-mode">
<input type="radio" id="radio-open" name="mode" />
<label for="radio-open">OPEN</label>
<input type="radio" id="radio-auto" name="mode" />
<label for="radio-auto">AUTO</label>
<input type="radio" id="radio-close" name="mode" />
<label for="radio-close">CLOSE</label>
</div>
</body>
</html>
回答 2
Stack Overflow用户
发布于 2020-10-13 02:12:53
需要居中的是容器，而不是容器中的项。添加的是.switch-mode类中的justify-content: center;。
.switch-mode {
display: flex;
margin-bottom: 36px;
overflow: hidden;
justify-content: center;
}
.switch-mode input {
position: absolute !important;
clip: rect(0, 0, 0, 0);
height: 1px;
width: 1px;
border: 0;
overflow: hidden;
}
.switch-mode label {
background-color: #e4e4e4;
color: rgba(0, 0, 0, 0.6);
font-size: 14px;
line-height: 1;
text-align: center;
padding: 8px 16px;
margin-right: -1px;
border: 1px solid rgba(0, 0, 0, 0.2);
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1);
transition: all 0.1s ease-in-out;
}
.switch-mode label:hover {
cursor: pointer;
}
.switch-mode input:checked+label {
background-color: #C23434;
box-shadow: none;
}
.switch-mode label:first-of-type {
border-radius: 4px 0 0 4px;
}
.switch-mode label:last-of-type {
border-radius: 0 4px 4px 0;
}<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="switch-mode">
<input type="radio" id="radio-open" name="mode" />
<label for="radio-open">OPEN</label>
<input type="radio" id="radio-auto" name="mode" />
<label for="radio-auto">AUTO</label>
<input type="radio" id="radio-close" name="mode" />
<label for="radio-close">CLOSE</label>
</div>
</body>
</html>
Stack Overflow用户
发布于 2020-10-13 02:14:27
在.switch-mode上，您已经使用了flex布局。因此，在.switch-mode类上添加justify-content: center，它将在中心位置对齐。
.switch-mode {
display: flex;
margin-bottom: 36px;
overflow: hidden;
justify-content: center;
}
.switch-mode input {
position: absolute !important;
clip: rect(0, 0, 0, 0);
height: 1px;
width: 1px;
border: 0;
overflow: hidden;
}
.switch-mode label {
background-color: #e4e4e4;
color: rgba(0, 0, 0, 0.6);
font-size: 14px;
line-height: 1;
text-align: center;
padding: 8px 16px;
margin-right: -1px;
border: 1px solid rgba(0, 0, 0, 0.2);
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1);
transition: all 0.1s ease-in-out;
}
.switch-mode label:hover {
cursor: pointer;
}
.switch-mode input:checked+label {
background-color: #C23434;
box-shadow: none;
}
.switch-mode label:first-of-type {
border-radius: 4px 0 0 4px;
}
.switch-mode label:last-of-type {
border-radius: 0 4px 4px 0;
}<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="switch-mode">
<input type="radio" id="radio-open" name="mode" />
<label for="radio-open">OPEN</label>
<input type="radio" id="radio-auto" name="mode" />
<label for="radio-auto">AUTO</label>
<input type="radio" id="radio-close" name="mode" />
<label for="radio-close">CLOSE</label>
</div>
</body>
</html>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/64323149
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号