Text-aliniere și div nu centrat

Am un div care vreau să fiu aliniat în centru, vorbind orizontal. Rețineți că butonul din interior poate fi aliniat la centru ... Din păcate, nu pot face același lucru pentru ambalaj

Iată demo-ul live

HTML markup:

<div class="wrap">
    <div class="grayContainer">
        <div class="editor-label">
            name:
        </div>
        <div class="editor-field">
            james
        </div>
        <div class="editor-label">
            last name:
        </div>
        <div class="editor-field">
            bond
        </div>
        <div class="alignCenter">
            <input type="submit" value="press me" class="" />
        </div>
    </div>
</div>

CSS markup:

.grayContainer {
    padding: 15px 10px 10px 10px;
    width: 450px;
    background-color: #E7E7E7;
    border: 2px solid #CCCCCC;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    border-radius: 8px;
    box-shadow: 0px 0px 6px 2px #CCCCCC;
    position:relative;
    behavior: url(/PIE.htc);
}

.grayContainer label
{
    float: left;
    width: 200px;
    text-align: right;
    color: #656565;
    /*font-size: 12px;*/
    text-shadow: 0 1px 0 white;
    padding: 8px 13px 10px 0;
}

.grayContainer .alignCenter
{
    padding: 20px 0;
}

.alignCenter
{
    text-align: center;
}

.wrap
{
     margin: 0 auto;   
}

Mulțumesc anticipat

0

4 răspunsuri

Setați marginile din stânga și din dreapta la auto .

margin-left: auto;
margin-right: auto

sau chiar mai bine

margin: 0 auto;

Consultați acest .

0
adăugat
oh marginea trebuie să fie setată pe div ... grayContainer
adăugat autor Luis, sursa

Ați centrat învelișul, dar pe măsură ce lățimea acestuia umple lățimea disponibilă, nu veți vedea că acesta este centrat.

Cred că doriți să centrați containerul în interiorul ambalajului în loc de:

http://jsfiddle.net/dS9Bc/4/

0
adăugat
Prefer să nu modificați div grayContainer , există o altă modalitate de a face acest lucru folosind div wrap ?
adăugat autor Luis, sursa
Voi folosi ultima soluție atunci, thx
adăugat autor Luis, sursa
@ LuisSánchez: Da, puteți face wrap aceeași lățime ca și grayContainer , apoi puteți folosi marja 0 auto < jsfiddle.net/Guffa/dS9Bc/6
adăugat autor Guffa, sursa

make margin right & left auto.. and just add this style to your css.. and it's not work on jsFiddle

.wrap{
margin:0 auto;
}
0
adăugat
Am încercat asta, dar, adevărat, nu funcționează pe jsFiddle, orice idee despre asta?
adăugat autor Luis, sursa
încercați-l la nivel local .. @ Ineentho treabă bună
adăugat autor Abudayah, sursa
Lucrează pe jsFiddle, folosesc o iframe pentru ao afișa astfel încât să funcționeze la fel ca orice altă pagină Web. ( jsfiddle.net/4Fm8D ) EDIT: Documentul părinte trebuie să completeze întregul spațiu sau nu va funcționa. Codul pe care l-am postat nu a fost corect, încă lucrează.
adăugat autor Henrik Karlsson, sursa

S-ar putea să fie necesar să setați și o lățime fie .wrap va avea nevoie de o marcare : 0 auto; pentru .grayContainer

0
adăugat