So zentrieren Sie den Inhalt eines absoluten Div horizontal - html, css

Ich verwende die fantastische Bibliothek von Schriftarten horizontal zentriert das Pfeilsymbol. Und DIVs müssen sein absolut Position.

Ich benutze diesen Code, aber es funktioniert nicht.

.arrow {
left: 0;
right: 0;
}

JSFiddle-Demo

Antworten:

3 für die Antwort № 1

Benutzen width:100% absolut div

.home .center {
position: absolute;
bottom: 0;
top:30px;
text-align: center;
width:100%;
}

Aktualisiert Geige

---

2 für die Antwort № 2

Hier ist ein Arbeitsbeispiel. Sie können löschen .Pfeil CSS-Regel, weil es nichts tut.

.home {
margin: 0 auto;
height: 100%;
width: 100%;
position: relative;
margin: 0 auto;
max-width: 960px;
}

.home .center {
position: absolute;
width: 100%;
bottom: 0;
top:30px;
text-align: center;
}

---

1 für die Antwort № 3

Ich habe gerade in Ihr CSS gewechselt und es funktioniert gut.

.home {
margin: 0 auto;
}

.home .center {
margin: 0 auto;
text-align: center;
}
.arrow
margin: 0 auto;
}

Prost!

---

1 für die Antwort № 4

Das sollte funktionieren, probieren Sie es aus.

   .home {
margin: 0 auto;
height: 100%;
width: 100%;
position: absolute;
margin: 0 auto;
max-width: 960px;
}

.center {
position: relative;
bottom: 0;
top:30px;
text-align: center;
}
.arrow
left: 0;
right: 0;

Als Erklärung, warum es funktioniert: Nun, das Wrapper div muss absolut sein, und sein Inhalt muss relativ zu der Position des Wrappers sein, wie Sie möchten. Auf diese Weise wird es einfacher für Sie, wenn Sie weitere relative Divs hinzufügen möchten

---

1 für die Antwort № 5

Versuche dies:

HTML Quelltext:

<div class="home">
<div class="center">
<a class="arrow fa fa-long-arrow-down fa-3x" href="#"></a>
</div>
</div>

CSS-Code:

.home {
margin: 0 auto;
height: 100%;
width: 100%;
position: relative;
margin: 0 auto;
max-width: 960px;
}

.home .center {
position: absolute;
bottom: 0;
top:30px;
text-align: center;
}

.arrow {
}

---