我不知道是否与 jquery 有任何关联,也许它会影响..我用 jquery 操纵我的 html 元素,我用 anchor 包装我的 html,我想水平居中,无论我有多少个盒子或多个它必须是我的 div 的中心
$(".wrapMe").each(function() {
$(this).wrapAll("<a href='" + $(this).find("a").attr("href") + "' />");
});
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.booking-form {
width: 1004px;
margin: 30px auto;
background: lightblue;
padding: 30px 0;
}
.booking-form:before, .booking-form:after {
content: "";
display: table;
clear: both;
}
.historyForm {
width: 950px;
margin-left: auto;
margin-right: auto;
margin-top: 10px;
}
.historyForm:before, .historyForm:after {
content: "";
display: table;
clear: both;
}
.historyBox {
position: relative;
width: 32.33%;
margin-right: 1%;
float: left;
padding: 16px 13px;
background: rgba(0, 0, 0, 0.8);
border: 1px solid rgba(0, 0, 0, 0.2);
border-radius: 3px;
pointer-events: visible;
}
.historyBox:hover {
background: rgba(0, 0, 0, 0.9);
border: 1px solid rgba(0, 0, 0, 0.1);
}
.historyBox a {
color: #FFF;
}
.historyBox p {
font-size: 12px;
color: #ccd2d6;
margin-top: -5px;
}
.historyName {
font-size: 14px;
font-weight: bold;
}
.history-icon {
color: #FFF;
position: absolute;
top: 30%;
right: 5%;
}
<div class="booking-form">
<div class="historyForm">
<div class="historyBox wrapMe">
<a href="http://www.google.com" class="historyName">Huzur Royal Otel, Datça</a>
<p>20.04.2017 - 23.04.2017, 3 Gece</p><i class="ani-icon-magnifying-glass history-icon"></i>
</div>
<div class="historyBox wrapMe">
<a href="http://www.youtube.com" class="historyName">Huzur Royal Otel, Datça</a>
<p>20.04.2017 - 23.04.2017, 3 Gece</p><i class="ani-icon-magnifying-glass history-icon"></i>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
最佳答案
我通过将 flexbox 添加到 .historyForm 并从 .historyBox 中删除 float 来修复它
相同的 Codepen https://codepen.io/srajagop/pen/xdQxKE
.booking-form{
width:1004px;
margin:30px auto;
background:lightblue;
padding:30px 0;
&:before,&:after{
content:"";
display:table;
clear:both;
}
}
.historyForm{
width:950px;
margin-left:auto;
margin-right: auto;
margin-top: 10px;
display: flex;
flex-flow: row;
align-items: center;
justify-content: center;
&:before,&:after{
content:"";
display:table;
clear:both;
}
}
.historyBox{
position: relative;
margin-right:1%;
padding:16px 13px;
background:rgba(0,0,0,.8);
border:1px solid rgba(0,0,0,.2);
border-radius:3px;
pointer-events: visible;
&:hover{
background:rgba(0,0,0,.9);
border:1px solid rgba(0,0,0,.1);
}
a{
color:#FFF;
}
p{
font-size: 12px;
color:#ccd2d6;
margin-top: -5px;
}
}
关于javascript - 如何使用 jquery 水平居中操作的 jquery 元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44079519/