• 0

Margin and text alignment help

Asked by Mohammad_Khalid_Hussain,

 Share

Question

Collaborator

Mohammad_Khalid_Hussain

Posted
Posted

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
https://www.neowin.net/forum/topic/1045457-margin-and-text-alignment-help/
Share on other sites

15 answers to this question

Recommended Posts

  • 0
Collaborator

Mohammad_Khalid_Hussain

Posted
  • Author
Posted
  On 16/12/2011 at 01:10, -Alex- said:

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.

  • 0
Grand Master

-Alex-

Posted
Posted

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;

  • 0
Collaborator

Mohammad_Khalid_Hussain

Posted
  • Author
Posted

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?

  • 0
Community Regular

Anooxy

Posted
Posted

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.

  • 0
Grand Master

-Alex-

Posted
Posted

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;
...

  • Mohammad_Khalid_Hussain
  • Like 1
  • 0
Community Regular

Anooxy

Posted
Posted
  On 16/12/2011 at 01:43, -Alex- said:

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.

  • 0
Grand Master

-Alex-

Posted
Posted

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.

  • 0
Community Regular

Anooxy

Posted
Posted
  On 16/12/2011 at 03:13, -Alex- said:

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.

  • 0
Grand Master

threetonesun

Posted
Posted
  On 16/12/2011 at 16:50, -Alex- said:

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.

This topic is now closed to further replies.
 Share
Go to question listing