【发布时间】：2018-12-20 03:18:05
【问题描述】：
我试图将第 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>【问题讨论】：
-
您是否将引导文件包含在您的 html 中？
-
fonts.googleapis.com/css?family=Alegreya+Sans" rel="stylesheet"> maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/…" type="text/css"/> maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 这个？
-
是的。我已经测试了你的代码，服务框对我来说是水平居中的。您的网站上可能还有其他破坏它的内容。
-
是的，@caiovisk，这里也一样，没有发现任何问题：jsfiddle.net/c1frv6Lp
-
我明白了，您使用的是
col-sm-6，在较小的屏幕上会将其变为 2 列，您可以设置 col-sm-4，这是您的意思吗？ jsfiddle.net/c1frv6Lp/4
标签： html css wordpress twitter-bootstrap