Question

我想在网页的中心放置一组div，并希望根据span类中提供的用户名长度从中心改变其大小。

.Parent1Div
{
  height:60px; 
  display:block;
  position:relative;
}

.Parent2Div{
  margin-right:auto;
  margin-left:auto;   
  max-height:30px;
  padding:0;
  position: relative;
  width: 100%;
  -webkit-transform: translate(0%, -50%);
  -ms-transform: translate(0%, -50%);
  transform: translate(0%, -50%);
}

#Child2Div{
  display: table;
  margin: 0 auto;
}

#Child2Div > div{
  display: inline-block;
}

    <div class = "parent1div">
    
   		<div class="parent2div" runat="server">
                    <div class="Child1Div"><img src="image1.jpg" /></div>
                    <div id="Child2Div" runat="server" class="ColStyle">
                        <span class="textclass ColStyle" id="username"  runat="server"></span>
                        <span class="ColStyle buttonclass">
                        span.....button for logout......</span>
                    </div>
      </div>
		......Some content for Menu
    </div>

这里，parent1div是主div，它包含菜单的内容。 Parent2Div包含一些小尺寸图像以及用户名和注销按钮。我希望将parent2div中的整个div放入页面的中心。它的宽度应根据用户名的大小而变化，但每次都应放在中心位置。名称可以是长或短，取决于大小应该从中心增加或减少。 ColStyle和textclass是包含一些基本功能的类，如文本颜色，大小和填充。

我不确定我缺少什么，但是当我使用上面的CSS时，这些div会向左转移的页面。如果我为parent2div将webkit变换增加到50％，它将移动到中心但宽度为没有从中心调整更长的名字。相反，左侧是中心并且宽度仅在右侧增加（这不会使整个div的中心）。

我希望来自Parent2div的div的行为方式与下面的jfiddle一样，但我不确定我错过了什么，当我把所有东西放回原处时，div不会定位在中心并自动调整。

https://jsfiddle.net/xrnsmywr/

Answer 1

问题在于您的命名约定 - 您使用的是类而不是ID。你的命名略有不正确。

.Parent1Div应为#parent1div，.Parent1Div应为#parent2div。出于某种原因，您使用Child1Div的课程，但Child2Div的ID。只需确保在HTML和CSS中使用正确的命名组合，您就可以轻松地使用`text-align：center。

。

要集中<div>（或图片），您可以使用margin: 0 auto：

img {
  display: block;
  margin: 0 auto;
}

我创建了一个小提琴，展示名称的变化，可以找到here。

希望这有帮助！：）

修改

修改原始代码后，类名和ID已更改，但它们仍然不一致。您需要通过将.ParentDiv1更改为.parent1div并将.ParentDiv1更改为.parent2div来更正此问题。

添加了第二行文本，但没有代码实际集中它。您还需要添加：

.parent1div { text-align: center; }

我创建了一个新的fiddle here。

希望这会有所帮助：）

如何动态地将div组设置到网页的中心

1 个答案: