Ako centralizovať obsah absolútnej div horizontálne - html, css

Používam úžasnú knižnicu fontov. Chcel by som to uviesť horizontálne uprostred ikona šípky. A DIV musia byť absolútny pozície.

Tento kód používam, ale nefunguje.

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

JSFiddle Demo

odpovede:

3 pre odpoveď č. 1

použitie width:100% v absolútnom vyjadrení div

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

aktualizované husle

---

2 pre odpoveď č. 2

Tu je príklad. Môžete ich odstrániť .arrow css pravidlo, pretože to nerobí nič.

.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 pre odpoveď č. 3

Práve som sa zmenil na váš CSS a funguje to dobre.

.home {
margin: 0 auto;
}

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

Na zdravie!

---

1 pre odpoveď č. 4

Toto by malo fungovať, vyskúšať.

   .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;

Ako vysvetlenie funguje: no, obal wrap musí byť absolútny a jeho obsah musí zodpovedať polohe, ktorá je vo vnútri obalu, tak ako budete chcieť. Týmto spôsobom pre vás bude jednoduchšie, ak chcete pridať ďalšie relatívne segmenty

---

1 pre odpoveď č. 5

Skúste to:

HTML kód:

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

Kód CSS:

.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 {
}

---