divのセットをウェブページの中心に動的に配置する方法

Question

ウェブページの中心に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-transformを50％に増やした場合、中心に移動しますが、幅がより長い名前の場合は中央から両側で調整されない です。むしろ、左側は中心に であり、右側だけで幅が増えます（これはdivの中心全体にはなりません）。

私はdivのParent2divを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見つけることができます名前の変化を紹介フィドルを作成しました。

希望すると便利です。 :)

EDIT：

元のコードに変更した後、クラス名とIDが変更された、彼らはまだ矛盾しています。 .ParentDiv1を.parent1divに、.ParentDiv1を.parent2divに変更して修正する必要があります。

2行目のテキストが追加されましたが、実際にコードが集中していません。また、追加する必要があります：

.parent1div { 
    text-align: center; 
} 

新しいfiddle hereを作成しました。

希望します。