问题:下面的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>
https://stackoverflow.com/questions/51368707
复制相似问题