Centering book-jacket

by klode

HTML

<link rel="stylesheet" href="http://getbootstrap.com/dist/css/bootstrap.css">
<script src="http://getbootstrap.com/dist/js/bootstrap.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css">
<div class="modal-holder">
    <div class="modal-header">
        <button class="close" type="button" ng-click="cancel()" title="Cancel">&times;</button>
         <h3 class="modal-title">Delete Book</h3>

    </div>
    <div class="modal-body dark">
        <div>Are you sure you want to delete</div>
        <div class="below-1em"><strong>Alice in wonderland ?</strong>

        </div>
        <div class="book-jacket center">
            <img src="http://placehold.it/177x194" alt="Book cover">
            <div class="label"> <span><span class="number">10</span> MIN</span>
            </div>
        </div>
        <p>This can not be undone.</p>
        <div class="below-1em">
            <button class="btn btn-default" type="button" ng-click="cancel()">Cancel</button>
            <button class="btn btn-danger" type="button" ng-click="ok()">Delete</button>
        </div>
    </div>
</div>

CSS

.modal-holder {
    width:600px;
    height:540px;
}
.book-jacket {
    border-radius: 8px;
    background: #fff;
    max-width: 238px;
    height: 253px;
    position: relative;
    text-align: center;
    margin: 0 0 15px;
}
.book-jacket.center {
        margin-left:auto;
        margin-right:auto;
}
.book-jacket {
    white-space: nowrap;
}
.book-jacket:after {
    display:inline-block;
    vertical-align: middle;
    margin: 0 0 0 -5px;
    min-height: 100%;
    overflow: hidden;
    width: 1px;
    content:"";
}
.book-jacket img {
    display: inline-block;
    vertical-align: middle;
    letter-spacing:0;
    white-space: normal;
}
.book-jacket .label {
    border-radius: 0 8px 8px 0;
    position: absolute;
    top:32px;
    bottom:auto;
    left:0;
    right:auto;
    background: #fcb034;
    color: #fff;
    font-size: 12px;
    padding: 6px 5px 4px;
    text-align: center;
    line-height: 17px;
    width: 47px;
    text-transform: uppercase;
}
.book-jacket .label .number {
    display: block;
    font-size: 24px;
    line-height: 28px;
}
.book-jacket .label i {
    display: block;
    margin: 6px 0 4px;
    line-height: 1em;
    font-size: 17px;
}
.book-jacket .label.done {
    background: #84be45;
}
/* Customize bootstrap modal */
 .modal-body {
    padding-left: 2em;
    padding-right: 2em;
    text-align: center;
}
.modal-body {
    background: #f6f6f6;
}
.modal-header {
    background: #ed1b30;
    color: #fff;
}
.modal-header .modal-title {
    text-align: center;
}
.below-1em {
    margin-bottom: 1em;
}