Question

我有一个html文件，看起来像这样：

<div style="float:right">
A line of text, floating to the right
</div>
<div style="text-align:center">
And here, several lines of<br />
text which I want to center.
</div>

这样渲染（至少在Firefox中）：

    And here, several lines of       A line of text, floating to the right
                         text which I want to center.

我想要的是第二个div中的文本以单个垂直轴为中心，不受右侧浮动div高度的影响：

     And here, several lines of     A line of text, floating to the right
    text which I want to center.

现在，造成这个问题的原因是我无法改变浮动div;我只用我想要居中的文本控制第二个div。此外，我不一定知道浮动div的宽度和高度。我不能使用javascript。我不能使用绝对定位，因为我没有对父块的任何控制，我不知道它们中的哪一个具有非静态定位。我真的不想使用桌子，除非没有其他选择。

有办法做到这一点吗？

Answer 1

根据您的页面，如果两个div都在一个容器中，并且右侧div下方没有任何内容（让它一直向下拉伸）：

<div style="float:right; height: 100%;">
A line of text, floating to the right
</div>
<div style="text-align:center;">
And here, several lines of<br />
text which I want to center.
</div>

如果您有其他限制但不符合，请将其添加到问题中，以便我们获得更好的解决方案。

根据您的评论

更新

。

CSS：

.divWrapper div { height: 100%; }

HTML：

<div class="divWrapper">
<div style="float:right; height: 100%;">
A line of text, floating to the right
</div>
<div style="text-align:center;">
And here, several lines of<br />
text which I want to center.
</div>
</div>

Answer 2

将居中div的宽度设置为50％并使用margin：0 auto将其居中。

   <div style="float:right">
        A line of text, floating to the right
    </div>
    <div style="width:50%;margin:0 auto;text-align:center">
        And here, several lines of<br />
        text which I want to center.
    </div>

根据文字的长度，您可能需要使用宽度％进行调整。

Answer 3

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
    <title></title>
    <link rel="stylesheet" type="text/css" href="css/stylesheet.css" />
    <style type="text/css" media="all">

    #d1 {float: right;
        clear: left;
        width: 24%; /* it should fit inside the 25% margin between right-side of div #2 and the boundary of the page with a small (1%) gutter between the two divs */
    }

    #d2 {width: 50%;
        position: absolute;
        top: 0; /* or whatever... */
        left: 50%; /* used in conjunction with margin to centre the div */
        margin: 0 0 0 -25%; /* moves div left */
    }

</style>
</head>

<body>

    <div id="d1">
    A line of text, floating to the right
    </div>

    <div id="d2">
    And here, several lines of<br />
    text which I want to center.
    </div>

</body>

</html>

演示页：here

引起了我的注意：

现在，造成这个问题的原因是我无法改变浮动div;我只用我想要居中的文本控制第二个div。此外，我不一定知道浮动div的宽度和高度。我不能使用javascript。我不能使用绝对定位，因为我没有对父块的任何控制，我不知道它们中的哪一个具有非静态定位。我真的不想使用表，除非没有其他选择。

#d2 {clear: both;
width: 50%;
margin: 0 0 0 25%;
}

#d1 {clear: both;
float: right;
}

这种方式实现了你的目标，但这意味着两个div不会水平相邻;他们会在你想要的地方，但在不同的横向层次上。

Answer 4

将显示样式更改为块而不是内联可能会有所帮助，将浮动样式设置为左侧也可能有所帮助。你也可以做到这两点。

尽管不同的浏览器会以不同的方式处理这种情况，但这样做会很痛苦。

text-align：center和short floated div

4 个答案: