Bootstrap 让 div 居中对齐 [英] Bootstrap get div to align in the center

查看：33
本文介绍了Bootstrap 让 div 居中对齐的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我试图让我的页脚上的一些按钮与中心对齐，但由于某种原因它似乎不起作用.

<div class="容器"><div class="navbar-text pull-left"><p>你好</p>
<div class="Button" align="center"><a href="#" class="btn btn-warning" onclick="changeLook()">Re</a><a href="#" class="btn btn-warning" onclick="changeBack()">Rs</a>

<div class="navbar-text pull-right"><a href="#"><i class="fa fa-facebook-square fa-2x"></i></a><a href="#"><i class="fa fa-twitter fa-2x"></i></a><a href="#"><i class="fa fa-google-plus fa-2x"></i></a>

我不确定是否需要使用 CSS 使其居中，或者我是否应该只使用对齐，但没有任何效果

解决方案

在引导程序中，您可以使用 .text-center 来对齐中心.还将 .row 和 .col-md-* 添加到您的代码中.

align= 已弃用，

为演示添加了.col-xs-*

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="样式表"/><link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/><div class="footer"><div class="容器"><div class="row"><div class="col-xs-4"><p>你好</p>

<div class="col-xs-4 text-center"><a href="#" class="btn btn-warning" onclick="changeLook()">Re</a><a href="#" class="btn btn-warning" onclick="changeBack()">Rs</a>

<div class="col-xs-4 text-right"><a href="#"><i class="fa fa-facebook-square fa-2x"></i></a><a href="#"><i class="fa fa-twitter fa-2x"></i></a><a href="#"><i class="fa fa-google-plus fa-2x"></i></a>

更新(2017 年 10 月)

对于正在阅读本文并希望使用新版 bootstrap(测试版)的人，您可以使用 Boostrap 以更简单的方式完成上述操作 Flexbox 实用程序类

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="样式表"/><link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/><div class="容器页脚"><div class="d-flex justify-content-between"><div class="p-1"><p>你好</p>

<div class="p-1"><a href="#" class="btn btn-warning" onclick="changeLook()">Re</a><a href="#" class="btn btn-warning" onclick="changeBack()">Rs</a>

<div class="p-1"><a href="#"><i class="fa fa-facebook-square fa-2x"></i></a><a href="#"><i class="fa fa-twitter fa-2x"></i></a><a href="#"><i class="fa fa-google-plus fa-2x"></i></a>

I am trying to get some buttons on my footer to align to the center but for some reason it does not seem to work.

<div class="footer">
  <div class="container">   
    <div class="navbar-text pull-left">
      <p> Hello there </p>
    </div>
        <div class="Button" align="center">  
            <a href="#" class="btn btn-warning" onclick="changeLook()">Re</a>
            <a href="#" class="btn btn-warning" onclick="changeBack()">Rs</a>
        </div>
    <div class="navbar-text pull-right">
      <a href="#"><i class="fa fa-facebook-square fa-2x"></i></a>
      <a href="#"><i class="fa fa-twitter fa-2x"></i></a>
      <a href="#"><i class="fa fa-google-plus fa-2x"></i></a>
    </div>
  </div>
</div>

I am not sure if I need to use CSS to make it go in the middle or if I should just use align, but nothing is working

解决方案

In bootstrap you can use .text-centerto align center. also add .row and .col-md-* to your code.

align= is deprecated,

Added .col-xs-* for demo

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="footer">
  <div class="container">
    <div class="row">
      <div class="col-xs-4">
        <p>Hello there</p>
      </div>
      <div class="col-xs-4 text-center">
        <a href="#" class="btn btn-warning" onclick="changeLook()">Re</a>
        <a href="#" class="btn btn-warning" onclick="changeBack()">Rs</a>
      </div>
      <div class="col-xs-4 text-right">
        <a href="#"><i class="fa fa-facebook-square fa-2x"></i></a>
        <a href="#"><i class="fa fa-twitter fa-2x"></i></a>
        <a href="#"><i class="fa fa-google-plus fa-2x"></i></a>
      </div>
    </div>
  </div>
</div>

UPDATE(OCT 2017)

For those who are reading this and want to use the new version of bootstrap (beta version), you can do the above in a simpler way, using Boostrap Flexbox utilities classes

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container footer">
  <div class="d-flex justify-content-between">
    <div class="p-1">
      <p>Hello there</p>
    </div>
    <div class="p-1">
      <a href="#" class="btn btn-warning" onclick="changeLook()">Re</a>
      <a href="#" class="btn btn-warning" onclick="changeBack()">Rs</a>
    </div>
    <div class="p-1">
      <a href="#"><i class="fa fa-facebook-square fa-2x"></i></a>
      <a href="#"><i class="fa fa-twitter fa-2x"></i></a>
      <a href="#"><i class="fa fa-google-plus fa-2x"></i></a>
    </div>
  </div>
</div>

这篇关于Bootstrap 让 div 居中对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆