Question

需要将以下代码添加到响应式网站，但是当我尝试添加H1标题时，它会显示在图像下方，而不会显示在文本的顶部。如何解决这个问题？

.bloque {
    margin-left:auto;
    margin-right:auto;
}
ul li {
    display: block;
}
ul li img {
    display: block;
    margin: 0 auto;
}
ul li p h1 {
    display: block;
}

@media ( min-width: 929px ) {
    ul li {
        display: table;
    }
    ul li img,
    ul li p {
        display: table-cell;
        vertical-align: middle;
        padding: 10px;
    }
}

<div class="bloque">
    <ul class="list-unstyled">
        <li>
            <img src="http://assets2.iavvo.com/assets/badges/badge_top_rating-9c22fb6971659ec79e63302e601816c5.png">
            <h1>TITLE HERE</h1>
            <p>Well, I'm sure I'm in serious need of some moral spankitude, but guess who's not qualified to be my Rabbi? Magic's all balderdash and chicanery.</p>
        </li>
    </ul>
</div>

Answer 1

你只需要在你的HTML上移动img之前移动h1 ......就像这样：

<div class="bloque">
    <ul class="list-unstyled">
        <li>
            <h1>TITLE HERE</h1>
            <img src="http://assets2.iavvo.com/assets/badges/badge_top_rating-9c22fb6971659ec79e63302e601816c5.png">
            <p>Well, I'm sure I'm in serious need of some moral spankitude, but guess who's not qualified to be my Rabbi? Magic's all balderdash and chicanery.</p>
        </li>
    </ul>
</div>

Answer 2

h1{width:100%;margin-left:280%;}

为什么使用表格进行Css布局？

http://codepen.io/damianocel/pen/OyroZP

Answer 3

更改ul li p { display: table-cell;

到ul li p { display: block;

然后如果您想将其全部集中，只需将text-align:center添加到.bloque课程。

另外 ul li p h1不是正确的选择器。你的H1不在你的段落中，所以选择器什么都不做。

如何在文本顶部显示标题h1

3 个答案: