Vertically Center Text

Question

I am having an issue with some CSS within my code. Using bootstrap I have created a square which is 400px height, and I would like to have text inside there which is centered vertically. I am using JavaScript to change the text when hovered, the issue here is if the text changes to two lines worth, the CSS then no longer works correctly.

JSfiddle: https://jsfiddle.net/Ljprxkrq/3/ For some reason the Hover does not seem to work in fiddle.

<div class="col-xs-offset-1 col-xs-10 col-sm-offset-0 col-sm-4">
    <div class="navigation-links">
      <h2><a href="#" id="text-display" class="network"
        onmouseover="changeText('More network information here')"
        onmouseout="defaultText()">Network</a></h2>
    </div>
  </div>

.navigation-links {
height: 400px;
}

h2 {
  font-family: 'Open Sans', sans-serif;
  font-size: 40px;
  text-align: center;
  -webkit-font-smoothing: antialiased;
 }

a {
  text-decoration: none;
  color: white;
}

a:hover {
  color: white;
  text-decoration: none;
}

Even better - make a jsfiddle or similar that reproduces the issue. — Devin H., Jun 29 '15 at 19:25
@Adam Fenwick Could i use Javascript/JQuery ? it will solve your issue in a better way. — divy3993, Jun 29 '15 at 19:43

Ahosan Karim Asik · Answer 1 · 2015-06-29T20:16:00.770

1

Try this:

.navigation-links {
  background: #eee none repeat scroll 0 0;
  display: table-cell;
  height: 100px;
  vertical-align: middle;
}

<div class="col-xs-offset-1 col-xs-10 col-sm-offset-0 col-sm-4">
  <div class="navigation-links">
    <h2><a href="#" id="text-display" class="network"
        onmouseover="changeText('More network information here')"
        onmouseout="defaultText()">Network</a></h2>
  </div>
</div>

Update:
you can add class vertical-center with navigation-links like class="navigation-links vertical-center"

demo

edited Jun 29 '15 at 20:16

answered Jun 29 '15 at 19:28

Ahosan Karim Asik

3,219
1
18
27

table-cell unfortunately messes with the bootstrap columns, making the square a different size instead of the full column width – Adam Fenwick Jun 29 '15 at 19:32

score 1 · Answer 2 · edited Jun 20 '20 at 09:12

1

Well, ok, let's start with JSFiddle and Javascript not working.

If you do not specify the wrap setting it defaults to "onLoad". This results with all JavaScript being wrapped in a function run after result has been loaded. All variables are local to this function thus unavailable in the global scope.

Change the wrapping setting to "no wrap" and it'll work:

Source - Screenshot

As for the problem:

Seems like you're using flex already. Why not just use it for vertical alignment as well? Append:

.navigation-links {
    display: flex;
    align-items: center;
}

JSFiddle

edited Jun 20 '20 at 09:12

Community

1
1

answered Jun 29 '15 at 20:04

Gediminas Leikus

68
4

Never thought of that! Thank you for both parts! – Adam Fenwick Jun 29 '15 at 20:09

Vertically Center Text

2 Answers2