Problem z tekstem i listami html i css

Question

Siemano. Przy użyciu <div class="text-center"> wszystko przechodzi mi ładnie do środka i pięknie to wygląda. Wszystko z wyjątkiem listy <ul> kropki które są przy <li> pozostają w lewej części i bardzo brzydko to wygląda. Chcioałbym aby to również przeszło do środka. Jak mogę to zrobić?

Dodam, iż przy użyciu tego: "div style="width: 25%; margin-left: auto; margin-right: auto;">" wszystko wygląda tak:

http://scr.hu/0w2qu/vfi6h

a ja chce aby te kropki byly od razu przy tekscie ;/

Answer 1

Możesz to zrobić za pomocą pseudobloków, encja na kropkę to bodajże \b7 - wcześniej ustaw jednak list-style-type na none.

Comments

Witam. Tak jak Radek024. To jest rozwiązanie.

ol{
  list-style-type: none; 
}
li{
  text-align: center;
}
li:before{
  content:"\002022";
  color: red;
}

Fajne w tej metodzie jet to, że możesz użyć dowolnej encji html.

 

Answer 2

Pokaż więcej kodu, bo przykładowo przy takim kodzie: http://codepen.io/anon/pen/QGZpZg - działa normalnie. Jednak nie, na firefoxie chyba jedynie działa.

EDIT:

do listy przypisz wyświetlanie liniowo-blokowe:

ul{
  display: inline-block;
}

 

Comments

Raczej dodałbym padding: 0; ponieważ listy domyślnie mają lewy padding. A display:inline-block; spowoduje, że cała lista przesunie się do lewej krawędzi swojej szerokości, chyba, ze tak ma być.

---

Dodaj i zobacz co się stanie

A display:inline-block; spowoduje, że cała lista przesunie się do lewej krawędzi swojej szerokości

Wystarczy, że rodzic będzie miał text-align: center; i po problemie.