Question

所以我有一个按钮试图在中间居中。如果我指定尺寸，则它不会停留在中间，而是向左移动。

<div class="container">
    <div class="row">
        <div class="col text-center">

            <input class = "btn btn-block btn-primary col-md-2" type="submit" id="sumbit" name="submit" value="Login"/>
            </div>   

    </div>
</div>

Answer 1

我看到您正在使用Bootstrap类，因此首先请确保您将Bootstrap css文件包含在头中。

问题是您在btn上具有“ btn-block”类，它将占用整行，这也将阻止“ text-center”类使按钮居中。

只需删除按钮上的btn-block类，使其仅占用按钮内容所需的空间，并使其像行内元素一样居中。

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
    <div class="row">
        <div class="col text-center">

            <input class="btn btn-primary" type="submit" id="submit" name="submit" value="Login"/>
            </div>   

    </div>
</div>

Answer 2

您只需将（style =“ text-align：center;）添加到div标签

<div class="container">
    <div class="row">
        <div class="col text-center" style="text-align: center;>

            <input class = "btn btn-block btn-primary col-md-2" type="submit" id="sumbit" name="submit" value="Login"/>
            </div>   

    </div>
</div>

Answer 3

添加（样式=“ text-align：center”;）解决了该问题。只要确保在“ center”之后添加第二个引号即可。希望对您有帮助

<div class="container">
    <div class="row">
        <div class="col text-center" style="text-align: center";>

            <input class = "btn btn-block btn-primary col-md-2" type="submit" id="sumbit" name="submit" value="Login"/>
            </div>   

    </div>
</div>

Answer 4

尝试使用text-align：center CSS样式元素。

<div style="text-align: center">
  <div class="container">
    <div class="row">
        <div class="col text-center">

            <input class = "btn btn-block btn-primary col-md-2" type="submit" id="sumbit" name="submit" value="Login"/>
            </div>   

    </div>
</div>
</div>

Answer 5

如果您不想更改宽度，则现在居中。

<center> <input class = "btn btn-block btn-primary col-md-2" type="submit" id="sumbit" name="submit" value="Login"/></center>

我如何居中此按钮

5 个答案: