Question

我想知道如何从左侧偏移div /图像等，以便此图像与上面的文本对齐。

我在flatstudios网站http://flatstudio.co/上看到了这一点，其中页眉图像与h1对齐。

我试过这个小提琴，但我似乎无法使这个工作

请参阅此处的小提琴：https://jsfiddle.net/csxqhj8p/2/

.top-image {
    background-image: url(http://via.placeholder.com/1305x630);
    background-position: center center;
    background-repeat: no-repeat; 
    position: absolute;
    width: 100%;
    min-height: 630px;
    background-size: cover;
    left: 58%;
    transform: translateX(-50%);
    -web-kit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
}

Answer 1

左边有填充物，女士的头部是一个与右边对齐的单独图像。这是一个技巧。

调整大小应该如此：

$( window ).resize(function() {
    //do something you like with $(document).width() to make your new padding
    $("#theidofoneofyourdivs").css({"padding-left": ($(document).width() / 10)}); //for example
});

Answer 2

.page-header {
    width: 100%;
    min-height: 400px;
}

.page-header-content {
    padding: 30px 0 88px 20vw;
}

.page-header-text-container {
    width: 100%;
    max-width: 1170px;
    margin: 70px auto 0px;
    position: relative;
    display: flex;
    align-items: left;
    justify-content: start;
}

.page-header h1 {
    font-size: 45px;
    font-weight: bold;
    line-height: 1.1;
    margin: 0px;
}

.page-header p {
    font-size: 18px;
    line-height: 1.5;
    padding-left: 10%;
    max-width: 460px;
    margin: 0px;
}

.content-image {
  padding: 0 0 0 20vw;
}
.top-image {
    background-image: url(http://via.placeholder.com/1305x630);
    background-position: center center;
    background-repeat: no-repeat; 
    width: 100%;
    min-height: 630px;
    background-size: cover;
}

Answer 3

已编辑：使用此

HTML

.page-header {
    width: 100%;
    min-height: 400px;
}

.page-header-content {
    padding: 30px 0 88px;
}

.page-header-text-container {
    width: 100%;
    max-width: 1170px;
    margin: 70px auto 0px;
    position: relative;
    display: flex;

}

.page-header h1 {
    font-size: 45px;
    font-weight: bold;
    line-height: 1.1;
    padding-left: 15px;
    margin: 0px;
}

.page-header p {
    font-size: 18px;
    line-height: 1.5;
    padding-left: 10%;
    max-width: 460px;
    margin: 0px;
}

.content-image {
    display: block;
    max-width: 1170px;
    margin: auto;
    width: 100%;
    height: 100%;
    /*background: #eee;*/
    /*padding-left: 8%;*/
}

.top-image {
    background-image: url(http://via.placeholder.com/1305x630);
    background-position: center center;
    background-repeat: no-repeat; 
    margin-left: 15px;
    min-height: 630px;
    background-size: cover;
    
}

CSS

＆＃13;

<section class="page-header">
    <div class="page-header-content">
        

        <div class="page-header-text-container">
            <h1>LoremIpsun<br/>Dolerea Est</h1>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard</p>
        </div> <!-- page-header-text-container end -->

    </div> <!-- page-header-content end --> 

</section> <!-- page-header end -->

<section class="content-image">
    <div class="top-image">
        
    </div>
</section>

＆＃13;

.page-header {
    width: 100%;
    min-height: 400px;
}

.page-header-content {
    padding: 30px 0 88px;
}

.page-header-text-container {
    width: 100%;
    max-width: 1170px;
    margin: 70px auto 0px;
    position: relative;
    display: flex;

}

.page-header h1 {
    font-size: 45px;
    font-weight: bold;
    line-height: 1.1;
    padding-left: 15px;
    margin: 0px;
}

.page-header p {
    font-size: 18px;
    line-height: 1.5;
    padding-left: 10%;
    max-width: 460px;
    margin: 0px;
}

.content-image {
    display: block;
    max-width: 1170px;
    margin: auto;
    width: 100%;
    height: 100%;
    /*background: #eee;*/
    /*padding-left: 8%;*/
}

.top-image {
    background-image: url(http://via.placeholder.com/1305x630);
    background-position: center center;
    background-repeat: no-repeat; 
    margin-left: 15px;
    min-height: 630px;
    background-size: cover;

}

＆＃13;

{{1}}

如何在图像上进行左偏移，使其与所有视口上方的文本对齐

3 个答案: