如何将一组div设置为网页中心的动态

我想在网页的中心放置一组div，并希望根据span级别中可用的用户名长度从中心改变其大小。如何将一组div设置为网页中心的动态

.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"> 
 
    
 
    \t \t <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> 
 
\t \t ......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/

来源

2017-02-19 Sriram Chandramouli

问题是与您的命名约定 - 你是使用类，而不是标识。你刚刚得到了一些不正确的命名。

.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。

希望这会有所帮助:)

来源

2017-02-19 22:20:05

我做了一些更新我的问题和jfiddle。我想我采用了与你所提到的相同的方式，并最终以与你所提到的相同的方式期待结果。它仍然不是集中。它被放置在左侧，如果我进行-webkit-transform：translate（50％，-50％），它们将移动到中心位置，但不会位于中心并自动调整。 –

这个问题肯定是由于不一致/不正确的命名约定。请确保您有正确引用的类/ ID。尝试诸如'＃parent1div {color：orange}'之类的东西，以确保您正确引用了您的类/ ID。 –

我已经确定ID和类在我的代码中是一致的（就像你刚才所说的那样）。我在这里发布问题时犯了一个错误。对于那个很抱歉。还有其他东西被阻塞。 –

如何将一组div设置为网页中心的动态

回答

相关问题