How can't center the elements inside this jQuery iframe (div?)

Question

I can't center the elements inside the iframe on this page:

http://ada.kiexpro.com/test/instruments.html

(click Open iFrame Modal)

html:

   <h2>Intrument's name</h2>
    <p>View full-size photo <a href="iframeModal.html?placeValuesBeforeTB_=savedValues&TB_iframe=true&height=500&width=320&modal=true" title="add a caption to title attribute / or leave blank" class="thickbox">here</a>

iframe's css:

#desc img, h3, p {
    float: left;
    display: block;
    margin: 8px 0px;
}
#desc input {
    float: right;
    font-weight: 700;
    background-image:url("../images/close.png");
    background-repeat: no-repeat;
    border-width: 0;
    margin: 0 0 10px;
    padding:0 12px 6px;
    background-color: #FFF;
}
#desc input:hover {
    background-image:url("../images/close_hover.png");
    background-repeat: no-repeat;
}
#mainpic {
    border: 5px solid #DDD;
}
#desc h3 {
    line-height: 6px;
    background: url("../images/goldenrose.gif") no-repeat left;
    padding: 13px 42px;
}
#desc p {
    color: #888;
}

Answer 1

do you mean the picture? -> add text-align: center; to the body and text-align: left; to the div (desc) behind the picture.