如何在div中绝对定位的元素中居中可变长度的文本？

9 浏览
0 Comments

如何在div中绝对定位的元素中居中可变长度的文本？

我了解来自如何在div中居中绝对定位元素的解决方案。但我的情况是，我有一个长度可变的文本，而不是一个固定长度的div。

我希望div随着文本的增长而增加长度，同时保持居中。我猜我可以使用js来编程更改宽度，但那听起来太繁琐了，有没有纯CSS的解决方案？

示例：http://jsfiddle.net/tling/3KTUM/307/

.outer_div {
  background-color: #999;
  border: 0px solid black;
  width: 300px;
  height: 200px;
  float: left;
  position: relative;
}
.inner_div {
  position: absolute;
  background-color: #BBB;
  width: 100px;
  /*根据文本调整宽度？*/
  height: 50px;
  color: black;
  margin: 0 auto;
  right: 0;
  left: 0;
}

  文本 文本 文本

0

3 答案

0 Comments

问题的原因是在一个绝对定位的元素中居中变长文本。这可能是由于以下原因导致的：没有指定元素的宽度，或者文本长度不同导致文本在元素中无法居中。

解决方法是使用text-align属性来居中变长文本。可以将该属性应用于包含文本的父元素或者直接应用于文本本身。

例如，如果要在一个绝对定位的

元素中居中变长文本，可以使用以下CSS代码：

    .container {
      position: relative;
    }
    .text {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      text-align: center;
    }

上述代码中，.container类表示包含文本的父元素，它被设置为相对定位。.text类表示要居中的文本，它被设置为绝对定位，并通过设置left和top属性的值为50%将其定位到父元素的中心位置。然后，使用transform属性和translate函数将文本向左和向上移动其自身宽度和高度的一半，从而实现居中效果。最后，使用text-align属性将文本内容在元素中水平居中对齐。

此方法可以确保无论文本长度如何，都能够居中显示在绝对定位的元素中。

0
0 Comments

问题的原因是希望在一个绝对定位的元素中居中显示长度不固定的文本。在这种情况下，如果直接使用传统的居中方法，无法实现文本的居中显示。

解决方法是使用flexbox布局。首先，定义外部div的样式，设置背景颜色、边框、宽度和高度，并将其display属性设置为flex，使其成为一个flex容器。接着，使用justify-content属性设置为space-around，这样文本就能在外部div中水平居中显示。再使用align-items属性设置为center，使文本在垂直方向上居中显示。

然后，定义内部div的样式，设置背景颜色、宽度、最大宽度、高度和颜色等属性。其中，宽度使用auto，以适应文本的长度。最大宽度设置为与外部div相等，以确保文本不会超出外部div的范围。

最后，在html中使用div元素，并分别为外部div和内部div添加对应的class属性。在内部div中填入文本。

通过以上的css和html代码，就能实现将长度不固定的文本在绝对定位的元素中居中显示的效果。

0
0 Comments

问题的出现的原因是要在一个绝对定位的元素中居中显示长度可变的文本。解决方法是使用left:50%和transform:translate(-50%)以及margin-right:-50%的技巧。

首先，我们需要创建一个外部的div元素，设置它的样式为.outer_div：

.outer_div {
  background-color: #999; 
  border: 0px solid black; 
  width: 300px; 
  height: 200px; 
  /*float:left; */
  position: relative;
}

然后，在外部div中创建一个内部的div元素，设置它的样式为.inner_div：

.inner_div {
  position: absolute; 
  background-color: #BBB; 
  display:inline-block;
  color:black; 
  left:50%;
  margin-right: -50%;
  transform: translateX(-50%);
}

在HTML中，我们可以使用多个外部div来测试这种方法：

<div class="outer_div" style="" >
  <div class="inner_div">Text Length May Change  </div>  
</div>
<br>
<div class="outer_div" style="" >
  <div class="inner_div">Change  </div>  
</div>
<br>
<div class="outer_div" style="" >
  <div class="inner_div">Text Length May Change  Text Length May Change  </div>  
</div>

这种方法在大多数现代浏览器上都可以正常工作，除了Safari 8可能有一些问题。您可以在以下链接上查看这个方法在不同浏览器中的效果：https://www.browserstack.com/screenshots/0d780368ad54ecdd31cf5c62e70ff79f2b9a5a11

0