How to vertically center link buttons on a div?

Question

I'm trying to vertically center links (made into "buttons" with css) and have tried many display options found in other stackoverflow questions. Nothing seems to work while maintaining the full width of the div. And while im at it, how to I attach the div to the very top of the page?

fiddle I made: https://jsfiddle.net/chm7ftvq/3/

I have tried using a wrapper div and changing the display mode to table-cell while using vertical-align:middle, as well as other solutions but nothing has achieved the desired result.

Relevant HTML :

<div id="buttonParent">
  <div id="buttons">

    <a class=esnav href=essays.html target="iMain"> Essays </a>
    <a class=esnav href=genres.html target="iMain"> Genres </a>
    <a class=esnav href=index.html target="iMain"> Index </a>


  </div>
</div>

<img id=raven src="img\raven.png" alt="Raven">

<div id=maininfo> <iframe id="mainFrame" name="iMain" src="essays.html"> </iframe> </div>

Relevant CSS:

.esnav:link,
.esnav:visited {
  background-color: white;
  color: black;
  border: 2px solid green;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
}

.esnav:hover,
.esnav:active {
  background-color: green;
  color: white;
}

#buttonParent {
  box-shadow: 10px 10px 8px 10px #888888;
  background-color: white;
  height: 60px;
}

#buttons {}

@NidhinJoseph with respect to the div with the drop shadow at the top of the screen. — Fekiwaf, Sep 15 '19 at 23:44

score 1 · Answer 1 · answered Sep 15 '19 at 23:46

You can use the CSS flex property to make elements inside a flex-box align centred. More on css-flexbox

#buttonParent {
  box-shadow: 10px 10px 8px 10px #888888;
  background-color: white;
  height: 60px;
  display: flex;
  align-items: center;
}

.esnav:link,
.esnav:visited {
  background-color: white;
  color: black;
  border: 2px solid green;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
}

.esnav:hover,
.esnav:active {
  background-color: green;
  color: white;
}

<div id="buttonParent">
  <div id="buttons">

    <a class=esnav href=essays.html target="iMain"> Essays </a>
    <a class=esnav href=genres.html target="iMain"> Genres </a>
    <a class=esnav href=index.html target="iMain"> Index </a>


  </div>
</div>

How to vertically center link buttons on a div?

1 Answers1