html - 如何在 wordpress 网站上将 3 个服务框居中
问题描述
我试图将第 3 页服务框居中,但无论如何我似乎都无法将它们居中。我对此完全是个菜鸟,所以任何帮助都会很棒。这是我当前的代码。我想我需要在容器或其他东西中创建每个 div 并将属性应用于该容器?或者这可能是 Avada 主题使用代码块元素的问题。
.solutions_box {
position: relative;
margin: 50px auto;
text-align: center;
border-radius: 5px;
background: #ffffff;
transition: all 0.30s ease 0s;
border-left: 1px solid #D3D3D3;
border-right: 1px solid #D3D3D3;
border-top: 4px solid #74AA50;
box-shadow: 0 0 10px 5px #D3D3D3;
}
.solutions_box .solutions_icon {
width: 70px;
height: 70px;
margin: 50px auto;
font-size: 35px;
background: #ffffff;
line-height: 70px;
border-radius: 50px;
transform: translateY(0);
transition: all 0.30s ease 0s;
}
.solutions_box .solutions_icon {
transform: translateY(-100%);
border-radius: 50px;
border: 2px solid #74AA50;
}
.solutions_box .solutions_icon i {
color: #000000;
}
.solutions_box h3 {
position: relative;
top: -75px;
margin: 0;
color: #666666;
font-size: 23px;
text-transform: uppercase;
transform: translateY(0%);
transition: all 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55) 0s;
font-family: 'TwCenMTStd-MediumCond', 'Lato', Helvetica, sans-serif;
}
.service_list .list_item {
margin: 0;
opacity: 1;
transition: all 0.30s linear 0s;
font-size: 20px;
border-top: solid #ececec 2px;
}
.service_list p {
color: #666666;
margin-bottom: 10px;
padding: 13px;
font-size: 20px;
}
.service_list:hover .list_item p {
transition: .25s ease;
-webkit-transform: scale(1.05);
-ms-transform: scale(1.05);
transform: scale(1.05);
color: #74AA50;
text-decoration: none;
}
.service_list:hover .list_item a {
transition: .25s ease;
-webkit-transform: scale(1.05);
-ms-transform: scale(1.05);
transform: scale(1.05);
color: #74AA50;
text-decoration: none;
}
<link href="https://fonts.googleapis.com/css?family=Alegreya+Sans" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" type="text/css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-md-4 col-sm-6">
<div class="solutions_box">
<div class="solutions_icon">
<i class="fa fa-code"></i>
</div>
<h3>End User Support</h3>
<div class="service_list">
<div class="list_item">
<a href="\solutions">
<p>Solutions</p>
</a>
</div>
</div>
<div class="service_list">
<div class="list_item">
<a href="\soultions">
<p> More Stuff </p>
</a>
</div>
</div>
<div class="service_list">
<div class="list_item">
<a href="\solutions">
<p> Stuff </p>
</a>
</div>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6">
<div class="solutions_box">
<div class="solutions_icon">
<i class="fa fa-code"></i>
</div>
<h3>End User Support</h3>
<div class="service_list">
<div class="list_item">
<a href="\solutions">
<p>Solutions</p>
</a>
</div>
</div>
<div class="service_list">
<div class="list_item">
<a href="\soultions">
<p> More Stuff </p>
</a>
</div>
</div>
<div class="service_list">
<div class="list_item">
<a href="\solutions">
<p> Stuff </p>
</a>
</div>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6">
<div class="solutions_box">
<div class="solutions_icon">
<i class="fa fa-code"></i>
</div>
<h3>End User Support</h3>
<div class="service_list">
<div class="list_item">
<a href="\solutions">
<p>Solutions</p>
</a>
</div>
</div>
<div class="service_list">
<div class="list_item">
<a href="\soultions">
<p> More Stuff </p>
</a>
</div>
</div>
<div class="service_list">
<div class="list_item">
<a href="\solutions">
<p> Stuff </p>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
解决方案
所以看起来问题是在容器中添加 div class="container-fluid" 在很大程度上纠正了这个问题。除了一个对象之外,现在似乎更加居中,但这可能只是一个对象放置问题。话虽如此,这些盒子现在已经正确排列。
<link href="https://fonts.googleapis.com/css?family=Alegreya+Sans" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" type="text/css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container-fluid">
<div class="row">
<div class="col-sm-4">
<div class="solutions_box">
<div class="solutions_icon">
<i class="fa fa-code"></i>
</div>
<h3>End User Support</h3>
<div class="service_list">
<div class="list_item">
<a href="\solutions">
<p>Solutions</p>
</a>
</div>
</div>
<div class="service_list">
<div class="list_item">
<a href="\soultions">
<p> More Stuff </p>
</a>
</div>
</div>
<div class="service_list">
<div class="list_item">
<a href="\solutions">
<p> Stuff </p>
</a>
</div>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6">
<div class="solutions_box">
<div class="solutions_icon">
<i class="fa fa-code"></i>
</div>
<h3>End User Support</h3>
<div class="service_list">
<div class="list_item">
<a href="\solutions">
<p>Solutions</p>
</a>
</div>
</div>
<div class="service_list">
<div class="list_item">
<a href="\soultions">
<p> More Stuff </p>
</a>
</div>
</div>
<div class="service_list">
<div class="list_item">
<a href="\solutions">
<p> Stuff </p>
</a>
</div>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6">
<div class="solutions_box">
<div class="solutions_icon">
<i class="fa fa-code"></i>
</div>
<h3>End User Support</h3>
<div class="service_list">
<div class="list_item">
<a href="\solutions">
<p>Solutions</p>
</a>
</div>
</div>
<div class="service_list">
<div class="list_item">
<a href="\soultions">
<p> More Stuff </p>
</a>
</div>
</div>
<div class="service_list">
<div class="list_item">
<a href="\solutions">
<p> Stuff </p>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
推荐阅读
- python-3.x - 通过基于条件生成可能的组合将数据帧拆分为多个数据帧
- python - Kivy 使用 RecycleView 的 CheckBox 问题
- c# - 来自主模型的 C# 子模型
- c++ - 在 .cpp 文件中定义整数常量的正确方法
- ios - CreateML 迁移学习模型不会在 iOS 模拟器上运行
- java - 使用 @ManyToMany 复制实体
- pandas - Pandas 创建一个新的 C 列,其值为 A 列但没有连字符
- json - 使用 PowerShell 解析和操作 Json 文件中的日期
- spring - 我可以获得与@OneToMany 相关的对象列表吗?
- excel - 在 VBA 中从同名节点获取 XML 数据时出现问题