Search code examples
csscompatibility

Change text location in CSS


I'm currently using following login form where I want to change the design a bit:

http://html-form-guide.com/php-form/php-login-form.html

I want to place ' Login ' into the middle of the box, instead the left:

I've also found out that you can change the textsize, font etc. in fg_membersite.css (line 17). What's interesting is that in Chrome it IS displayed in the middle, only in Firefox it's shown on the left. Since I'm a new CSS worker I wanted to ask if anybody could help me fixing this incompatiblity problems here.

Since it also contains lots of Javascript based stuff I wasn't sure if I posting source codes here would be sensible, because I'd have to post the whole source anyway then.

Thanks in advance!

EDIT: Much prettier now. Thanks:

http://rapidhdd.com/images/4013242013-10-06_1842.png


Solution

  • Use this for the center text part:

    <form id='login' action='login.php' method='post' accept-charset='UTF-8'>
    <fieldset >
    <legend align="center">Login</legend>
    <input type='hidden' name='submitted' id='submitted' value='1'/>
    
    <label for='username' >UserName*:</label>
    <input type='text' name='username' id='username'  maxlength="50" />
    
    <label for='password' >Password*:</label>
    <input type='password' name='password' id='password' maxlength="50" />
    
    <input type='submit' name='Submit' value='Submit' />
    
    </fieldset>
    </form>
    

    I guess you've changed the HTML code but note the: <legend align="center">Login</legend>

    align="center"

    http://jsfiddle.net/4szBC/


    EDIT:

    Since it seems like align is deprecated you, can do this using by using css.

    legend {
        text-align: center;
    }
    

    If you want the css right in HTML, add it in a <script> tag and place it in <head>. Like this:

    <script type="text/css">
        legend {
            text-align: center;
        }
    </script>
    

    http://jsfiddle.net/4szBC/1/