Question

我是CSS的新手，我在调整内容方面遇到了很多困难。

目前，我有<h1>和<h2>文字和图片。我希望<h2>文字位于<h1>文字正下方，我希望此<h1>-<h2>块位于该文件的左上角屏幕。我希望图像与文本内联，但以屏幕中间为中心。这就是我到目前为止所做的：

.header img {
    width: 525px;
    height: 188px;
    text-align: center;
    position: relative:
}

.header h1{
    position: absolute;
    left: 15px;
    top: 35px;
    font-family: 'Tehuti';
    font-size: 3em;
    margin: .2em .5em;
    color: rgba(0,0,0, 0.3);

}
.header h2{
    font-family: 'Tehuti';
    font-size: 3em;
    margin: .2em .5em;
    color: rgba(0,0,0, 0.3);
    background-color: rgba(37, 39, 37, 0.07);
    float: left;
}

我无法让我的生活得以实现。任何帮助将不胜感激。

Answer 1

由于您使用absolute定位布局，您可以absolute将<img>定位到屏幕中心，并使用以下样式：

.header img {
    position: absolute;
    left:50%;
    transform:translateX(-50%);
}

有关演示（fiddle）

，请参阅此fullscreen

Answer 2

1 ：text-align对齐元素内的内容，因此将text-align: center设置为.header img将不会使img居中对齐。

2 ：h1和h2默认为display: block，这就是为什么它放在另一个下面，设置display: inline-block或inline彼此相邻。

现在您可以float: left h1和h2将text-align: center设置为div .header，但您会注意到img不会在屏幕中间居中

这样做

＆＃13;

h1, h2{
    display: inline-block;
    font-family: 'Tehuti';
    font-size: 1em;
    margin: .2em .5em;

    color: rgba(0,0,0, 0.3);
}

.header h2{
    background-color: rgba(37, 39, 37, 0.07);
}

.header{
    text-align: center;
}

.header img {
    width: 100px;
    height: 100px;
}

.h-content{
    position: absolute; /*If you want it to be always on the top-left of the screen, even when scrolls set fixed*/
    left: 15px;
    top: 35px;
}

＆＃13;

<div class="header">
    <div class="h-content">
        <h1>I'm a h1</h1>
        <h2>I'm a h2</h2>
    </div>
    <img src="http://i.stack.imgur.com/gijdH.jpg?s=328&g=1" alt=""/>
</div>

＆＃13;

我希望这可以帮到你

使用CSS将HTML标题与图像对齐

2 个答案: