Allign divs to middle of screen by their middle

Question

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.

JsFiddle as an initial try: http://jsfiddle.net/mcfx2593/ – AlBaraa Sh Jan 15 '15 at 09:43 — AlBaraa Sh, Jan 15 '15 at 09:43
Like this - [jsfiddle](http://jsfiddle.net/mcfx2593/1/)? – Vucko Jan 15 '15 at 09:48 — Vucko, Jan 15 '15 at 09:48

score 1 · Answer 1 · answered Jan 15 '15 at 09:54

You can try two methods one is to increase the height and width and the other is to use transform

With transform Fiddle

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 {
            width: 50px;
            height: 50px;
            margin: 15px;
            background-color: #cccccc;
            display: inline-block;
        }
        .app-button:hover {
            transform:scale(1.5,1.5);
            margin: 15px;
            background-color: #cccccc;
            display: inline-block;
        }

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

By changing height and width Fiddle

html, body, .container {
            height: 100%;
        }
        .container {
            display: table;
            vertical-align: middle;
        }
        .vertical-center-row {
            display: table-cell;
            vertical-align: middle;
        }
        .app-button:hover {
            height:100px;
            width:100px;
        }
        .buttons-container {
            vertical-align: bottom;
            text-align: center;
        }
        .app-button {
            width: 50px;
            height: 50px;
            margin: 15px;
            background-color: #cccccc;
            display: inline-block;
            vertical-align:middle;
        }

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

score 1 · Accepted Answer · answered Jan 15 '15 at 09:54

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>

Allign divs to middle of screen by their middle

2 Answers2