我的图像垂直对齐不起作用
My vertical align of image doesnt work
我试图在 div 中垂直对齐三个图像。但是不知何故我的垂直对齐不起作用,我无法理解我做错了什么。
我的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>
还有我的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;
}
结果如下:
如您所见,我想让箭头在中心图片的中间垂直对齐,但我怎么都做不到。我试过摆弄浮动,但这让情况变得更糟。谁能发现我做错了什么?
您需要将display: inline-block
(或table-cell
)和vertical-align: middle
应用到.makecell
、#imagediv
和.arrowdiv
。
.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>
只需将 display: inline-block;
更改为 display: table-cell;
并在 .arrowdiv
和 #imagediv
中添加 vertical-align: middle;
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;
}
这里是DEMO Fiddle.
我试图在 div 中垂直对齐三个图像。但是不知何故我的垂直对齐不起作用,我无法理解我做错了什么。
我的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>
还有我的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;
}
结果如下:
如您所见,我想让箭头在中心图片的中间垂直对齐,但我怎么都做不到。我试过摆弄浮动,但这让情况变得更糟。谁能发现我做错了什么?
您需要将display: inline-block
(或table-cell
)和vertical-align: middle
应用到.makecell
、#imagediv
和.arrowdiv
。
.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>
只需将 display: inline-block;
更改为 display: table-cell;
并在 .arrowdiv
和 #imagediv
中添加 vertical-align: middle;
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;
}
这里是DEMO Fiddle.