Question

显示图像。我想在垂直位置显示中心和中间的图像但这仍然显示在顶部和起草我该如何解决？

<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>

Answer 1

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

Demo

div.wrap {
    display: table;
    height: 100px;
    width: 100px;
    border: 1px solid #f00;
}

div.wrap span {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

Answer 2

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

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

第三，要克服水平对齐，请尝试将text-align:center更改为margin:0 auto。或者您可以将text-align设置为父级。另外，从类left开始，听起来应该位于左侧

Answer 3

尝试类似

的内容

<强> 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所说， vertical-align 不能在这种情况下使用。

Answer 4

您可以使用

垂直对齐图像

padding:30px 0;

选中此fiddle

为什么这不会将图像置于垂直位置的中心和中间？

4 个答案: