Question
For some reason, my text just wont get centrally aligned. It is a little to the left. Even when I do text-align: right, it does not go to the place where it should. Here's my HTML file:
https://stackoverflow.com/questions/22505988
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian<html>
<head>
<title>foo</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="icon" type="image/x-icon" href="images/favicon.png" />
<link rel="icon" type="image/png" href="images/favicon.png" />
<link rel="icon" type="image/gif" href="images/favicon.png" />
</head>
<body>
<div id="strapwrap">
<div id="strap">
<div id="menu"><span id="sub"><a href="./">Home</a></span> <span id="sub"><a href="plans">Plans</a></span><span id="sub"><a href="faq">FAQ</a></span></div>
<div id="logo">
<a href="./"><img src="images/logo.png" /></a>
</div>
</div>
</div><div id="container">
<div id="login_thingy">
//all the login form, and some content goes here, unfortunately, it does not get centrally aligned.
</div>
</div>
Here's my style.css
body{
margin: 0;
background-image: url('http://athile.net/library/blog/wp-content/uploads/2011/11/grass02-300x300.png');
}
#strapwrap{
background-color: #000000;
color: white;
width: 100%;
height: 75px;
top: 0;
bottom: 0;
right: 0;
left: 0;
}
a{
color: inherit;
text-decoration: inherit;
}
#strap{
width: 80%;
margin: auto;
margin-top: 0;
margin-bottom: 0;
}
#menu{
font-size: 25px;
height: 75px;
float: right;
margin: 0;
padding-top: 25px;
padding-bottom: 25px;
word-spacing: 25px;
}
#sub:hover{
border-bottom: 1px dotted #ffffff;
}
#login_thingy{
width: 80%;
margin: auto;
margin-top: 15px;
font-size: 35px;
padding: 15px;
text-align: center
}
Solution 2
Change your CSS to add/alter:
#container{
text-align:center; /* new addition */
}
#login_thingy {
width: 80%;
display:inline-block; /* replace margin auto */
margin-top: 15px;
font-size: 35px;
padding: 15px;
}
All you need is to set text-align:center on the parent element (#container) then display:inline-block; on the child (#login_thingy). You can then remove any use of margin:auto
OTHER TIPS
Wrap your div text inside <p>
<div id="login_thingy">
<p>all the login form, and some content goes here, unfortunately, it does not get centrally aligned.</p>
</div>
Side Note: It's a good practice to not to place direct text content inside the div
Apply fixed width to the contents of login_thingy div and add margin-left:auto;margin-right:auto; to the contents of login_thingy div.
Like
<div id="login_thingy">
<div style="width:50%;margin-left:auto;margin-right:auto;">all the login form, and some content goes here, unfortunately, it does not get centrally aligned.</div>
</div>
First of all HTML comments are like this: <!-- TEXT HERE -->
Second of all you code is wrong. In the CSS part you have type this:
#login_thingy{
width: 80%;
margin: auto;
margin-top: 15px;
font-size: 35px;
padding: 15px;
text-align: center
}
Without a semicolon (;) at the end of text-align: center; which may be the reason you are getting this error. So the correct code is:
#login_thingy{
width: 80%;
margin: auto;
margin-top: 15px;
font-size: 35px;
padding: 15px;
text-align: center;
}
If that doesn't work, just use a normal header and put it inside a div if you wish. Like so:
<h2 id="login_thingy"> TEXT HERE </h2>
Hope this helped.
