html - divを垂直方向にのみラップする方法は?

Question

タイトルが示すように、画像の周りに垂直に div をラップしたいのですが、幅は流動的で変更可能にしたいです:

|_________________|
|     |XXXXXX|    |
|     |XXXXXX|    |
|     |XXXXXX|    |
|     |XXXXXX|    |
|     |XXXXXX|    |
|     |XXXXXX|    |
|-----------------|

ボックスはコンテナで、コンテンツは文字のブロックです。下部と上部はコンテンツ ブロックと一致する必要があります。コンテンツを中央に配置します (マージン: 0 auto;)。

Answer 1

これはあなたが望むものですか？デモ

フィドルで出力セクションのサイズを変更してみてください。コンテンツが常に中央に表示されることがわかります。

CSSは次のとおりです。

.container {
    height: 300px;
    text-align: center;
    background: #CCC;
}

.inner {
    height: 100%;
    width: 300px;
    display: inline-block;
    border: 1px solid black;
}