Question

好的，我已经在这里阅读了关于垂直对齐绝对定位的问题。但是，它们都没有解决我的问题。

我有以下标记：

<div class="package-container row">
    <div class="col-md-4">
        Col 1
    </div>
    <div class="col-md-4">
        <div class="package-border"><img src="<?php echo home_url(); ?>/wp-content/themes/toolbox/images/package-bg-1.png"/></div>
        <div class="package-title"><?php the_title(); ?></div>
        <?php the_field('description'); ?>
        <?php if(get_field('special')) { ?>
            <div class="package-expries">
                Expires <?php the_field('expiry'); ?> | <a href="<?php echo get_permalink("101");?>">Terms and Conditions</a>
            </div>
        <?php } ?>
    </div>
    <div class="col-md-4">
        <div class="package-border"><img src="<?php echo home_url(); ?>/wp-content/themes/toolbox/images/package-bg-2.png"/></div>
        <div class="package-get">What you get</div>
        <?php the_field('treatments'); ?>
        <div class="package-cost">
            R <?php the_field('cost'); ?>
        </div>
    </div>
</div>

以下CSS：

.entry-content .package-container > div {
    padding:20px 40px;
    min-height: 250px;
}

.entry-content .package-container .package-border {
    position: absolute;
    display:table-cell;
    margin-left: -65px;
    vertical-align: middle;
    min-height: 100%;
    margin-top: -20px;
}

我希望.package-border中的两个图像在中间垂直排列。但是，无论我如何改变它，它仍然固定在顶部。

上面的内容我需要更改才能使其正常工作？

编辑：在这里制作了CodePen：http://codepen.io/anon/pen/bCjkI

Answer 1

我不能给你一个工作小提琴，因为你已经在其中粘贴了带有php标签的html代码，但是使用未知的或高度定位元素的一般规则是：

.element {
    position: absolute;
    display: block;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

请记住，定位将根据第一个父position:relative;（或正文，如果没有其他元素有位置：相对;

）工作

Answer 2

尝试

 .package-border {
 margin: 0 auto;
 }

垂直对齐绝对div内容

2 个答案: