我如何垂直居中这个div？

Question

http://jsfiddle.net/fretwiz/LuShM/

我有一个divs堆叠在彼此之上，并且在这些div中有两个内联块div。一个宽度为80％的div我向左浮动，另一个宽度为20％只占右侧。

我想垂直制作正确的div中心，父行div可以根据浮动div的内容动态调整大小。

除了使用表格之外还有其他解决方案吗？

<div id="container">
    <div id="content-wrapper">
        <div id="publication_date">21 October 2014</div>
        <div id="title">Curie-Cancer and DNA Therapeutics partner in the fight against cancers that resist conventional therapies</div>
    </div>
    <div id="bookmark">
        <img src="http://lorempixel.com/output/abstract-q-g-30-30-4.jpg" />
    </div>
</div>
<div id="container">
    <div id="content-wrapper">
        <div id="publication_date">21 October 2014</div>
        <div id="title">Curie-Cancer and DNA Therapeutics partner in the fight against cancers that resist conventional therapies</div>
    </div>
    <div id="bookmark">
        <img src="http://lorempixel.com/output/abstract-q-g-30-30-4.jpg" />
    </div>
</div>

Answer 1

Is this what you want check the demo

  

这是最简单直接的方法，只需添加display：table和table-cell到容器和内容包装器，书签

的CSS

#container {
    border-bottom: 1px solid #ebebeb;
    padding-bottom: 30px;
    overflow: hidden;
    height: 100%;
    display:table;
   }
    #content-wrapper {
        display: table-cell;
        width: 100%;
        float: left;
    }



   #bookmark {
    width: 20%;
    display: table-cell;   
    vertical-align:middle;
    text-align:center;
    }

输出

Answer 2

您可以在不使用表格的情况下执行此操作，请使用 CSS ：

进行此操作

#container {
    border-bottom: 1px solid #ebebeb;
    padding-bottom: 30px;
    overflow: hidden;
    height: 100%;
    position: relative;
}

#content-wrapper {
    width: 80%;
    float: left;
}

#bookmark {
    position: absolute;
    width: 20%;
    text-align: center;
    right: 0;
    top: 50%;
    -ms-transform:translateY(-50%); /* IE 9 */
    -webkit-transform:translateY(-50%); /* Chrome, Safari, Opera */
    transform:translateY(-50%); /* Standard syntax */
}

Demo

希望这会对你有帮助......

Answer 3

你可以牺牲书签上的display: inline-block;吗？如果是这样，请尝试调整css;

http://jsfiddle.net/LuShM/3/

#container {
    display: table;
    /*previous styles*/
}
#bookmark {
    /*previous styles*/
    display: table-cell;
    vertical-align: middle;
}