1

简单地说,我想要一个标题,其中有两个元素浮动到每一侧并垂直居中:

在此处输入图像描述

我开始使用非浮动元素进行此操作,并设法制作了这个示例

但是一旦我添加float:leftfloat:right垂直居中就会丢失(我明白为什么,因为它不再是流程的一部分)

我想知道实现这一目标的最佳方法是什么。完整的 CSS 重新设计被欣然接受。

提前致谢!

4

4 回答 4

1

添加text-align:right到父 div,它使子元素向右对齐。现在添加 float:left 到#text

#parent {
  border: 1px solid black;
  display: block;
  line-height: 400px;
  height: 400px; text-align:right

}

#text {
  display: inline-block;
  border: 1px dashed black;
  height: 100%; text-align:left; float:left
}

#logo {
  border: 1px dashed black;
  height: 90%;
  line-height: 90%;
  vertical-align: middle;
  display: inline-block;
}

#logo img {
  border: 1px dashed red;
  height: 100%;
}
​

演示

于 2012-12-10T10:20:53.363 回答
1

垂直居中可能会很痛苦,尤其是当您不处理内联元素时。在这种情况下,我建议利用display:table-cell.

HTML

       <div id="wrapper">
            <div class="cell">
                <div class="content">
                    Content Goes here
                </div>
            </div>
            <div class="cell">
                <div class="content2">
                    <div class="redbox">
                    </div>
                </div>
            </div>
        </div>

CSS

            #wrapper {
                color: white;
                display: table;
                border: 1px solid darkblue;
                background: blue;
                width: 100%;
            }

            .cell {
                display: table-cell;
                vertical-align: middle;
                height: 200px;
            }

            .content {
                float: left;
            }

            .content2{
                float: right;
            }

            .redbox {
                border: 2px solid darkred;
                background: red;
                height: 75px;
                width: 75px;
            }

示例:http: //jsfiddle.net/YBAfF/

于 2012-12-10T10:41:34.277 回答
0

这是一个示例jsfiddle和下面的相同代码。当您设置元素的高度时,您可以为嵌套元素设置相同的 line-height 并且它们将扩展至高度。垂直居中内容。

HTML

<div id="wrapper">
<div id="left">left</div>
<div id="right">right</div>
</div>​

CSS

#wrapper{
    margin:0 auto;
    width 960px;
    background: #eee;
    height:50px;
}
#left{
    float:left;
    background:#ccc;
    line-height:50px;
}
#right{
    float:right;
    background:#ddd;
    line-height:50px;
}

​</p>

于 2012-12-10T10:11:53.287 回答
0

您应该在要居中的元素周围添加一个包装器,并将它们浮动在包装器内。像这样的东西:

HTML

<div class="center">
  <p class="left">Some text goes here</p>
  <img src="/path/toimage" alt="My image" class="right">
</div>

CSS

.center {
  margin:0 auto;
  width: 400px;
}
.right {
  float: right;
}
.right {
  float: left;
}

当然,这是一个非常简单的例子。您可以根据需要更改值和 CSS。

于 2012-12-10T10:14:07.157 回答