How to center manipulated jquery element horizontally with jquery

Question

I don't know is there any relevance with jquery maybe it may affect.. I manipulated my html elements with jquery, I make wrap my html with anchors and I want to centering in horizontally no matter how many box I have one or more than one it must be center of my div

like below image

$(".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>

codePen Demo

Answer 1

You can achieve this by using CSS only. Just add this to your CSS.

.historyForm {
  display: flex;
  justify-content: center;
}

/* NEW CSS BEGIN */

.historyForm {
  display: flex;
  justify-content: center;
}

/* NEW CSS END */

* {
  -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>

Answer 2

I fixed it by adding flexbox to the .historyForm and removing float from .historyBox

Codepen for the same 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;
    }
}