我想在中间创建6个框并在其中显示一些功能。
我正在使用display: inline-flex，但由于无法正确对齐它们，因此最后一个方框似乎不合适。
我不想使用Bootstrap或任何其他框架，而是使用纯CSS制作。
我希望在居中的div中间对齐6个框。这是我尝试过的示例代码段
.center {
margin: auto;
width: 80%;
padding: 80px;
}
.flexi {
display: inline-flex;
}
.jebote {
border: 3px solid green;
}
.jebote5 {
border: 3px solid green;
}
.jebote6 {
border: 3px solid green;
}
.h1 {
}<div class="center">
<div class="flexi">
<div class="inline">
<div class="jebote">
<a href="#news"><img src="http://files.softicons.com/download/toolbar-icons/free-green-button-icons-by-aha-soft/png/40x40/theater%20symbol.png"/></a>
<p style="font-size: 20px;">Custome Software Solutions</p>
<p style="font-size:14px;">
Every business is unique and there is no “one-size-fits-all” when it
comes to technology solutions that drive growth and stand you out in
competitive market.
</p>
</div>
</div>
<div class="flexi">
<div class="inline">
<div class="jebote">
<a href="#news"><img src="http://files.softicons.com/download/toolbar-icons/free-green-button-icons-by-aha-soft/png/40x40/theater%20symbol.png"/></a>
<p style="font-size: 20px; ">Consulting and Strategy</p>
<p style="font-size:14px">
To develop efficient software and reduce the related costs, process
and technology consulting are essential and integral part of every
business strategy.
</p>
</div>
</div>
</div>
<div class="flexi">
<div class="inline">
<div class="jebote">
<a href="#news"><img src="http://files.softicons.com/download/toolbar-icons/free-green-button-icons-by-aha-soft/png/40x40/theater%20symbol.png"/></a>
<p style="font-size: 20px;">Design and Creative Work</p>
<p style="font-size: 14px;">
Design plays a key role in engaging visitors and converting them
into customers. We focus on creating memorable interactions through
our designs.
</p>
</div>
</div>
</div>
</div>
<!-- Bottom row cards-->
<div class="flexi">
<div class="inline">
<div class="jebote">
<a href="#news"><img src="http://files.softicons.com/download/toolbar-icons/free-green-button-icons-by-aha-soft/png/40x40/theater%20symbol.png"/></a>
<p style="font-size: 20px;">Mobile Applications</p>
<p style="font-size:14px;">
We like to think of the problem the app intends to solve, analyze
mobility context and create a mobile solution meeting that need and
satisfying user experience.
</p>
</div>
</div>
<div class="flexi">
<div class="inline">
<div class="jebote5">
<a href="#news"><img src="http://files.softicons.com/download/toolbar-icons/free-green-button-icons-by-aha-soft/png/40x40/theater%20symbol.png"/></a>
<p style="font-size: 20px;">Website Development</p>
<p style="font-size:14px">
Professional, responsive, engaging and value driven web sites are
true support to every business. They help engage the customers and
gain an edge over the competitors.
</p>
</div>
</div>
</div>
<div class="flexi">
<div class="inline">
<div class="jebote6">
<a href="#news"><img src="http://files.softicons.com/download/toolbar-icons/free-green-button-icons-by-aha-soft/png/40x40/theater%20symbol.png"/></a>
<p style="font-size: 20px;">E-Commerce Development</p>
<p style="font-size: 14px;">
Building intuitive, useful, secure and accessible e-Commerce
solutions that power the transactions and digital experience is
important to us..
</p>
</div>
</div>
</div>
</div>
</div>
答案 0 :(得分：2)
如果不需要，您不应将所有内容都包裹在太多的html标签中，请保持其整洁和可读性。
此外，如果为边框添加类“ jebote”，则只需创建一次，然后将类“ jebote”添加到要应用边框的元素中。再次，这将使其保持干净和可读性。
尽管下面是我的解决方案，但我强烈建议您阅读本指南： https://css-tricks.com/snippets/css/a-guide-to-flexbox/
<style>
.center {
margin: auto;
width: 80%;
padding: 80px;
}
.flex-row {
display: flex;
}
.jebote {
border: 2px solid green;
}
</style>
<div class="center">
<div class="flex-row">
<div class="jebote">
<a href="#news">
<img src="http://files.softicons.com/download/toolbar-icons/free-green-button-icons-by-aha-soft/png/40x40/theater%20symbol.png"/>
</a>
<p style="font-size: 20px;">Custome Software Solutions</p>
<p style="font-size:14px;">Every business is unique and there is no “one-size-fits-all” when itcomes to technology solutions that drive growth and stand you out incompetitive market.</p>
</div>
<div class="jebote">
<a href="#news">
<img src="http://files.softicons.com/download/toolbar-icons/free-green-button-icons-by-aha-soft/png/40x40/theater%20symbol.png"/>
</a>
<p style="font-size: 20px;">Custome Software Solutions</p>
<p style="font-size:14px;">Every business is unique and there is no “one-size-fits-all” when itcomes to technology solutions that drive growth and stand you out incompetitive market.</p>
</div>
<div class="jebote">
<a href="#news">
<img src="http://files.softicons.com/download/toolbar-icons/free-green-button-icons-by-aha-soft/png/40x40/theater%20symbol.png"/>
</a>
<p style="font-size: 20px;">Custome Software Solutions</p>
<p style="font-size:14px;">Every business is unique and there is no “one-size-fits-all” when itcomes to technology solutions that drive growth and stand you out incompetitive market.</p>
</div>
</div>
<div class="flex-row">
<div class="jebote">
<a href="#news">
<img src="http://files.softicons.com/download/toolbar-icons/free-green-button-icons-by-aha-soft/png/40x40/theater%20symbol.png"/>
</a>
<p style="font-size: 20px;">Custome Software Solutions</p>
<p style="font-size:14px;">Every business is unique and there is no “one-size-fits-all” when itcomes to technology solutions that drive growth and stand you out incompetitive market.</p>
</div> <div class="jebote">
<a href="#news">
<img src="http://files.softicons.com/download/toolbar-icons/free-green-button-icons-by-aha-soft/png/40x40/theater%20symbol.png"/>
</a>
<p style="font-size: 20px;">Custome Software Solutions</p>
<p style="font-size:14px;">Every business is unique and there is no “one-size-fits-all” when itcomes to technology solutions that drive growth and stand you out incompetitive market.</p>
</div>
<div class="jebote">
<a href="#news">
<img src="http://files.softicons.com/download/toolbar-icons/free-green-button-icons-by-aha-soft/png/40x40/theater%20symbol.png"/>
</a>
<p style="font-size: 20px;">Custome Software Solutions</p>
<p style="font-size:14px;">Every business is unique and there is no “one-size-fits-all” when itcomes to technology solutions that drive growth and stand you out incompetitive market.</p>
</div>
</div>
</div>
答案 1 :(得分：2)
这是另一种解决方案，但是使用CSS Grid可以清除html。
这里的关键部分是这一行grid-template-columns: repeat(3, 1fr);，它告诉网格我们要3列，每列应使用相同的空间1fr（可用空间的一小部分）
.center {
margin: auto;
width: 80%;
padding: 80px;
display: grid;
grid-template-columns: repeat(3, 1fr);
}
.flexi {
border: 3px solid green;
} <div class="center">
<div class="flexi">
<a href="#news"><img src="http://files.softicons.com/download/toolbar-icons/free-green-button-icons-by-aha-soft/png/40x40/theater%20symbol.png" /></a>
<p style="font-size: 20px;">Custome Software Solutions</p>
<p style="font-size:14px;">
Every business is unique and there is no “one-size-fits-all” when it
comes to technology solutions that drive growth and stand you out in
competitive market.
</p>
</div>
<div class="flexi">
<a href="#news"><img src="http://files.softicons.com/download/toolbar-icons/free-green-button-icons-by-aha-soft/png/40x40/theater%20symbol.png" /></a>
<p style="font-size: 20px; ">Consulting and Strategy</p>
<p style="font-size:14px">
To develop efficient software and reduce the related costs, process
and technology consulting are essential and integral part of every
business strategy.
</p>
</div>
<div class="flexi">
<a href="#news"><img src="http://files.softicons.com/download/toolbar-icons/free-green-button-icons-by-aha-soft/png/40x40/theater%20symbol.png" /></a>
<p style="font-size: 20px;">Design and Creative Work</p>
<p style="font-size: 14px;">
Design plays a key role in engaging visitors and converting them
into customers. We focus on creating memorable interactions through
our designs.
</p>
</div>
<!-- Bottom row cards-->
<div class="flexi">
<a href="#news"><img src="http://files.softicons.com/download/toolbar-icons/free-green-button-icons-by-aha-soft/png/40x40/theater%20symbol.png" /></a>
<p style="font-size: 20px;">Mobile Applications</p>
<p style="font-size:14px;">
We like to think of the problem the app intends to solve, analyze
mobility context and create a mobile solution meeting that need and
satisfying user experience.
</p>
</div>
<div class="flexi">
<a href="#news"><img src="http://files.softicons.com/download/toolbar-icons/free-green-button-icons-by-aha-soft/png/40x40/theater%20symbol.png" /></a>
<p style="font-size: 20px;">Website Development</p>
<p style="font-size:14px">
Professional, responsive, engaging and value driven web sites are
true support to every business. They help engage the customers and
gain an edge over the competitors.
</p>
</div>
<div class="flexi">
<a href="#news"><img src="http://files.softicons.com/download/toolbar-icons/free-green-button-icons-by-aha-soft/png/40x40/theater%20symbol.png" /></a>
<p style="font-size: 20px;">E-Commerce Development</p>
<p style="font-size: 14px;">
Building intuitive, useful, secure and accessible e-Commerce
solutions that power the transactions and digital experience is
important to us..
</p>
</div>
</div>