使用 CSS flex 居中对齐元素
Centre aligning elements with CSS flex
我已经使用 flex 设置了我的代码,以便它可以响应地工作(它正在寻找我希望在宽度小于 960 的设备上的方式,因此对桌面的任何更改都发生在底部的 css 查询中我的 CSS 文件)。可能是一个非常简单的问题,但在大于 960 的视图中,8 个图块的宽度不一致(一个 .row
包含 4 个 .tile
s)——我尝试添加 25% 的宽度,我认为这会使它们总是均匀地跨越页面的宽度,但这没有用。其中 .content
(扩展内容)似乎进一步扩展了我无法理解的右侧行?
如有任何想法,我们将不胜感激!
工作fiddle:https://jsfiddle.net/simoncunningham/zsLxuo26/7/
如有任何建议,我们将不胜感激!
<div class="box">
<div class="tile" onclick="openTab('b1');">
<img class="icon-spacing" src="./Icons/Banking.svg" />
<p>Banking</p>
<img class="arrow-down" src="./Icons/arrow-down.png" />
</div>
<div id="b1" class="content" style="display: none; background: black">
<span onclick="this.parentElement.style.display='none'" class="closebtn"
>×</span
>
<div class="description">
<h3>Banking</h3>
<p>
The largest category covering investment and management platforms,
sales and trading analysis toosl, personal finance management &
crypto exchanges.
</p>
<ul>
<li>Personal Finance Management (PFM)</li>
<li>Investment Data and Information Services</li>
<li>Trading and Investment Platforms</li>
<li>WealthTech Operations</li>
<li>Distributed Ledger Technologies & Cryptocurrencies</li>
<li>Robo Advisors</li>
</ul>
</div>
</div>
<div class="tile" onclick="openTab('b2');">
<img class="icon-spacing" src="./Icons/RegTech.svg" />
<p>RegTech</p>
<img class="arrow-down" src="./Icons/arrow-down.png" />
</div>
<div id="b2" class="content" style="display: none; background: black">
<span onclick="this.parentElement.style.display='none'" class="closebtn"
>×</span
>
<div class="description">
<h3>RegTech</h3>
<p>
The largest category covering investment and management platforms,
sales and trading analysis toosl, personal finance management &
crypto exchanges.
</p>
<ul>
<li>Personal Finance Management (PFM)</li>
<li>Investment Data and Information Services</li>
<li>Trading and Investment Platforms</li>
<li>WealthTech Operations</li>
<li>Distributed Ledger Technologies & Cryptocurrencies</li>
<li>Robo Advisors</li>
</ul>
</div>
</div>
<div class="tile" onclick="openTab('b3');">
<img class="icon-spacing" src="./Icons/InsurTech.svg" />
<p>InsurTech</p>
<img class="arrow-down" src="./Icons/arrow-down.png" />
</div>
<div id="b3" class="content" style="display: none; background: black">
<span onclick="this.parentElement.style.display='none'" class="closebtn"
>×</span
>
<div class="description">
<h3>InsurTech</h3>
<p>
The largest category covering investment and management platforms,
sales and trading analysis toosl, personal finance management &
crypto exchanges.
</p>
<ul>
<li>Personal Finance Management (PFM)</li>
<li>Investment Data and Information Services</li>
<li>Trading and Investment Platforms</li>
<li>WealthTech Operations</li>
<li>Distributed Ledger Technologies & Cryptocurrencies</li>
<li>Robo Advisors</li>
</ul>
</div>
</div>
<div class="tile" onclick="openTab('b4');">
<img class="icon-spacing" src="./Icons/Lending.svg" />
<p>Lending</p>
<img class="arrow-down" src="./Icons/arrow-down.png" />
</div>
<div id="b4" class="content" style="display: none; background: black">
<span onclick="this.parentElement.style.display='none'" class="closebtn"
>×</span
>
<div class="description">
<h3>Lending</h3>
<p>
The largest category covering investment and management platforms,
sales and trading analysis toosl, personal finance management &
crypto exchanges.
</p>
<ul>
<li>Personal Finance Management (PFM)</li>
<li>Investment Data and Information Services</li>
<li>Trading and Investment Platforms</li>
<li>WealthTech Operations</li>
<li>Distributed Ledger Technologies & Cryptocurrencies</li>
<li>Robo Advisors</li>
</ul>
</div>
</div>
</div>
<div class="box">
<div class="tile" onclick="openTab('b5');">
<img class="icon-spacing" src="./Icons/Accounting.svg" />
<p>Accounting</p>
<img class="arrow-down" src="./Icons/arrow-down.png" />
</div>
<div id="b5" class="content" style="display: none; background: black">
<span onclick="this.parentElement.style.display='none'" class="closebtn"
>×</span
>
<div class="description">
<h3>Accounting</h3>
<p>
The largest category covering investment and management platforms,
sales and trading analysis toosl, personal finance management &
crypto exchanges.
</p>
<ul>
<li>Personal Finance Management (PFM)</li>
<li>Investment Data and Information Services</li>
<li>Trading and Investment Platforms</li>
<li>WealthTech Operations</li>
<li>Distributed Ledger Technologies & Cryptocurrencies</li>
<li>Robo Advisors</li>
</ul>
</div>
</div>
<div class="tile" onclick="openTab('b6');">
<img class="icon-spacing" src="./Icons/Payments.svg" />
<p>Payments</p>
<img class="arrow-down" src="./Icons/arrow-down.png" />
</div>
<div id="b6" class="content" style="display: none; background: black">
<span onclick="this.parentElement.style.display='none'" class="closebtn"
>×</span
>
<div class="description">
<h3>Payments</h3>
<p>
The largest category covering investment and management platforms,
sales and trading analysis toosl, personal finance management &
crypto exchanges.
</p>
<ul>
<li>Personal Finance Management (PFM)</li>
<li>Investment Data and Information Services</li>
<li>Trading and Investment Platforms</li>
<li>WealthTech Operations</li>
<li>Distributed Ledger Technologies & Cryptocurrencies</li>
<li>Robo Advisors</li>
</ul>
</div>
</div>
<div class="tile" onclick="openTab('b7');">
<img class="icon-spacing" src="./Icons/Quote.svg" />
<p>Quote</p>
<img class="arrow-down" src="./Icons/arrow-down.png" />
</div>
<div id="b7" class="content" style="display: none; background: black">
<span onclick="this.parentElement.style.display='none'" class="closebtn"
>×</span
>
<div class="description">
<h3>Quote</h3>
<p>
The largest category covering investment and management platforms,
sales and trading analysis toosl, personal finance management &
crypto exchanges.
</p>
<ul>
<li>Personal Finance Management (PFM)</li>
<li>Investment Data and Information Services</li>
<li>Trading and Investment Platforms</li>
<li>WealthTech Operations</li>
<li>Distributed Ledger Technologies & Cryptocurrencies</li>
<li>Robo Advisors</li>
</ul>
</div>
</div>
<div class="tile" onclick="openTab('b8');">
<img class="icon-spacing" src="./Icons/WealthTech.svg" />
<p>WealthTech</p>
<img class="arrow-down" src="./Icons/arrow-down.png" />
</div>
<div id="b8" class="content" style="display: none; background: black">
<span onclick="this.parentElement.style.display='none'" class="closebtn"
>×</span
>
<div class="description">
<h3>WealthTech</h3>
<p>
The largest category covering investment and management platforms,
sales and trading analysis toosl, personal finance management &
crypto exchanges.
</p>
<ul>
<li>Personal Finance Management (PFM)</li>
<li>Investment Data and Information Services</li>
<li>Trading and Investment Platforms</li>
<li>WealthTech Operations</li>
<li>Distributed Ledger Technologies & Cryptocurrencies</li>
<li>Robo Advisors</li>
</ul>
</div>
</div>
</div>
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.box {
display: flex;
flex-wrap: wrap;
flex-direction: row;
}
.tile {
flex: 1 0 auto;
order: 0;
/* For visual only */
background-color: black;
border: 1px solid grey;
height: 150px;
text-align: center;
font-size: 16px;
color: white;
cursor: pointer;
}
.active-tile {
flex: 1 0 auto;
order: 0;
/* For visual only */
text-align: center;
border: 1px solid #000;
background-color: green;
height: 125px;
cursor: pointer;
}
.content {
order: 1;
flex: 1 0 100%;
/* For visual only */
padding: 20px;
color: white;
text-align: center;
border: 1px solid #000;
background-color: #228b22;
}
.description {
text-align: left;
}
.icon-spacing {
margin-top: 24px;
}
/* Clear floats after the tiles */
.box:after {
content: '';
display: table;
clear: both;
}
.closebtn {
float: right;
color: white;
cursor: pointer;
}
.arrow-down {
width: 25px;
height: 25px;
}
.arrow-up {
width: 25px;
height: 25px;
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}
/*
"Desktop" and above
*/
@media (max-width: 961px) {
.box {
flex-direction: column;
}
.content {
order: 0;
}
}
function openTab(tabName) {
var i, x;
x = document.getElementsByClassName('content');
for (i = 0; i < x.length; i++) {
x[i].style.display = 'none';
}
document.getElementById(tabName).style.display = 'block';
// Get all the tabs into a collection
// (don't use .getElementsByClassName()!)
let tabs = document.querySelectorAll('.tile');
// Set up a click event handler on each of the tabs
tabs.forEach(function (tab) {
tab.addEventListener('click', function (event) {
// Loop over all the tabs and remove the active class
tabs.forEach(function (tab) {
tab.classList.remove('active-tile');
tab.children[2].classList.remove('arrow-up');
});
// Set the background of the clicked tab
this.classList.add('active-tile');
tab.children[2].classList.add('arrow-up');
});
});
}
尝试将以下内容添加到“.tile”class:flex-basis: 20%;
您的问题(当您尝试 width: 25%
在图块上时)是计算 100% 时没有考虑边框和填充。
.tile
的边框是 1px
,所以 25% * 4 + 8 * 1px
大于 100%
.
.content
的边框为 1px
,填充为 20px
,因此 100% + 2 * 1px + 2 * 20px
大于 100%
。
要解决此问题,您可以通过在分配宽度时包括边框和填充来更改框的计算方式:
.tile, .content {
box-sizing: border-box;
}
.tile {
width: 25%;
}
您可以在 MDN documentation page 上了解有关 box-sizing
及其值的更多信息。
我已经使用 flex 设置了我的代码,以便它可以响应地工作(它正在寻找我希望在宽度小于 960 的设备上的方式,因此对桌面的任何更改都发生在底部的 css 查询中我的 CSS 文件)。可能是一个非常简单的问题,但在大于 960 的视图中,8 个图块的宽度不一致(一个 .row
包含 4 个 .tile
s)——我尝试添加 25% 的宽度,我认为这会使它们总是均匀地跨越页面的宽度,但这没有用。其中 .content
(扩展内容)似乎进一步扩展了我无法理解的右侧行?
如有任何想法,我们将不胜感激!
工作fiddle:https://jsfiddle.net/simoncunningham/zsLxuo26/7/
如有任何建议,我们将不胜感激!
<div class="box">
<div class="tile" onclick="openTab('b1');">
<img class="icon-spacing" src="./Icons/Banking.svg" />
<p>Banking</p>
<img class="arrow-down" src="./Icons/arrow-down.png" />
</div>
<div id="b1" class="content" style="display: none; background: black">
<span onclick="this.parentElement.style.display='none'" class="closebtn"
>×</span
>
<div class="description">
<h3>Banking</h3>
<p>
The largest category covering investment and management platforms,
sales and trading analysis toosl, personal finance management &
crypto exchanges.
</p>
<ul>
<li>Personal Finance Management (PFM)</li>
<li>Investment Data and Information Services</li>
<li>Trading and Investment Platforms</li>
<li>WealthTech Operations</li>
<li>Distributed Ledger Technologies & Cryptocurrencies</li>
<li>Robo Advisors</li>
</ul>
</div>
</div>
<div class="tile" onclick="openTab('b2');">
<img class="icon-spacing" src="./Icons/RegTech.svg" />
<p>RegTech</p>
<img class="arrow-down" src="./Icons/arrow-down.png" />
</div>
<div id="b2" class="content" style="display: none; background: black">
<span onclick="this.parentElement.style.display='none'" class="closebtn"
>×</span
>
<div class="description">
<h3>RegTech</h3>
<p>
The largest category covering investment and management platforms,
sales and trading analysis toosl, personal finance management &
crypto exchanges.
</p>
<ul>
<li>Personal Finance Management (PFM)</li>
<li>Investment Data and Information Services</li>
<li>Trading and Investment Platforms</li>
<li>WealthTech Operations</li>
<li>Distributed Ledger Technologies & Cryptocurrencies</li>
<li>Robo Advisors</li>
</ul>
</div>
</div>
<div class="tile" onclick="openTab('b3');">
<img class="icon-spacing" src="./Icons/InsurTech.svg" />
<p>InsurTech</p>
<img class="arrow-down" src="./Icons/arrow-down.png" />
</div>
<div id="b3" class="content" style="display: none; background: black">
<span onclick="this.parentElement.style.display='none'" class="closebtn"
>×</span
>
<div class="description">
<h3>InsurTech</h3>
<p>
The largest category covering investment and management platforms,
sales and trading analysis toosl, personal finance management &
crypto exchanges.
</p>
<ul>
<li>Personal Finance Management (PFM)</li>
<li>Investment Data and Information Services</li>
<li>Trading and Investment Platforms</li>
<li>WealthTech Operations</li>
<li>Distributed Ledger Technologies & Cryptocurrencies</li>
<li>Robo Advisors</li>
</ul>
</div>
</div>
<div class="tile" onclick="openTab('b4');">
<img class="icon-spacing" src="./Icons/Lending.svg" />
<p>Lending</p>
<img class="arrow-down" src="./Icons/arrow-down.png" />
</div>
<div id="b4" class="content" style="display: none; background: black">
<span onclick="this.parentElement.style.display='none'" class="closebtn"
>×</span
>
<div class="description">
<h3>Lending</h3>
<p>
The largest category covering investment and management platforms,
sales and trading analysis toosl, personal finance management &
crypto exchanges.
</p>
<ul>
<li>Personal Finance Management (PFM)</li>
<li>Investment Data and Information Services</li>
<li>Trading and Investment Platforms</li>
<li>WealthTech Operations</li>
<li>Distributed Ledger Technologies & Cryptocurrencies</li>
<li>Robo Advisors</li>
</ul>
</div>
</div>
</div>
<div class="box">
<div class="tile" onclick="openTab('b5');">
<img class="icon-spacing" src="./Icons/Accounting.svg" />
<p>Accounting</p>
<img class="arrow-down" src="./Icons/arrow-down.png" />
</div>
<div id="b5" class="content" style="display: none; background: black">
<span onclick="this.parentElement.style.display='none'" class="closebtn"
>×</span
>
<div class="description">
<h3>Accounting</h3>
<p>
The largest category covering investment and management platforms,
sales and trading analysis toosl, personal finance management &
crypto exchanges.
</p>
<ul>
<li>Personal Finance Management (PFM)</li>
<li>Investment Data and Information Services</li>
<li>Trading and Investment Platforms</li>
<li>WealthTech Operations</li>
<li>Distributed Ledger Technologies & Cryptocurrencies</li>
<li>Robo Advisors</li>
</ul>
</div>
</div>
<div class="tile" onclick="openTab('b6');">
<img class="icon-spacing" src="./Icons/Payments.svg" />
<p>Payments</p>
<img class="arrow-down" src="./Icons/arrow-down.png" />
</div>
<div id="b6" class="content" style="display: none; background: black">
<span onclick="this.parentElement.style.display='none'" class="closebtn"
>×</span
>
<div class="description">
<h3>Payments</h3>
<p>
The largest category covering investment and management platforms,
sales and trading analysis toosl, personal finance management &
crypto exchanges.
</p>
<ul>
<li>Personal Finance Management (PFM)</li>
<li>Investment Data and Information Services</li>
<li>Trading and Investment Platforms</li>
<li>WealthTech Operations</li>
<li>Distributed Ledger Technologies & Cryptocurrencies</li>
<li>Robo Advisors</li>
</ul>
</div>
</div>
<div class="tile" onclick="openTab('b7');">
<img class="icon-spacing" src="./Icons/Quote.svg" />
<p>Quote</p>
<img class="arrow-down" src="./Icons/arrow-down.png" />
</div>
<div id="b7" class="content" style="display: none; background: black">
<span onclick="this.parentElement.style.display='none'" class="closebtn"
>×</span
>
<div class="description">
<h3>Quote</h3>
<p>
The largest category covering investment and management platforms,
sales and trading analysis toosl, personal finance management &
crypto exchanges.
</p>
<ul>
<li>Personal Finance Management (PFM)</li>
<li>Investment Data and Information Services</li>
<li>Trading and Investment Platforms</li>
<li>WealthTech Operations</li>
<li>Distributed Ledger Technologies & Cryptocurrencies</li>
<li>Robo Advisors</li>
</ul>
</div>
</div>
<div class="tile" onclick="openTab('b8');">
<img class="icon-spacing" src="./Icons/WealthTech.svg" />
<p>WealthTech</p>
<img class="arrow-down" src="./Icons/arrow-down.png" />
</div>
<div id="b8" class="content" style="display: none; background: black">
<span onclick="this.parentElement.style.display='none'" class="closebtn"
>×</span
>
<div class="description">
<h3>WealthTech</h3>
<p>
The largest category covering investment and management platforms,
sales and trading analysis toosl, personal finance management &
crypto exchanges.
</p>
<ul>
<li>Personal Finance Management (PFM)</li>
<li>Investment Data and Information Services</li>
<li>Trading and Investment Platforms</li>
<li>WealthTech Operations</li>
<li>Distributed Ledger Technologies & Cryptocurrencies</li>
<li>Robo Advisors</li>
</ul>
</div>
</div>
</div>
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.box {
display: flex;
flex-wrap: wrap;
flex-direction: row;
}
.tile {
flex: 1 0 auto;
order: 0;
/* For visual only */
background-color: black;
border: 1px solid grey;
height: 150px;
text-align: center;
font-size: 16px;
color: white;
cursor: pointer;
}
.active-tile {
flex: 1 0 auto;
order: 0;
/* For visual only */
text-align: center;
border: 1px solid #000;
background-color: green;
height: 125px;
cursor: pointer;
}
.content {
order: 1;
flex: 1 0 100%;
/* For visual only */
padding: 20px;
color: white;
text-align: center;
border: 1px solid #000;
background-color: #228b22;
}
.description {
text-align: left;
}
.icon-spacing {
margin-top: 24px;
}
/* Clear floats after the tiles */
.box:after {
content: '';
display: table;
clear: both;
}
.closebtn {
float: right;
color: white;
cursor: pointer;
}
.arrow-down {
width: 25px;
height: 25px;
}
.arrow-up {
width: 25px;
height: 25px;
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}
/*
"Desktop" and above
*/
@media (max-width: 961px) {
.box {
flex-direction: column;
}
.content {
order: 0;
}
}
function openTab(tabName) {
var i, x;
x = document.getElementsByClassName('content');
for (i = 0; i < x.length; i++) {
x[i].style.display = 'none';
}
document.getElementById(tabName).style.display = 'block';
// Get all the tabs into a collection
// (don't use .getElementsByClassName()!)
let tabs = document.querySelectorAll('.tile');
// Set up a click event handler on each of the tabs
tabs.forEach(function (tab) {
tab.addEventListener('click', function (event) {
// Loop over all the tabs and remove the active class
tabs.forEach(function (tab) {
tab.classList.remove('active-tile');
tab.children[2].classList.remove('arrow-up');
});
// Set the background of the clicked tab
this.classList.add('active-tile');
tab.children[2].classList.add('arrow-up');
});
});
}
尝试将以下内容添加到“.tile”class:flex-basis: 20%;
您的问题(当您尝试 width: 25%
在图块上时)是计算 100% 时没有考虑边框和填充。
.tile
的边框是1px
,所以25% * 4 + 8 * 1px
大于100%
..content
的边框为1px
,填充为20px
,因此100% + 2 * 1px + 2 * 20px
大于100%
。
要解决此问题,您可以通过在分配宽度时包括边框和填充来更改框的计算方式:
.tile, .content {
box-sizing: border-box;
}
.tile {
width: 25%;
}
您可以在 MDN documentation page 上了解有关 box-sizing
及其值的更多信息。