Wyśrodkowanie każdego elementu w CSS

Demo:

To jest wyśrodkowany element

Bardzo często zdarza się, że potrzebujemy ustawić napis, czy element dokładnie wyśrodkowany względem strony, czy jakiegoś innego elementu.

Nie rzadko bywają z tym problemy. Wpis ten przedstawia kilka ciekawych rozwiązań tego problemu. Wszystkie metody oparte są wyłącznie na stylach css.

Wyśrodkowanie dla tekstu

Jeśli tekst jest wyłącznie jedynym elementem w obiekcie, który dodatkowo nie jest ograniczony minimalną wysokością. W takim przypadku gramy wyłącznie paddingiem.

Wyśrodkowany znacznik H3

.ewd_center h3
{
	text-align:center;
}

Jeśli natomiast tekst znajduje się w obiekcie, który mam inne dodatkowe elementy, bądź jest np. o wysokości okna przeglądarki padding odpada. W takim przypadku możemy zastosować display table oraz table-cell.

Wyśrodkowany znacznik H3

.ewd_center.height
{
	height:250px;
	display:table;
}
.ewd_center.height h3
{
	display:table-cell;
	vertical-align:middle;
	text-align:center;
}

Wyśrodkowanie dla obiektu

Dla obiektu, który tak jak powyższy przykład z nieograniczeniem wysokościowym można ustawić poprzez polecenie margin.

to jest środek
.ewd_center div
{
	width:200px;
	margin: 20px auto;
}


Dla obiektu, którego wszystkie elementy mają na sztywno przypisane parametry wysokości oraz szerokości.

.ewd_center.const
{
	width:500px;
	height:100px;
	margin:10px auto;
	position:relative;
}
.ewd_center.const div
{
	background:#708090;
	width:20px;
	height:20px;
	border:0;
	position:absolute;
	left:240px;
	top:40px;
	margin:0;
	padding:0;
}

Dla obiektu, który nie ma zdeklarowanej szerokości ani wysokości, czyli jest zależne od contentu, w takim przypadku można zastosować poniższe rozwiązanie.

Zawsze na środku

.ewd_center.respo
{
	widtH:100%;
	height:300px;
	position:relative;
}
.ewd_center.respo h1
{
	color: white;
	font-size: 34px;
	font-weight: 400;
	left: 50%;
	letter-spacing: -0.02em;
	line-height: 1.1;
	max-width: 960px;
	padding: 0 3%;
	position: absolute;
	text-rendering: optimizelegibility;
	top: 50%;
	transform: translate(-50%, -49%);
	width: 100%;
	text-align: center;
}

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *

CAPTCHA
Change the CAPTCHA codeSpeak the CAPTCHA code