有关HTML/CSS:居中对齐标签的问题?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (164)

下面的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>

提问于
用户回答回答于

居中标签!

<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>
用户回答回答于

这是我的效果:https://css-tricks.com/snippets/css/a-guide-to-flexbox/。

我添加了一些holders和一些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>

扫码关注云+社区

领取腾讯云代金券