jak zrobić div centrum poziomo ze stałą pozycją?

chcę div być centrum poziomo, kod css to:jak zrobić div centrum poziomo ze stałą pozycją?

<style type="text/css"> 
#footer{ 
    position: fixed; 
    bottom: 20px; 
    background-color: red; 
    width:500px; 
      margin: auto;/*left:auto; right:auto;*/ 
} 
</style>

i kod html:

<body> 
<div id="footer">hello world</div> 
</body>

myślę, że nie ma potrzeby, aby wyjaśnić mój kod CSS, to jest prawie samo- wyjaśnienie, ale div nie jest centrum w poziomie, czy jest jakiś sposób, aby to zrobić? Z góry dzięki.

Źródło

2013-04-17 hiway

pozycja: stała i margines: auto; nie pracuję dobrze razem, pracuję nad rozwiązaniem dla ciebie. –

Try This

#footer{ 
    position: fixed; 
    bottom: 20px; 
    background-color: red; 
    width:80%; 
    margin: 0 0 0 -40%; 
    left:50%; 
}

JS Fiddle Example

Point to należy zauważyć, negatywne margin-left stanowi dokładnie połowę wartość width i ustaw left 50% masy ciała

Źródło

2013-04-17 11:32:36 Sachin

Twoja odpowiedź i @ gregbenner używają tej "sztuczki", przede wszystkim, dziękuję. Właśnie przeszukałem google, a inni też używają tego w ten sposób, zastanawiam się, czy nie ma sposobu na "podstęp", aby to zrobić? – hiway

To naprawdę dobre rozwiązanie. Ale nie jest to dokładnie to, co chce robić. W ten sposób stopka stanie się responsywna i nie będzie miała stałej szerokości 500 pikseli. –

ya @ Nick, ale wspomniałem również, że lewę za tym. (s) może łatwo zmienić wymiary, które lubi. – Sachin

Umieść kolejny element div w pozycji względnej, margines: auto. Podaj stałą szerokość 100%.

przeciwnym razie można siekać je z ujemną marżą 'Trick'

div { 
    position: fixed; 
    left: 50%; 
    width: 500px; 
    margin-left: -250px; 
}

Źródło

2013-04-17 11:30:05

To powinno dobrze działać. Działa poprzez dodanie elementu div kontenera.

<style> 

#footer-container{ 
    position: fixed; 
    bottom: 0; 
    left: 0; 
    width: 100%; 
    text-align: center; 
} 

#footer 
{ 
    width:500px; 
    margin:0 auto; 
    margin-bottom:20px; 
    background-color:red; 
} 
</style> 


<div id="footer-container"> 
     <div id="footer">hello world</div> 
</div>

Źródło

2013-04-17 11:37:59

" text-align: center; " spowoduje, że tekst się wyśrodkuje, a IE6 zadziała. jeśli nie chcesz centrum, ale jak IE6 do pracy. dodaj text-align: left do div #footer. –

Jeśli pracujesz z nowoczesnych przeglądarek, można użyć modułu układu schematu flexbox: http://caniuse.com/#feat=flexbox.

schematu flexbox dokumentacja: developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes
Uwaga: Nie można dodawać więcej niż dwa linki z powodu mojego rep.

JSFiddle.

(Korzystanie z footer tag zamiast div#footer jak to prostsze.)

<div id="footer-container"> 
    <footer>hello world</footer> 
<div>

#footer-container { 
    bottom: 20px; 
    position: fixed; 

    display: flex; 
    justify-content: center; 
    width: 100%; 
} 

footer { 
    width: 500px; 

    background-color: red; 
}

justify-content: center;#footer-container „s children 'centra', która jest po prostu elementem w tym przypadku footer.

Jest to bardzo podobne do rozwiązania Nicka N., z tym że nie trzeba resetować właściwości text-align w stopce, i że jest to prawdopodobnie sposób, który nie jest "sztuczny".

Przyjęte rozwiązanie jest nieznacznie wyłączone, ponieważ szerokość stopki w tym przypadku jest zmienna (80%) zamiast przy 500px.

do innych czytelników, jeśli rodzic jest elementem form, a dziecko jest elementem input, użyj flex: 1; na (dziecko) elementu input i używać max-width: 500px; zamiast width: 500px;.Użycie numeru flex: 1; powinno spowodować rozwinięcie elementu input w celu wypełnienia szerokości elementu form, co w przeciwnym razie mogłoby nie spowodować.

Źródło

2014-12-25 05:09:40 xd1le

To rozwiązanie działa świetnie. Powinien naprawdę mieć sposób oznaczania odpowiedzi jako "nowoczesne przeglądarki", abyśmy mogli sortować je na szczyt, gdy obsługują tylko nowoczesne przeglądarki. –

jak zrobić div centrum poziomo ze stałą pozycją?

Odpowiedz

Powiązane problemy