0

Need to position box-inside div dead center to the wrapper div, where the wrapper div's height depends on the sidebar div height. The box-inside div was positioned absolute in relative to the wrapper div, and sets a variable width and height which is respective to the images and content inside it.

This can be accomplish by giving width and height to the box-inside div, but have to do with variable width and height.(the box-inside div have to be in same dimension as the img with padding)

The jsFiddle code here

This is the HTML code:

    <body>
        <div class="wrapper">
            <div class="sidebar"></div>
            <div class="inside-box">
                <img src="badge.gif" />
            </div>
        </div>
    </body>

The CSS

    * {
    margin: 0;
    }

html,body {
    height: 100%;
    }

body {
    background: white;
    display: block;
    font-family: Tahoma, Geneva, sans-serif;
    margin: 0;
    padding: 0;
    }

.wrapper {
    position:relative;
    height: auto;
    width:70%;
    margin: 0 auto ;
    background:green;

    }
.sidebar {
    height: 500px;
    width:30%;
    background: red;
    clear:both;
    }
.inside-box {
    margin: auto;
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
    background:yellow;
    min-width:275px; min-height:183px;
    padding:10px;
    }

Currently enter image description here

Expected Output enter image description here

4

2 回答 2

1

只需尝试使用符合预期输出的这个 jsfiddle 并且对您的代码进行很少的更改。看看它-
jsfiddle

于 2013-09-10T15:41:32.737 回答
0

您需要添加一些额外的包装元素，如下所示：

<div class="wrapper">
    <div class="sidebar"></div>
    <div class="inside-box">
        <div class="inside-wrap">
            <div class="inside-cell">
                <div class="content-wrapper">
                    <img src="http://s21.postimg.org/lgwltcynr/image.jpg" />
                    <p>Tyger Tyger burning bright...</p>
                </div>
            </div>
        </div>
    </div>
</div>

并应用以下 CSS： 

.inside-box {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}
.inside-wrap {
    display: table;
    width: 100%;
    height: 100%;
}
.inside-cell {
    display: table-cell;
    width: 100%;
    height: 100%;
    text-align: center;
    vertical-align: middle;
}
.content-wrapper {
    background-color: yellow;
    padding: 10px;
    display: inline-block;
}

解决方案取决于使用 CSS 表格单元格，除了旧的 IE 浏览器外，它有很好的支持。

.inside-box包装器用于识别依赖于某些子元素（如侧边栏）的父块的尺寸。

.inside-wrap用于display: table捕获 100% 的高度和宽度。

使用.inside-cell并display: table-cell允许垂直和水平对齐工作。

最后，您需要.content-wrapper使用一些填充来根据需要绘制黄色背景。

.content-wrapper是一个独立的单元，因此您可以在其中放置浮动元素而不会破坏任何东西。

参见演示：http: //jsfiddle.net/audetwebdesign/6XSqD/

于 2013-09-10T12:05:51.473 回答