Demo Fiddle

Question

出于某种原因，我的文字不会集中对齐。它在左边一点点。即使我做文本对齐：对，它也不会到达它应该的位置。这是我的HTML文件：

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

这是我的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
}

Answer 1

将您的div文字换入<p>

<div id="login_thingy">
    <p>all the login form, and some content goes here, unfortunately, it does not get centrally aligned.</p>
</div>

附注： 不将直接文字内容置于div

内是一种很好的做法

Fiddle

Answer 2

使用

#container{
text-align:center
}

DEMO

Answer 3

Demo Fiddle

将CSS更改为添加/更改：

#container{
    text-align:center; /* new addition */
}
#login_thingy {
    width: 80%;
    display:inline-block; /* replace margin auto */
    margin-top: 15px;
    font-size: 35px;
    padding: 15px;
}

您只需在父元素（text-align:center）上设置#container，然后在子元素display:inline-block;上设置#login_thingy。然后，您可以删除对margin:auto

的任何使用

Answer 4

将固定宽度应用于login_thingy div的内容，并将margin-left:auto;margin-right:auto;添加到login_thingy div的内容中。

像

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

Answer 5

首先，HTML评论是这样的： 其次你的代码是错误的。在CSS部分中，您输入以下内容：

#login_thingy{
    width: 80%;
    margin: auto;
    margin-top: 15px;
    font-size: 35px;
    padding: 15px;
    text-align: center
}

;末尾没有分号（text-align: center;），这可能是导致此错误的原因。所以正确代码是：

#login_thingy{
    width: 80%;
    margin: auto;
    margin-top: 15px;
    font-size: 35px;
    padding: 15px;
    text-align: center;
}

如果这不起作用，只需使用普通标题，如果您愿意，可将其放在div中。像这样：

<h2 id="login_thingy"> TEXT HERE </h2>

希望这会有所帮助。

文本不会集中对齐

5 个答案:

Demo Fiddle