CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
user3550879
user3550879

Reputation: 3469

Horizontal centering 2 divs inline-block

Using Bootstrap framework. I want the two buttons to be centred and beside each other. Right now they are centred overtop each other and centred.

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

Upvotes: 0

Views: 46

Answers (4)

AngularJR
AngularJR

Reputation: 2762

Just to add to this post, Øle Bjarnstroem was right the issue was that you had divs that wrapped your buttons.

Here is that option and another option that will keep your buttons side by side longer when resized. 

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

Upvotes: 0

maioman
maioman

Reputation: 18734

applying a wrapper it's easier to center:

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

Upvotes: 0

Dmitriy
Dmitriy

Reputation: 4503

add display: inline-block; for .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>

Upvotes: 1

Ole Spaarmann
Ole Spaarmann

Reputation: 16749

For a start don't wrap them in divs like so:

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

Upvotes: 1

Related Questions