• 0

Margin and text alignment help


Question

Assalamalaikum (Peace be unto you) to all the Muslims,

And a friendly Hi! to everyone else :)

I'm currently having a problem with aligning a simple form in an html/php file using CSS. I'm a complete beginner and have tried various approaches including setting both left and right margins to auto, by centering the text, and trying to mix the two but am still unable to achieve the results I want.

Here is the source:


<html>
<head>
<style type="text/css">
body
{
margin-left:auto;
margin-right:auto;
}
</style></head>
<body>
<form action="connect_mysql.php" method="POST">
<pre>User Name:<br/> <input type="text" name="user"/><br/></pre>
<pre>Password:<br/> <input type="password" name="pwd"/><br/></pre>
<input type ="submit" name="button" value="Submit"/><br/>
</form>
</body>
</html>
[/CODE]

Basically what I want is to center all the elements but WITHOUT aligning the text to center as well. I want the text margins to start from the left but still be in the center of the page. If you need further clarification, please do ask.

Any help would be much appreciated. Thanks a lot.

Link to comment
Share on other sites

15 answers to this question

Recommended Posts

  • 0

Alaikum-salam!

margin: auto;
text-align: left;

:)

I'm sorry, but this doesn't change anything. I want the elements to appear in the middle of the page, but I don't want "User Name" and "Password" to be center aligned with the text boxes, I want them left-aligned with the text boxes.

Link to comment
Share on other sites

  • 0

Ah, I understand what you want now...

&lt;html&gt;
&lt;head&gt;
&lt;style type="text/css"&gt;
div#login
{
margin: auto;
width: 160px;
}
  &lt;/style&gt;&lt;/head&gt;
&lt;body&gt;
&lt;div id="login"&gt;
  &lt;form action="connect_mysql.php" method="POST"&gt;
  &lt;pre&gt;User Name:&lt;br/&gt; &lt;input type="text" name="user"/&gt;&lt;br/&gt;&lt;/pre&gt;
  &lt;pre&gt;Password:&lt;br/&gt; &lt;input type="password" name="pwd"/&gt;&lt;br/&gt;&lt;/pre&gt;
  &lt;input type ="submit" name="button" value="Submit"/&gt;&lt;br/&gt;
  &lt;/form&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;

Link to comment
Share on other sites

  • 0

Thank you so much for the quick replies. Yes, this is what I wanted.

Just a few more questions:

1) If I want to add a logo in there, do I have to put it in the "login" section? I'm assuming it won't be a problem if I put it by itself since it has no text?

2) If I want to add a title and set it to center, I just do as the above right?

3)

width: 160px;

This essentially sets the width of the object container, am I right?

Link to comment
Share on other sites

  • 0

1. You can create a new div for the logo, and set the logo as a background.

2. Yes. You can also use absolute positioning but usually margin: 0 auto; is used to center containers.

3. Correct. Without a width, it can't know how to properly center the container.

Link to comment
Share on other sites

  • 0

A <div> is simply a container. margin: auto makes the container centered, but a width is required for it to work.

You can by all means put a logo inside the <div>, no problem. There's no need to make a new <div> and use your logo as a background image as Anooxy suggests, you can simply do:

...
&lt;div id="login"&gt;
&lt;img src="logo.jpg" /&gt;
&lt;form action="connect_mysql.php" method="POST"&gt;
...

If you wanted to have text centered inside the div, you could either create a new <div> or do:

span#title
{
text-align: center;
}

...
&lt;div id="login"&gt;
&lt;span id="title"&gt;Please login:&lt;/span&gt;
&lt;img src="logo.jpg" /&gt;
&lt;form action="connect_mysql.php" method="POST"&gt;
...

  • Like 1
Link to comment
Share on other sites

  • 0

@ -Alex-, Thanks for the elaboration, will most definitely help me in the future :)

Link to comment
Share on other sites

  • 0

You can by all means put a logo inside the <div>, no problem. There's no need to make a new <div> and use your logo as a background image as Anooxy suggests, you can simply do:

...
&lt;div id="login"&gt;
&lt;img src="logo.jpg" /&gt;
&lt;form action="connect_mysql.php" method="POST"&gt;
...

In terms of simplicity yeah, but I suggested another div to separate the logo from the actual content, and setting the logo as a background will be less of a headache for positioning the way you want and you got free room for anything to put beside the logo.

Link to comment
Share on other sites

  • 0

You shouldn't use background images for anything other than backgrounds though... if it was done with a background, the logo wouldn't appear when printed. With an <img> it would. In this scenario, an <img> tag is definitely the most correct way to do it.

Link to comment
Share on other sites

  • 0

It's a simple course project we were given with our current skill set which is mainly PHP. I do however prefer the logo in <img> tags, but I'm new at this.

Link to comment
Share on other sites

  • 0

You shouldn't use background images for anything other than backgrounds though... if it was done with a background, the logo wouldn't appear when printed. With an <img> it would. In this scenario, an <img> tag is definitely the most correct way to do it.

You can add invisible text in the div containing the image background and that is more SEO. Based on my experienced it has always worked better. But to each his own.

Link to comment
Share on other sites

  • 0

Please, explain to me how you'd make text 'invisible' on top of an image with multiple colours? The advice you're giving is just plain wrong.

You could put the text in, the give the margin for <p> a huge negative value, then use the print media query to shift it over.

I'm just saying, it can be done. It's still a terrible idea.

Link to comment
Share on other sites

This topic is now closed to further replies.