Question

如何在中心对齐内容？

目前标题文字
和
登录/密码输入字段
未在中心对齐，并单独对齐

例：
＆＃34;头1＆＃34;
＆＃34;头2＆＃34;
....＆＃34;登录＆＃34;
....＆＃34;密码＆＃34;
....＆＃34;按钮＆＃34;

标题字段：

<body>
    <div class="headerLogo" align="center">
        <img src="images/login.png"><br><br><br>
        <h1 class="form-signin-heading">
            <b>header1header1</b>
        </h1>
        <h3 class="form-signin-heading">
            headerheader2
        </h3>
    </div><br><br><br><br><br>

登录输入字段：

    <div class="container">
    <form class="form-signin" method="Post">
        <input type="text" id="email" class="form-control"  placeholder="email"> 
        <input type="password" id="password" class="form-control" placeholder="pwd"> 
        <label class="checkbox"> 
        <input type="checkbox" value="remember-me">
            Keep Login
        </label>
        <button class="btn btn-lg btn-info btn-block" type="submit">
            <b>로그인</b>
        </button>
        <div class="row">
            <div class="col-md-6">
            <a class="btn btn-lg btn-primary btn-block"><b>Email Join</b></a>
        </div>

        <div class="col-md-6">
            <a class="btn btn-lg btn-primary btn-block"><b>Find Password</b></a>
        </div>
        </div>
        </form>
    </div>
</body><!-- /container -->

Answer 1

仅限中心占位符文本不受浏览器支持。对于safari和mozilla（似乎在chrome中工作），您可以使用：

::-webkit-input-placeholder {
    text-align:center;
}
input:-moz-placeholder {
    text-align:center;
}

DEMO

如果您对用户输入的文本也是正确的，请使用：

input {
    text-align:center;
}

编辑：我假设你正在使用bootstrap。

Answer 2

尝试<div class="container" style="margin-right:30px">如果不能将它放到jsfiddle上会有所帮助。

Answer 3

如果你使用的是bootstrap，而你的代码就是你的代码，你可以通过添加类＆＃34; text-center＆＃34;来居中文本。

<p class="text-center">aligned center</p>

引导程序中提供了一些其他有用的对齐方式：

<p class="text-left">aligned left</p>
<p class="text-right">aligned right</p>
<p class="text-justify">justified</p>

对齐中心css中的内容

3 个答案: