Выравнивать Divs Горизонтально Отцентрировано Img

Question

Я только что спросил question о выравнивании кнопки, и благодаря ответам там, у меня он работает, как выставлено here.

Вместо того, чтобы перемещать сообщения цели по этому вопросу, я решил задать еще один вопрос относительно другой связанной проблемы: как выровнять элементы управления с центром, центрированным с помощью CSS.

Вот обновленный пример HTML:

<div id="signaturePopup"> 
    <label id="signatureTitle">View Signature</label> 
    <div id="signatureImage"> 
     <!--Contains img--> 
    </div> 
    <div id="signatureFooter"> 
     <div id="signatureStatus"> 
      <!-- Contains another img --> 
     </div> 
     <label id="signatureUserDetails">Added via JS</label> 
     <input id="closeSignature" type="button" value="Close" /> 
    </div> 
</div> 

И CSS:

#signatureTitle { 
    text-transform: uppercase; 
    font-size: 16px; 
} 
#signatureFooter { 
    bottom: 0; 
    position: absolute; 
    width:100%; 
} 
#signatureFooter > div, #signatureFooter > label, #signatureFooter > input { 
    display: inline; 
} 
#signatureFooter > input { 
    float:right; 
} 
#signatureImage > img { 
    height: 90%; 
    width: 90%; 
    border: grey 1px solid; 
    display: block; 
    margin-left: auto; 
    margin-right: auto; 
} 

То, что я хочу, это содержание signatureFooter и signatureTitle быть горизонтально выровненных с изображением, содержащимся в signatureImage. Используя данные в моей скрипке, приведенные выше, я хочу, чтобы «VIEW SIGNATURE» и значок «SAMPLE» выстроились в линию с левой границей «примерного» изображения, а также с правой границей кнопки «Закрыть», правая граница «примерного» изображения. Проблема (для меня) заключается в том, что я центрирую этот образ с помощью display: block; margin-left: auto; margin-right: auto;, поэтому я не знаю, как использовать CSS для их выравнивания. Это неправильный способ сосредоточиться на этом изображении? Будет ли еще одна стратегия упростить их работу?

Answer 1

Вы можете использовать одни и те же свойства контейнера:

#signatureTitle { 
    display:block; 
    width:90%; 
    margin:auto; 
} 

И получить позицию использования колонтитула left:

#signatureFooter { 
    width:90%; 
    left:5%; 
} 

Проверьте Demo Fiddle