Napis 'Rejestracja' jest w środku przycisku, ale napis 'Logowanie' jest poniżej środka przycisku.

pytanie zadane 12 kwietnia 2016 w HTML i CSS przez Krzysiek_34 Mądrala (6,050 p.)

Witam.

<input type="submit" name="login_in" value="Logowanie" class="inpLogowanie">
<a href="rejestracja.php" class="inpRejestracja">Rejestracja</a>

input.inpLogowanie[type="submit"]
{
	width: 80px;
	padding: 4px;
	background-color: #1B7FA6;
	color: white;
	font-size: 12px;
	cursor: pointer;
	border: none;
	text-decoration: none;
	position: relative;
	margin-top: 5px;
	margin-bottom: 25px;
	top: 20px;
	left: 34px;
}

.inpRejestracja
{
	width: 80px;
	padding: 4px;
	background-color: #319116;
	color: white;
	font-size: 11px;
	text-align: center;
	cursor: pointer;
	border: none;
	text-decoration: none;
	position: relative;
	top: 20px;
	left: 34px;
	display: block;
}

Szerokość przycisku 'Logowanie' i 'Rejestracja' ma zapisane 80px, ale w rezultacie przycisk 'Logowanie' ma krótszą szerokość o 5-10px. W dodatku napis 'Logowanie' jest poniżej środka przycisku. Zastosowałem w Logowaniu style, np.: line height: 4px; albo text-align: center;, ale nie dało to żadnego efektu.

Co muszę poprawić w kodzie, aby napis 'Logowanie' był w środku przycisku?

2 odpowiedzi

odpowiedź 12 kwietnia 2016 przez mitelak Pasjonat (23,330 p.)
edycja 12 kwietnia 2016 przez mitelak

http://codepen.io/mitelak/pen/mPXvaZ

Przyciski nie były takie same z dwóch powodów

font-size w jednym wynosił 12px a w drugim 11px
font-family było różne jeden napis miał font bezszeryfowy, a drugi szeryfowy

Jeżeli poprawi się te dwie rzeczy to wygląda wszystko normalnie, jedyne co można dodać to jednakową szerokość

komentarz 12 kwietnia 2016 przez Krzysiek_34 Mądrala (6,050 p.)

Aktualnie font-size w obu przyciskach wynosi 11px, a font-family ustawiony jest domyślnie jako verdana.

komentarz 12 kwietnia 2016 przez mitelak Pasjonat (23,330 p.)
edycja 12 kwietnia 2016 przez mitelak

Pod tym samym linkiem po edycji http://codepen.io/mitelak/pen/mPXvaZ

Różna szerokość wynika z paddingu, który inaczej działa na inputz a inaczej na tekst.
Wystarczy podać tylko wartości w pionie dla paddingu (boki i tak są ustalane poprzez width)

ps dalej pozostaje kwestia, że w pionie button z linku jest o 2px niższy. Żeby to naprawić można, albo dać line-height: 14px dla tego elementu, albo padding-top i bottom o jeden większy ;)

komentarz 12 kwietnia 2016 przez Krzysiek_34 Mądrala (6,050 p.)

A możesz swój kod wrzucić na jsfiddle albo tutaj? Bo na codepen.io nie widzę kodu.

komentarz 12 kwietnia 2016 przez mitelak Pasjonat (23,330 p.)

input.inpLogowanie[type="submit"], .inpRejestracja
{
    background-color: #1B7FA6;
    color: white;
    font-size: 12px;
    cursor: pointer;
    border: none;
    text-decoration: none;
    position: relative;
    margin-bottom: 25px;
    top: 20px;
    left: 34px;
	/* po edycji */
	font-family: Arial;
	width: 100px;
	text-align: center;
	padding-top: 5px;
	padding-bottom: 5px;
}
 
.inpRejestracja
{
    background-color: #319116;
    display:block;
    padding-top: 6px;
    padding-bottom: 6px;
}

Np coś takiego :D

komentarz 12 kwietnia 2016 przez Krzysiek_34 Mądrala (6,050 p.)

Pokombinowałem z paddingami i jest OK.

Wielkie dzięki za pomoc.

odpowiedź 12 kwietnia 2016 przez jpacanowski VIP (101,940 p.)

http://codepen.io/anon/pen/EKQrgX

Jak to nie jest po środku?

komentarz 12 kwietnia 2016 przez Krzysiek_34 Mądrala (6,050 p.)

Nie widzę tam kodu. Możesz wkleić kod na jsfiddle albo tutaj?

komentarz 12 kwietnia 2016 przez Krzysiek_34 Mądrala (6,050 p.)

W praktyce wygląda to mniej więcej tak:

__________________________________

Logowanie

-----------------------------------------

Jak widać, napis nie jest w środku przycisku.

komentarz 12 kwietnia 2016 przez jpacanowski VIP (101,940 p.)

https://jsfiddle.net/fpjpcwdg/

komentarz 12 kwietnia 2016 przez Krzysiek_34 Mądrala (6,050 p.)

Dalej jest to samo. Jak widać, napis nie jest w środku przycisku:

__________________________________

Logowanie

-----------------------------------------

Zauważ, to widać, że nie jest wyśrodkowany.

komentarz 12 kwietnia 2016 przez jpacanowski VIP (101,940 p.)

U mnie jest dobrze, a jestem chory na każdą nierówność nawet o 1px.

komentarz 12 kwietnia 2016 przez Krzysiek_34 Mądrala (6,050 p.)

Już niech będzie to wyśrodkowanie. Ostatni problem to różnica w szerokości przycisków. Z kodu w stylach CSS wynika, że szerokość obu przycisków powinna być taka sama. Przetestuj taki zapis, a resztę kodu zostaw bez zmian:

input.inpLogowanie[type="submit"]
{
	width: 80px;
	padding: 4px;
	background-color: #1B7FA6;
	color: white;
	font-size: 11px;
}

.inpRejestracja
{
	width: 80px;
	padding: 4px;
	background-color: #319116;
	color: white;
	font-size: 11px;
	display: block;
}

Zauważ, że szerokość jest taka sama w stylach, rozmiar czcionki ten sam w stylach, ale w rezultacie szerokość przycisku 'Logowanie' jest krótsza o 5-10px.

Pewnie przyczyną jest to, że oba przyciski są innego typu.