0

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

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

4 回答 4

2

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

演示

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

div.wrap span {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}
于 2013-08-08T06:14:10.440 回答
1

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

其次，它不垂直对齐的原因是因为vertical-align:middle只适用于表格。所以如果你给它一个属性display:table-cell，它就会为你工作。这是垂直居中的众多方法之一。

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

于 2013-08-08T06:12:59.957 回答
1

尝试类似的东西

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 提到的，在这种情况下不能使用垂直对齐。

于 2013-08-08T06:13:19.537 回答
0

您可以使用垂直对齐图像

padding:30px 0;

检查这个小提琴

于 2013-08-08T06:25:55.560 回答