1

I am currently attempting to vertically center the buttons with the rest of the '.row'.

Here is currently what I have. I have tried using things like adding style="vertical-align: center;" to different elements but the buttons do not move. The only solution I have found is to move them down with something like 'top: 100px;' but of course that is not an efficient solution since it does not work on all screen sizes

The buttons are in their own div (.col.s3) which helps orient them horizontally on the .row. The object here is to vertically center the two outside buttons to the middle group (.col.s6)

Is there any way to easily vertically center these elements?

Check the example here: https://jsfiddle.net/nn35pj3j/

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.95.3/css/materialize.min.css">
</head>
<body>
    <div class="row">
      <div class="col s3">
        <!-- First Button -->
        <a class="btn-floating btn-small waves-effect waves-light red left" style=""><i class="mdi-content-add"></i></a>
      </div>
      <!-- Middle -->
      <div class="col s6">
        <h2 class="header" style="text-align: center">Buttons</h2>
        <div>
          <a class="waves-effect waves-light btn">One</a>
          <a class="waves-effect waves-light btn">Two</a>
          <a class="waves-effect waves-light btn">Three</a>
          <a class="waves-effect waves-light btn">Four</a>
          <a class="waves-effect waves-light btn">Five</a>
          <a class="waves-effect waves-light btn">Six</a>
          <a class="waves-effect waves-light btn">Seven</a>
        </div>
      </div>
      <div class="col s3">
        <!-- Second Button -->
        <a class="btn-floating btn-small waves-effect waves-light red right"><i class="mdi-content-add"></i></a>
        </div>
      </div>
    </div>

    <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.95.3/js/materialize.min.js"></script>
</body>
</html>
user2639774
  • 23
  • 1
  • 5
  • First, we need your css to really help. Second, you could try moving them down using `%` instead of `px` and that should solve the screen size issue. Generally, when accommodating different screen sizes, all `width` css settings should be in percent. E.g. `width: 17.3%;` – cssyphus Mar 10 '15 at 22:18
  • I have already checked the two threads posted and neither were a solution to this specific problem. Right now, there is no CSS applied to the page. If you copy and paste the code it should run exactly how I see it right now. and the `%` does not move the elements at all. Using something like `style="bottom: -100px;"` works but not `style="bottom: -50%"` positive or negative – user2639774 Mar 10 '15 at 22:22
  • There is is css applied to this page. Check in your HEAD. Also see this post and try it. http://stackoverflow.com/questions/7273338/how-to-vertically-align-an-image-inside-div Put it in a fiddle or snippet. It makes it easier for people who want to help you. – Jeff Mar 11 '15 at 01:04
  • The solution didn't seem to work. Ah yes, there is CSS but I'm importing all of that styling from materialize... I do not have my own written CSS styling. I added a fiddle link to the page, thank you for the tip – user2639774 Mar 11 '15 at 01:23

2 Answers2

1

First of all, you need to put an id to the div containing .btn classes.

Once you name that you can vertically align using a trick from css-tricks:

.div_containing_btn {
  position: relative;
}
.btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

If you want more info on this topic, visit: https://css-tricks.com/centering-css-complete-guide/

0

You will have no luck with float elements, they do not obey vertical-align.

Use display:inline-block; instead, so that the elements could be align vertically.

Please beware of the white space between the inline-blocks elements.

You may change the font-size of the outer level of elements to (0) and then set the font-size back within the element.

.row { font-size:0px;}
.row .col { font-size:12px;}

Fiddle DEMO

Math3w
  • 505
  • 4
  • 13