Html 为什么会赢'；t在垂直位置将图像置于中心和中间？

这显示了图像。我想在垂直位置显示中间和中间的图像。
但这仍然显示在顶部和左侧。
我该怎么修理

<div class="Row">

    <div class="Box">

        <div class="Left">

            <div class="title"><a href="/communities/california">California</a></div>

            <div class="icon" style=";vertical-align:middle;text-align:center;">
                    <a href="/users/John"><img alt="356" src="/images/356.jpg" style="max-width: 100px; min-width: 100px" /></a>
            </div>

            <div class="message">
                <div class="body"><a data-original-title="California" class="btn" rel="popover" data-placement="top" data-content="Test">Read</a></div>
                    <a href="/users/sign_in" class="btn btn-primary">Message</a>    
            </div>

        </div>

    </div>

</div>

更新

<div class="Row">

    <div class="Box">

        <div class="Left">

            <div class="title"><a href="/communities/california">California</a></div>

            <div class="icon" style="display: table;">
                    <a href="/users/John"><img alt="356" src="/images/356.jpg" style="display: table-cell;vertical-align: middle;text-align: center;" /></a>
            </div>

            <div class="message">
                <div class="body"><a data-original-title="California" class="btn" rel="popover" data-placement="top" data-content="Test">Read</a></div>
                    <a href="/users/sign_in" class="btn btn-primary">Message</a>    
            </div>

        </div>

    </div>

</div>

---

首先，您应该为CSS使用外部样式。这使它更容易改变

其次，它没有垂直对齐的原因是

vertical align:middle

只对表起作用。因此，如果您给它一个属性

display:table cell

，它将适用于您。这是垂直居中的许多方法之一

---

第三，要克服水平对齐，请尝试将

文本对齐：居中

更改为

边距：0自动

。或者您可以将

文本对齐设置为父级。另外，假设从类
left
，听起来它应该位于左侧。首先，您应该为CSS使用外部样式。这使它更容易改变

其次，它没有垂直对齐的原因是
vertical align:middle
只对表起作用。因此，如果您给它一个属性
display:table cell
，它将适用于您。这是垂直居中的许多方法之一

第三，要克服水平对齐，请尝试将
文本对齐：居中
更改为
边距：0自动
。或者您可以将
文本对齐设置为父级。另外，假设类
left
，听起来它应该位于左侧

CSS

#myoutercontainer {
    position: relative
}
#myinnercontainer {
    position: absolute;
    top: 50%;
    height: 10em;
    margin-top: -5em
}

HTML

<div id="myoutercontainer">
    <div id="myinnercontainer">
        <p>Hey look! I'm vertically centered!</p>
        <p>How sweet is this?!</p>
    </div>
</div>


嘿，看！我垂直居中

这有多甜蜜



正如Cody提到的，垂直对齐不能在这种情况下使用。
试试类似的方法

CSS

#myoutercontainer {
    position: relative
}
#myinnercontainer {
    position: absolute;
    top: 50%;
    height: 10em;
    margin-top: -5em
}

HTML

<div id="myoutercontainer">
    <div id="myinnercontainer">
        <p>Hey look! I'm vertically centered!</p>
        <p>How sweet is this?!</p>
    </div>
</div>


嘿，看！我垂直居中

这有多甜蜜



正如Cody提到的，垂直对齐不能在这种情况下使用。
您不能像那样垂直对齐元素，您需要嵌套在元素下的
display:table单元格
属性。我在这里从头开始做了一个例子，它将帮助您解决当前遇到的问题


您不能像这样垂直对齐元素，您需要嵌套在具有
display:table的元素下的
display:table单元格
属性。我在这里从头开始做了一个例子，它将帮助您解决当前遇到的问题


可以使用垂直对齐图像

padding:30px 0;

选中此项
您可以使用

padding:30px 0;

选中此项
请查看我的更新。我根据你的建议修复了它，但它仍然显示相同：（@HUSTEN你能提供小提琴吗？请查看我的更新。我根据你的建议修复了它，但它仍然显示相同：（@HUSTEN你能提供小提琴吗？我根据Alien先生的建议为我的问题添加了更新。但它仍然是相同的：（将样式放在
a
上，而不是
img
我根据埃琳先生的建议对我的问题进行了更新。但仍然是一样的：（将样式放在
a
上，而不是
img