HTML/CSS:居中对齐选项卡
HTML/CSS:居中对齐选项卡
提问于 2018-07-17 03:16:00
问题:下面的html/css可以很好地显示选项卡，但我想让它们居中对齐。我尝试了各种方法，但它们仍然向左对齐。如何将三个制表符居中对齐并使它们保持在内联块中？非常感谢您的帮助，谢谢。
我还附上了一张图片以供参考。
main {
min-width: 320px;
max-width: 1000px;
padding: 50px;
margin: 0 auto;
background: #fff;
}
section {
display: none;
padding: 20px 0 0;
border-top: 1px solid #ddd;
}
.tabs {
display: none;
width: 100%;
margin: 0 auto;
}
label {
display: inline-block;
margin: 0 auto;
padding: 15px 25px;
text-align: center;
color: #bbb;
}
label[for*='1']:before {
content: ;
}
label[for*='2']:before {
content: ;
}
label[for*='3']:before {
content: ;
}
label:hover {
color: #888;
cursor: pointer;
}
.tabs:checked+label {
color: #555;
border-bottom: 2px solid orange;
}
#tab1:checked~#content1,
#tab2:checked~#content2,
#tab3:checked~#content3 {
display: block;
}<main>
<input class="tabs" id="tab1" type="radio" name="tabs" checked>
<label for="tab1">Tab 1</label>
<input class="tabs" id="tab2" type="radio" name="tabs">
<label for="tab2">Tab 2</label>
<input class="tabs" id="tab3" type="radio" name="tabs">
<label for="tab3">Tab 3</label>
<section id="content1">
<img src="/images/autocode.jpeg" alt="Doctor Icon" class="key-modules-
innter-image" height="180" width="auto">
<h1 class="key-modules-inner-div-header">Tab 2</h1>
<p class="key-modules-inner-div-paragraph">random text will go here
</p>
<a href="/align-providers">
<button type="button" name="button" class="learn-button">Learn
more</button>
</a>
</section>
<section id="content2">
<img src="/images/autocode.jpeg" alt="Doctor Icon" class="key-modules-
innter-image" height="180" width="auto">
<h1 class="key-modules-inner-div-header">Tab 3</h1>
<p class="key-modules-inner-div-paragraph">random text will go here
</p>
<a href="/align-providers">
<button type="button" name="button" class="learn-button">Learn
more</button>
</a>
</section>
<section id="content3">
<img src="/images/autocode.jpeg" alt="Doctor Icon" class="key-modules-
innter-image" height="180" width="auto">
<h1 class="key-modules-inner-div-header">Tab 3</h1>
<p class="key-modules-inner-div-paragraph">random text will go here
</p>
<a href="/align-providers">
<button type="button" name="button" class="learn-button">Learn
more</button>
</a>
</section>
</main>
回答 3
Stack Overflow用户
发布于 2018-07-17 03:34:23
以下是我使用flexbox进行的测试。
我添加了一些属性和一些css代码
main {
min-width: 320px;
max-width: 1000px;
padding: 50px;
margin: 0 auto;
background: #fff;
}
section {
display: none;
padding: 20px 0 0;
border-top: 1px solid #ddd;
}
.tabs {
display: none;
margin: 0 auto;
}
label {
padding: 15px 25px;
text-align: center;
color: #bbb;
display: flex;
border: 1px solid blue;
align-self: center;
}
label[for*='1']:before {
content: ;
}
label[for*='2']:before {
content: ;
}
label[for*='3']:before {
content: ;
}
label:hover {
color: #888;
cursor: pointer;
}
.tabs-holder {
display: flex;
align-items: center;
flex-direction: column;
border: 1px solid red;
}
.tabs-grouper {
display: flex;
flex-direction: row;
border: 1px solid green;
}<div class="tabs-holder">
<div class="tabs-grouper">
<input class="tabs" id="tab1" type="radio" name="tabs" checked>
<label for="tab1">Tab 1</label>
<input class="tabs" id="tab2" type="radio" name="tabs">
<label for="tab2">Tab 2</label>
<input class="tabs" id="tab3" type="radio" name="tabs">
<label for="tab3">Tab 3</label>
</div>
</div>
Stack Overflow用户
发布于 2018-07-17 03:28:28
您可以将选项卡包装在一个div中，然后将包装器css设置为margin:auto和width:20%或其他使它们保持内联的设置。
Stack Overflow用户
发布于 2018-07-17 04:03:08
我使用总是好的作弊，居中标签！
<center>
<input class="tabs" id="tab1" type="radio" name="tabs" checked>
<label for="tab1">Tab 1</label>
<input class="tabs" id="tab2" type="radio" name="tabs">
<label for="tab2">Tab 2</label>
<input class="tabs" id="tab3" type="radio" name="tabs">
<label for="tab3">Tab 3</label>
</center>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51368707
复制相关文章
相似问题