首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何使password和username选项卡相互居中

要使password和username选项卡相互居中,可以使用CSS和HTML来实现。以下是一种常见的实现方式:

HTML结构:

代码语言:txt
复制
<div class="login-form">
  <div class="tab">
    <button class="tablinks active" onclick="openTab(event, 'username')">Username</button>
    <button class="tablinks" onclick="openTab(event, 'password')">Password</button>
  </div>
  
  <div id="username" class="tabcontent">
    <!-- Username表单内容 -->
  </div>
  
  <div id="password" class="tabcontent">
    <!-- Password表单内容 -->
  </div>
</div>

CSS样式:

代码语言:txt
复制
.login-form {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.tab {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}

.tablinks {
  background-color: #ccc;
  border: none;
  color: #000;
  padding: 10px 20px;
  cursor: pointer;
}

.tablinks.active {
  background-color: #aaa;
  color: #fff;
}

.tabcontent {
  display: none;
  padding: 20px;
  border: 1px solid #ccc;
}

.tabcontent.show {
  display: block;
}

JavaScript代码:

代码语言:txt
复制
function openTab(evt, tabName) {
  var i, tabcontent, tablinks;
  
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }
  
  document.getElementById(tabName).style.display = "block";
  evt.currentTarget.className += " active";
}

这段代码使用了flex布局来实现居中对齐。通过设置父容器.login-formdisplay: flex;align-items: center;,可以使其子元素在垂直方向上居中对齐。同时,通过设置.tabdisplay: flex;justify-content: center;,可以使选项卡按钮在水平方向上居中对齐。

点击选项卡按钮时,通过JavaScript的openTab函数来切换显示对应的表单内容。通过添加或移除CSS类名来控制选项卡按钮的样式。

这种实现方式适用于各种登录或注册页面,可以提供良好的用户体验。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

没有搜到相关的视频

领券