Search code examples
htmlcsstwitter-bootstrapresponsive-slides

Allign divs to middle of screen by their middle

Using bootstrap, I need to have a page with divs (4 initially) as buttons in the middle of the screen, as below image:

Normal mode

I succeeded to do this, but, next, I need to enlarge one of them when mouseover as below image:

Hover mode

so, they are aligned by their middle. and all others will be smaller when another on is hover.

Solution

  • Simply increase the width and height on :hover.

    html, body,
.container {
  height: 100%;
}
.container {
  display: table;
  vertical-align: middle;
}
.vertical-center-row {
  display: table-cell;
  vertical-align: middle;
}
.buttons-container {
  vertical-align: bottom;
  text-align: center;
}
.app-button:hover {
  width: 75px;
  height: 75px;
}
.app-button {
  width: 50px;
  height: 50px;
  margin: 15px;
  background-color: #cccccc;
  display: inline-block;
  vertical-align: middle;
  transition: all 0.5s;
}
    <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row vertical-center-row">
    <div class="col-md-12 buttons-container">
      <a href="#"><div class="app-button"></div></a>
      <a href="#"><div class="app-button"></div></a>
      <a href="#"><div class="app-button"></div></a>
      <a href="#"><div class="app-button"></div></a>
    </div>
  </div>
</div>