Question

使用Bootstrap框架。我希望两个按钮居中并且彼此相邻。现在，他们彼此重心并居中。

HTML

        <div class="text-center">

        <h3>test</h3>
        <p><span class="color">Lorem Ipsum is</span> simply dummy text of the printing and typesetting industry. 
        Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, 
         it</p>

        <div class="footer-btn-wrap">
          <div><a class="decor" href="<?php echo esc_url( get_permalink( get_page_by_title( 'About' ) ) ); ?>">About Me</a></div>
          <div><a class="decor" href="javascript:void(0);" onclick="scrolltop();">Miss something?</a></div>
        </div>

    </div><!-- /top-footer -->

CSS

a.decor {
  position: relative;
  display: inline-block;
  font: 600 12px/13px 'Josefin Sans', sans-serif;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 20px 30px;
  margin-right: 15px;
  margin-top: 15px;
  border: 2px solid #000;
  color: #000;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
transition: background-color 0.4s ease;
}

Answer 1

首先，请不要将它们包装在div中，如下所示：

<div class="footer-btn-wrap">
    <a class="decor" href="<?php echo esc_url( get_permalink( get_page_by_title( 'About' ) ) ); ?>">About Me</a>
    <a class="decor" href="javascript:void(0);" onclick="scrolltop();">Miss something?</a>
</div>

Answer 2

为.footer-btn-wrap > div

添加

.footer-btn-wrap > div{
    display: inline-block;
    vertical-align: top;
}

a.decor {
    position: relative;
    display: inline-block;
    font: 600 12px/13px'Josefin Sans', sans-serif;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 20px 30px;
    margin-right: 15px;
    margin-top: 15px;
    border: 2px solid #000;
    color: #000;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    transition: background-color 0.4s ease;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="text-center">
     <h3>test</h3>

    <p><span class="color">Lorem Ipsum is</span> simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, it</p>
    <div class="footer-btn-wrap">
        <div><a class="decor" href="<?php echo esc_url( get_permalink( get_page_by_title( 'About' ) ) ); ?>">About Me</a>
        </div>
        <div><a class="decor" href="javascript:void(0);" onclick="scrolltop();">Miss something?</a>
        </div>
    </div>
</div>

NavigationView

Answer 3

应用包装器更容易居中：

.footer-btn-wrap > div{
    display: inline-block;
    vertical-align: top;
    margin:0 5px;

}
 .footer-btn-wrap {
    display: inline-block;
    margin:0 auto;
}
a.decor {
    position: relative;
    display: inline-block;
    font: 600 12px/13px'Josefin Sans', sans-serif;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 20px 30px;
    margin-top: 15px;
    border: 2px solid #000;
    color: #000;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    transition: background-color 0.4s ease;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="text-center">
     <h3>test</h3>

    <p><span class="color">Lorem Ipsum is</span> simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, it</p>
    <div class="footer-btn-wrap">
        <div><a class="decor" href="<?php echo esc_url( get_permalink( get_page_by_title( 'About' ) ) ); ?>">About Me</a>
        </div>
        <div><a class="decor" href="javascript:void(0);" onclick="scrolltop();">Miss something?</a>
        </div>
    </div>
</div>

Answer 4

只是添加到这篇文章，ØleBjarnstroem是正确的，问题是你有divs包裹你的按钮。

以下是该选项和另一个选项，可在调整大小时将按钮并排放置。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="../../favicon.ico">

    <title>Starter Template for Bootstrap</title>

    <!-- Bootstrap core CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

<style>
body {
  padding-top: 50px;
}
  
a.decor {
  position: relative;
  display: inline-block;
  font: 600 12px/13px 'Josefin Sans', sans-serif;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 20px 30px;
  margin-right: 15px;
  margin-top: 15px;
  border: 2px solid #000;
  color: #000;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
transition: background-color 0.4s ease;
} 
.custom-btn {
  text-transform: uppercase;
  font: 300 14px 'Josefin Sans', sans-serif;  
}
</style>

</head>

<body>

    <nav class="navbar navbar-inverse navbar-fixed-top ">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand " href="#">Project name</a>
        </div>
        <div id="navbar" class="collapse navbar-collapse">
          <ul class="nav navbar-nav navbar-right">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </nav>

<div class="container col-lg-12"><br><br></div>
<div class="container col-lg-12">
    
<h3>This is another option for the buttons.</h3>

    This option will keep the buttons side by side for longer when resized.
<div class="row text-center bg-success">

    <h3>test</h3>
        <p><span class="color">Lorem Ipsum is</span> 
            simply dummy text of the printing and typesetting industry. 
            Lorem Ipsum has been the industry's standard dummy text ever 
            since the 1500s, it
        </p>
    <div class="text-center">
        <a class="btn btn-lg btn-primary custom-btn" href="<?php echo esc_url( get_permalink( get_page_by_title( 'About' ))); ?>">About Me</a>
        
        <a class="btn btn-lg  btn-primary custom-btn" href="javascript:void(0);" onclick="scrolltop();">Miss something?</a>
    </div>

</div><!-- /top-footer -->
    
    
    
    
<h3>This only has the divs removed that wrap the buttons.</h3>
<div class="row text-center bg-info">

        <h3>test</h3>
        <p><span class="color">Lorem Ipsum is</span> 
            simply dummy text of the printing and typesetting industry. 
            Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, it
        </p>

    <div class="footer-btn-wrap">
        <a class="decor" href="<?php echo esc_url( get_permalink( get_page_by_title( 'About' ))); ?>">About Me</a>
        <a class="decor" href="javascript:void(0);" onclick="scrolltop();">Miss something?</a>
    </div>

</div><!-- /top-footer -->

    
<h3>This has the divs that wrap the buttons. (Oringinal Code)</h3>    
<div class="row text-center bg-danger">
        <h3>test</h3>
        <p><span class="color">Lorem Ipsum is</span> 
            simply dummy text of the printing and typesetting industry. 
            Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, it
        </p>

    <div class="footer-btn-wrap">
        <div><a class="decor" href="<?php echo esc_url( get_permalink( get_page_by_title( 'About' ) ) ); ?>">About Me</a></div>
        <div><a class="decor" href="javascript:void(0);" onclick="scrolltop();">Miss something?</a></div>
        </div>

    </div><!-- /top-footer -->
    
</div><!-- /.container -->


    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    
</body>
</html>

水平居中2 divs内联块

4 个答案: