Статически центр DIV на экране (без JS)

Question

Что уже есть:

.modal-m1 
 
    { 
 
    \t background-image: url(../images/bg-greyout.png); 
 
    \t background-repeat: repeat; 
 
    \t display: table; 
 
    \t top: 0; 
 
    \t left: 0; 
 
    \t width: 100%; 
 
    \t height: 100%; 
 
    \t position: fixed; 
 
    \t margin: 0; 
 
    \t padding: 0; 
 
    \t z-index: 1; 
 
    } 
 
    .modal-m1 .modal-m2 
 
    { 
 
    \t display: table-cell; 
 
    \t vertical-align: middle; 
 
    } 
 
    .dialogbox 
 
    { 
 
    \t margin: 0 auto; 
 
    \t background-color: #F6F6F6; 
 
    \t -webkit-border-radius: 20px; 
 
     -moz-border-radius: 20px; 
 
     border-radius: 20px; 
 
    \t -webkit-box-shadow: #666 3px 3px 5px; 
 
    \t -moz-box-shadow: #666 3px 3px 5px; 
 
     box-shadow: #666 3px 3px 20px; 
 
     padding: 20px; 
 
    } 
 
    .mydialogbox 
 
    { 
 
     width: 400px; 
 
    }

<div class="modal-m1"> 
 
     <div class="modal-m2"> 
 
      <div class="dialogbox mydialogbox"> 
 
      ... CONTENT IS HERE ...... 
 
      </div> 
 
     </div> 
 
    </div>

Все хорошо на этой стадии. Вы можете проверить его на фрагмент.

Теперь я хочу поместить несколько диалоговых окон на разные страницы. Я пытаюсь повторно использовать код, и по этой причине я пытаюсь извлечь modal-m1, modal-m2 и dialogbox в пользовательский элемент управления ASP.NET. mydialogbox должен быть вложенным div внутри dialogbox. Но dialogbox игнорирует width: 400px в этом случае. Есть ли обходной путь?

Другими словами, я хочу, чтобы моя разметка быть:

<div class="modal-m1"> 
    <div class="modal-m2"> 
     <div class="dialogbox"> 
      <div class="mydialogbox"> 
      ... CONTENT IS HERE ...... 
      </div> 
     </div> 
    </div> 
</div> 

Возможно ли это?

Answer 1

если я undestood .. ваш HTML может быть так:

<div class="modal-m1"> 
     <div class="modal-m2"> 
      <div class="dialogbox "> 
       <div class="mydialogbox"> 
        <div>CONTENT IS HERE ......</div> 
       </div> 
      </div> 
     </div> 
    </div> 

и вы хотите поместить ширина только для .mydialogbox

.modal-m1 .modal-m2 
{ 
    display: table-cell; 
    vertical-align: middle; 
    text-align:center; /*add*/ 
} 
.dialogbox 
{ 
    margin: 0 auto; 
    background-color: #F6F6F6; 
    -webkit-border-radius: 20px; 
    -moz-border-radius: 20px; 
    border-radius: 20px; 
    -webkit-box-shadow: #666 3px 3px 5px; 
    -moz-box-shadow: #666 3px 3px 5px; 
    box-shadow: #666 3px 3px 20px; 
    padding: 20px; 
    display:inline-block; /*change*/ 
} 
.mydialogbox 
{ 
    width: 400px; 
    text-align:left 
} 

это?