12

我有一个可变大小的文本块，我想以 div 为中心。div 的宽度是其父元素的 %，高度由填充定义，无论中心文本有多高。这很容易通过以下方式实现：

<div style="width: 50%; padding: 15px; text-align: center;">
    Lorem ipsum...
</div>

这很好用。

但是当我尝试添加右侧的部分时：

<div style="width: 50%; padding: 15px; text-align: center;">
    Lorem ipsum...
    <div style="float: right;">ASDF!</div>
</div>

然后它将右侧文本的宽度计算为文本的总宽度，并将“ASDF！” 在右侧，但将“Lorem ipsum ...”放在比应有的位置更多的左侧（好像 lorem 的总长度...包括 asdf！）。

这是我要实现的目标的模型：

我正在努力实现的目标的样机。

我认为使用 flexbox 会很容易，但我想避免使用任何最近的东西，因为我需要支持旧的浏览器。

这个问题似乎很相关，但是（如果我错了，请纠正我）它似乎需要已知的宽度。

我最好怎么做呢？

4

9 回答 9

15

试试这个：

<div class='content' style="width: 50%; padding: 15px; text-align: center; position: relative">
    <div class="noDown" style="position: absolute; right: 0;">ASDF!</div>
    Lorem ipsum...
</div>​

JsFiddle 测试：http: //jsfiddle.net/3Y7ty/2/

于 2012-12-21T21:57:31.693 回答
4

IE8+ 够老了吗？

建立在你的小提琴上，你可以在 IE8+ 中得到你想要的东西。请注意，包装器#b需要box-sizing设置属性才能使其width: 50% 包含 padding. 然后对于您的浮动元素，只需添加以下内容：

margin: 0 -15px 0 -100%;

-15px右边距说明您的15px右边距将项目完全拉到右边，然后-100%左边距使前面的文本完全居中。

还是需要 IE7 支持？

您提到需要支持“旧浏览器”，但您没有提供任何有关如何保持的信息（IE8 现在是“旧的”，但也许您指的是更旧的浏览器）。如果您需要 IE7（或更低？）支持，那么您将需要有条件地以 IE7 为目标并改用它：

margin: -1.2em -15px 0 0;

IE7和后面的浏览器识别不float: right一样，会把它放在前面文字的“下方”，-100%左边距会把浮动元素拉回左边。这样就消失了，为了使文本与前面的文本一致，我们给它一个负的上边距，应该设置为等于line-height正在使用的字体的 （通常是1.2或1.1；你可能想要明确地将其设置在#b容器上）。我还没有测试过这是否适用于 IE6。

于 2012-12-21T14:31:21.497 回答
2

这对你有好处吗？http://jsfiddle.net/3Y7ty/

.container {
    width:100%;
    overflow:hidden;
    position:relative;
}
.center {
    width:50%;
    padding:15px;
    margin:0 auto;
    background:#ccc;
}

.right {
    display:inline-block;
    padding:15px;
    background:#999;
    position:absolute;
    right:0;
    top:0;
}


<div class="container">

 <div class="center">
     Lorem ipsum...
 </div>

 <div class="right">
     ASDF!
 </div>

</div>
于 2012-12-21T14:41:24.273 回答
2

我已经添加了这个小提琴。http://jsfiddle.net/nQvEW/68/。看看这个。

我已将主元素定位为绝对，而其中一个子元素相对于父元素，另一个则为绝对。可以根据需要调整顶部和左侧属性。但是我为主要的 div 元素硬编码了以下内容。您可以将其添加为CSS。

position:absolute;
width:500px;
height:40px;
background-color:#F00;
于 2012-12-24T15:47:35.430 回答
1

你可以试试：

    <div style="width:50%; padding: 15px; text-align: center; ">
Lorem ipsum...<div style=" display:inline; float:right;">ASDF!</div>
</div>

它在我刚刚做的快速模型中起作用。

于 2012-11-25T04:57:22.730 回答
1

这实际上并不像看起来那么复杂。您只需要从正常流中删除右对齐的 div 并将其定位（对齐）在文本容器的右侧。（演示中所有被注释的 CSS 行都是必需的；其余的用于演示目的。）

此解决方案的优点是容器和文本元素正常流动，并且它使用与您的示例相同的 HTML 结构。

演示：

查看演示 >> http://pasteboard.s3.amazonaws.com/images/1U5yFIwE.png

基本代码：

#text {
  margin: auto; /* aligns #text to the center of #container */
  text-align: center; /* self-explanatory; aligns text to the center */
  position: relative; /* needed so that the position of #right is relative to #text, not the body */
}

#right {
  display: inline-block; /* allows #right to display on the same line as the text in #text while still acting like a block element (block: p, div, etc.) */
  position: absolute; /* removes #right from the normal flow, and positions it in the top-left of #row */
  right: 0; /* aligns #right 0px away from the right side of #text */
}

图片： 演示图像

于 2012-12-27T22:46:40.633 回答
0

我已经完成了一点 css 工作。，

HTML 的代码示例：

<div class="MainContainer"><p>Lorem ipsum...</p><div style="float: right;">ASDF!</div></div>

CSS 的代码示例：

.MainContainer{
    width : 50%;
    padding : 15px !important;   
    text-align : center !important;
    border : 15px solid #000;
    position : absolute;   
}

.MainContainer div { margin-top : -7%; text-align:center !important;}

要在行动中看到它：

http://jsfiddle.net/john_rock/tZzwA/

我认为这可以帮助您解决问题。

于 2012-12-27T12:31:26.353 回答
0

正如其他人所说，您需要将第二个 div 从流中释放出来，然后重新定位它。将绝对顶部设置为与填充相同以恢复正确的垂直位置。试试这个，（与 Karacas 不同），查看第二个视图以显示居中是正确的：

<div style="border:1px solid red;width: 50%; padding: 15px; text-align: center;position: relative;">
    Lorem ipsum...
    <div style="position: absolute;right: 0;top: 15px;">ASDF!</div>
</div>
<div style="border:1px solid red;width: 50%; padding: 15px; text-align: center;">
    Lorem ipsum...
</div>

http://jsfiddle.net/huuanito/8N9BT/

于 2012-12-28T08:02:14.440 回答
0

您拥有的代码只需进行一些小的更改就可以正常工作。

  1. 第二个div需要是独立的，而不是嵌套在第一个中。
  2. 第一个“div”需要向左浮动，第二个需要向右浮动。

差不多就是这样。

    <div style="width:50%; padding:15px; text-align:center; float:left;">
     Lorem ipsum...
 </div>

 <div style="float:right;">
     ASDF!
 </div>

尝试一下！

于 2012-12-28T08:38:56.030 回答