Probleempje bij css centreren
Kan iemand me helpen ik probeer een knopje van mijn formulier te centreren,
maar het blijft op 5px van de rand staan wat ik niet snap:
de code is de voglende:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
input[type=submit]{
background: #fff;
border: 1px solid #ddd;
text-shadow: 0 -1px 0 rgba(0,0,0,0.3);
text-transform:uppercase;
color: #333;
cursor: pointer;
font-size: 15px;
padding: 5px 25px;
margin: 5px auto 0 auto;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-border-radius:4px;
-webkit-box-shadow: 0px 1px 2px rgba(0,0,0,0.3);
-moz-box-shadow: 0px 1px 2px rgba(0,0,0,0.3);
box-shadow: 0px 3px 6px rgba(0,0,0,0.3);
transition: all 0.25s ease-in-out;
-webkit-transition: all 0.25s ease-in-out;
-moz-transition: all 0.25s ease-in-out;
}
background: #fff;
border: 1px solid #ddd;
text-shadow: 0 -1px 0 rgba(0,0,0,0.3);
text-transform:uppercase;
color: #333;
cursor: pointer;
font-size: 15px;
padding: 5px 25px;
margin: 5px auto 0 auto;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-border-radius:4px;
-webkit-box-shadow: 0px 1px 2px rgba(0,0,0,0.3);
-moz-box-shadow: 0px 1px 2px rgba(0,0,0,0.3);
box-shadow: 0px 3px 6px rgba(0,0,0,0.3);
transition: all 0.25s ease-in-out;
-webkit-transition: all 0.25s ease-in-out;
-moz-transition: all 0.25s ease-in-out;
}
En zo ziet het er momenteel uit:
margin: 5px auto 0 auto;
Dat staat er toch als ik me niet vergis ?
Ja, precies. Maar zou dat niet de oorzaak kunnen zijn van je probleem? ;-)
Probeer een width mee te geven.
Heb het al proberen een width mee te geven en blijft steeds hetzelfde geven (tenzij ik een grote width geef dan verbreedt het uiteraard, maar het blijft steeds op 5px van de linker kant).
Die margin: 5px auto 0 auto; is niet het probleem, deze geeft alleen 5 pixels margin aan de bovenkant.
Ja de div heeft text-align: center moet ik dit verwijderen/ aanpassen naar iets anders?
Het is wellicht handig om de bron te vermelden, deze 5px kunnen ook gerust in een ander element zitten in plaats van in je submit. Denk b.v. aan bovenliggend element waarin de submit zit.
Als je in Google Chrome met de rechtermuisknop op een element klikt en Element inspecteren kiest in het snelmenu, kun je rechtsonder precies zien wat de huidige (berekende) CSS-instellingen zijn én waar die vandaan komen.
Ben het met je eens. Zou je de bron kunnen posten? Of eventueel de HTML + CSS kunnen delen. Dit is waarschijnlijk een vrij eenvoudig probleem, maar we moeten wel de oorzaak kunnen vinden.