Twitter Bootstrap Question posted in

How to vertically align div next to padded div? – Twitter bootstrap

I have a div that contains two children, each of which is framed using bootstrap’s columns. However, within these divs, what I need to be able to do is that for the left div, I have some icons that need to vertically aligned and centered relative to the div to the right.

The div to the right contains an anchor tag that acts as a button, and has some padding. This causes the button to extend downwards, and the left div doesn’t occupy the remaining height.

I have attached here a
codepen
to show what I am talking about. 

.shareContainer {
  padding: 28px 0px;
}

.row {
  background: #eee !important;
}

.fa-icon {
  margin-left: 20px;
  font-size: 2.2em;
  color: #ff7350;
}

.button {
  display: inline-block;
  padding: 18px 50px;
  padding-right: 30px;
  font-size: 17px;
  font-weight: 400;
  font-family: "Lato";
  border-radius: 2px;
  letter-spacing: 0.01em;
  color: #fff !important;
  text-transform: uppercase;
  background-color: #fb8669;
  box-shadow: none;
  border: none;
}

.arrowRight {
  float: right;
  margin-left: 20px;
}

.button:active,
.button:focus,
.button:hover {
  text-transform: uppercase;
  color: #fff;
  text-decoration: none;
  cursor: pointer;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

<div class='container shareContainer'>
  <div class='row'>
    <div class="col-sm-8">
      <i class='fa fa-share-square-o fa-icon'></i>
      <i class='fa fa-facebook-square fa-icon'></i>
      <i class='fa fa-twitter fa-icon'></i>
    </div>
    <div class="col-sm-4">
      <a target="_blank" class='button' }>
              register for event <svg class='arrowRight'width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" id="arrow-right"><path d="M9 4l7 8-7 8" stroke="currentColor" stroke-width="2" fill="none" fill-rule="evenodd"></path></svg>
            </a>
    </div>
  </div>
</div>
Tags:

4

Answers


  1. 0

    Use flexbox to vertically align elements:

    .shareIcons {
  display: flex;
  align-items: center;
}

    Codepen demo: https://codepen.io/anon/pen/oeZVoa

    Login or Signup to reply.
  2. 0

    You’ll just need to apply these built-in Bootstrap 4 classes to the LHS div with the icons 

    d-flex 
justify-content-center 
align-items-center

    So, now the shareContainer div will look like this:

    <div class="container shareContainer">
     <div class="row">
          <div class="col-sm-8 d-flex align-items-center justify-content-center"> <=====
            ...
          </div>
          <div class="col-sm-4">
            ...
          </div>
     </div>
</div>

    Here’s a Codepen

    What it does basically is apply these CSS properties:

    display: flex;
justify-content: center;
align-items: center;
    Login or Signup to reply.
  3. 0

    You could just add a margin:auto; to the surrounding container:

    .share {
  margin: auto;
}

    Demo: JSFiddle

    Login or Signup to reply.
  4. 0

    You can use flexbox for your centering

    .shareContainer {
  padding: 28px 0px;
}

.row {
  background: #eee !important;
}

.fa-icon {
  margin-left: 20px;
  font-size: 2.2em;
  color: #ff7350;
}

.flex {
  display: flex; /* new */
  align-items: center; /* new */
}

.button {
  display: inline-block;
  padding: 18px 50px;
  padding-right: 30px;
  font-size: 17px;
  font-weight: 400;
  font-family: "Lato";
  border-radius: 2px;
  letter-spacing: 0.01em;
  color: #fff !important;
  text-transform: uppercase;
  background-color: #fb8669;
  box-shadow: none;
  border: none;
}

.arrowRight {
  float: right;
  margin-left: 20px;
}

.button:active,
.button:focus,
.button:hover {
  text-transform: uppercase;
  color: #fff;
  text-decoration: none;
  cursor: pointer;
}

.right-button {
  margin-left: auto; /* new */
}
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

<div class='container shareContainer'>
  <div class="flex">
      <i class='fa fa-share-square-o fa-icon'></i>
      <i class='fa fa-facebook-square fa-icon'></i>
      <i class='fa fa-twitter fa-icon'></i>
      <a target="_blank" class='button right-button' }>
              register for event <svg class='arrowRight'width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" id="arrow-right"><path d="M9 4l7 8-7 8" stroke="currentColor" stroke-width="2" fill="none" fill-rule="evenodd"></path></svg>
            </a>
    </div>
  </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search