Proste wyśrodkowanie obiektu z css i bez hacków

Chcę wyśrodkować obiekt za pomocą CSS i bez hacków, czy to możliwe i jak?

Próbowałem tego, ale mój znacznik p zniknął.

.centered {
  position: fixed;
  top: 50%;
  left: 50%;
}
Author: svarog, 2013-02-15
Source

6 answers

Jest kilka sposobów na wyśrodkowanie elementu. Ale to zależy od tego, jaki jest Twój element i jak go wyświetlamy:

  • Jeśli masz {display:inline; }

    To proste. Możesz po prostu użyć "text-align: center;", aby wyśrodkować tekst, obrazy i divy.

  • Jeśli masz {display:block;}

    To jest trochę trudniejsze. To zależy od położenia obiektu. Obiekt może być względny, absolutny lub stały.

    • Jeśli jest względny; wtedy można użyć "margin:0 auto;", jednak będziesz wymagał wartości szerokości.

    • Jeśli jest ustawiony bezwzględnie, musisz podać swoje wartości "top:" i "left:". Będziesz też potrzebował szerokości. Jeśli znasz Szerokość elementu, najlepszym sposobem jest użycie {left:50%; margin-left:-X}, gdzie X = 1/2 szerokości elementu.

 38
Author: CharlieM,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-07-23 20:05:18

HTML: 

<div>Centered</div>

CSS: 

div {
    margin: 0 auto;
    width: 200px;
}

Przykład na żywo: http://jsfiddle.net/v3WL5/

Zauważ, że margin: 0 auto; będzie miało efekt tylko wtedy, gdy div ma szerokość.

 6
Author: daGUY,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-02-14 20:54:33

Użyj margin: auto w ten sposób: 

margin: 0px auto
 1
Author: Mikhail Vladimirov,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-02-14 20:52:28

Użyj tego do ogólnych celów. Parzyste span lub div, które jest wewnątrz cokolwiek: 

width:inherit; display:block;margin:0 auto;
 1
Author: Sinan ÇALIŞKAN,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-04-07 13:42:46

Użycie:

  1. in-Line usage: Content goes proszę....

  2. Kod CSS:

    #text-align { text-align:center }

Kod HTML:

<div id="text-align">Content goes here....</div>

Http://www.techulator.com/resources/4299-center-Deprecated-tags-HTML.aspx

 0
Author: user3152769,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-08-07 15:29:42

Jeśli nie musisz być position: fixed; możesz po prostu użyć 

<center>
Hello
</center>
To jest przestarzałe w HTML5
 -5
Author: dan,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-09-14 21:45:55