0
私はW3Schoolからこの垂直タブチュートリアルを試みました。私は自分のウェブサイトに同じ方法を適用したいと思います。とにかく、幅のサイズを小さくした後、ページの中央に縦のタブを配置することはできません。コードの先頭にdivを追加しようとしましたが、divを中心に位置合わせしようとしましたが、それでもやりませんでした。HTML、CSS - 垂直タブを中央に合わせる
これに助けが必要です。
function openTest(evt, testName) {
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(testName).style.display = "block";
evt.currentTarget.className += " active";
}
document.getElementById("defaultOpen").click();body {
background-color: #d62929;
font-family: Verdana, sans-serif;
margin: 0;
}
.ul1 {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: whitesmoke;
font-weight: bold;
font-size: 18px;
}
.li1 {
float: left;
}
.li1 a,
.dropbtn {
display: inline-block;
color: black;
text-align: center;
padding: 22px 30px;
text-decoration: none;
}
.li1 a:hover,
.dropdown:hover .dropbtn {
background-color: #c12525;
color: white;
}
.li1.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: whitesmoke;
min-width: 250px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 20px 20px;
text-decoration: none;
display: block;
text-align: left;
font-size: 15px;
}
.dropdown-content a:hover {
background-color: #c12525;
}
.dropdown:hover .dropdown-content {
display: block;
}
.active {
background-color: #d62929;
color: white;
font-weight: bold;
font-size: 18px;
}
@media screen and (max-width: 600px) {
ul1 li1,
ul1 li1 {
float: none;
}
}
/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
footer {
-webkit-order: 3;
order: 3;
}
}
footer {
background: #aaa;
color: #fff;
text-align: center;
padding: 1rem;
clear: both;
/* clearing floating affects from both left,right sides */
}
.footp {
margin: 0;
padding: 0;
margin-left: 20px;
display: inline-block;
line-height: 30px;
vertical-align: top;
}
/* Style the tab */
div.tab {
float: left;
border: 1px solid #ccc;
background-color: #f1f1f1;
width: 30%;
height: 300px;
}
/* Style the buttons inside the tab */
div.tab button {
display: block;
background-color: inherit;
color: black;
padding: 22px 16px;
width: 100%;
border: none;
outline: none;
text-align: left;
cursor: pointer;
transition: 0.3s;
font-size: 17px;
}
/* Change background color of buttons on hover */
div.tab button:hover {
background-color: #ddd;
}
/* Create an active/current "tab button" class */
div.tab button.active {
background-color: #ccc;
}
/* Style the tab content */
.tabcontent {
float: inherit;
padding: 0px 12px;
border: 1px solid #ccc;
width: 90%;
border-left: none;
height: 320px;
}
.align {
display: inline-block;
}<div class="flex-container">
<ul class="ul1">
<li class="li1"><a class="active" href="home.html">Home</a></li>
<li class="dropdown li1">
<a href="javascript:void(0)" class="dropbtn">Study</a>
<div class="dropdown-content">
<a href="mainFrame.html">Conduct Study</a>
<a href="report.html">Reports</a>
</div>
</li>
<li class="li1"><a href="contact.html">Contact</a></li>
</ul>
<br /><br /><br /><br /><br /><br />
<div class="tab">
<button class="tablinks" onclick="openTest(event, 'Full')" id="defaultOpen">Full</button>
<button class="tablinks" onclick="openTest(event, 'QRC')">QRC</button>
<button class="tablinks" onclick="openTest(event, 'Cold')">Cold</button>
<button class="tablinks" onclick="openTest(event, 'Hot')">Hot</button>
<button class="tablinks" onclick="openTest(event, 'Room')"> Room</button>
</div>
<div id="Full" class="tabcontent">
<h3>Full</h3>
<p>Test</p>
<ul class="align">
<li>A</li>
<li>B</li>
<li>C</li>
</ul>
</div>
<div id="QRC" class="tabcontent">
<h3>QRC</h3>
<p>Test</p>
<ul class="align">
<li>A</li>
<li>B</li>
<li>C</li>
</ul>
</div>
<div id="Cold" class="tabcontent">
<h3>Cold</h3>
<p>Test</p>
<ul class="align">
<li>A</li>
<li>B</li>
<li>C</li>
</ul>
</div>
<div id="Hot" class="tabcontent">
<h3>Hot</h3>
<p>Test</p>
<ul class="align">
<li>A</li>
<li>B</li>
<li>C</li>
</ul>
</div>
<div id="Room" class="tabcontent">
<h3>Room</h3>
<p>Test</p>
<ul class="align">
<li>A</li>
<li>B</li>
<li>C</li>
</ul>
</div>
<br /><br /><br /><br /><br /><br />
<div>
<footer>
<p class="footp">©All rights reserved.</p>
<p class="footp">|</p>
<p class="footp">Internal Use Only</p>
<p class="footp">|</p>
<p class="footp">Maintained By</p>
</footer>
</div>
何をセンターにしたいですか？私はあなたの質問から理解できませんでした。 '.tab'クラスの' div'は？ –
に同意する、質問が明確でない – godblessstrawberry
@AnuragDaolagajaoはい、正しい。私は垂直のタブ全体を中央に置きたい。 – cerberus99