CODEWITHSUNDEEP
htmlcssvertical-alignment
BluePrint
BluePrint

Reputation: 2134

My vertical align of image doesnt work

Im trying to vertically align three images inside a div. But somehow my vertical alignment doesn't work and I cannot undertand what I'm doing wrong.

My html:

<div class="maketable">
    <div class="makecell" id="cell1">
        <input type="checkbox" id="nutrbox" value="nutrition" onclick="updateChoice()" />
        <label for="nutrbox" onclick="updateChoice()">Jag vill ha näringstabell i slutet av min bok</label>
    </div>
    <div class="makecell" id="cell2">
        <div class="arrowdiv"> 
            <img src="./images/leftarrow.png" width="64px" />
        </div>
        <div id="imagediv"> 
            <img src="./images/pages/part3/nutrition/Nutrition_Front-1.png" width="296px" />
        </div>
        <div class="arrowdiv"> 
            <img src="./images/rightarrow.png" width="64px" />
        </div>
    </div>
</div>

And my css:

.maketable{
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    margin-bottom: 20px;
    display: table;
    clear: both;
}

.makecell{
    vertical-align: middle;
    display: table-cell;
}

#imagediv{
    display: inline-block;
    margin: 30px auto 0px auto;
    width: 296px; 
    height: 420px;
    color: #000;
    border: 1px solid black;
    text-align: center;
}

.arrowdiv {
    display: inline-block;
    width: 64px;
    margin: 3px;
}

The result is the following:

Wrong vertival alignment on arrows

As you can see, I want to have the arrows vertically aligned in the middle of the center picture, but how ever I do it, i cannot get it to work. I've tried fiddling with float but that made it much worse. Can anyone spot what i'm doing wrong?

Upvotes: 0

Views: 111

Answers (2)

Weafs.py
Weafs.py

Reputation: 22992

You need to apply display: inline-block (or table-cell) and vertical-align: middle to .makecell, #imagediv and .arrowdiv.

Fiddle

.maketable {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  margin-bottom: 20px;
  display: table;
  clear: both;
}
.makecell, #imagediv, .arrowdiv {
  vertical-align: middle;
  display: inline-block;
}
#imagediv {
  margin: 30px auto 0px auto;
  width: 296px;
  height: 420px;
  color: #000;
  border: 1px solid black;
  text-align: center;
}
.arrowdiv {
  width: 64px;
  margin: 3px;
}
<div class="maketable">
  <div class="makecell" id="cell1">
    <input type="checkbox" id="nutrbox" value="nutrition" onclick="updateChoice()" />
    <label for="nutrbox" onclick="updateChoice()">Jag vill ha näringstabell i slutet av min bok</label>
  </div>
  <div class="makecell" id="cell2">
    <div class="arrowdiv">
      <img src="http://www.dummyimage.com/64" width="64px" />
    </div>
    <div id="imagediv">
      <img src="http://www.dummyimage.com/296x420" width="296px" />
    </div>
    <div class="arrowdiv">
      <img src="http://www.dummyimage.com/64" width="64px" />
    </div>
  </div>
</div>

Upvotes: 3

cнŝdk
cнŝdk

Reputation: 32145

Just change the display: inline-block; to display: table-cell; and add vertical-align: middle; in your .arrowdiv and #imagediv CSS: 

#imagediv{
 display: table-cell;
 margin: 30px auto 0px auto;
 width: 296px; 
 height: 420px;
 color: #000;
 border: 1px solid black;
 text-align: center;
 vertical-align: middle;
}

.arrowdiv {
  display: table-cell;
  width: 64px;
  margin: 3px;
  vertical-align: middle;
}

Here is a DEMO Fiddle.

Upvotes: 1

Related Questions