html - 我试图将这些元素置于背景图像的中心

Question

我目前在将这些元素置于背景图片中时遇到问题。我想要 <p>标签位于 <h1> 下方<p> 下方的标记和按钮标签。我尝试添加 <br>标签来分解它们，但这似乎不起作用。我也在使用语义，所以也许其中一些代码覆盖了我想做的事情？ 任何帮助，将不胜感激!

    .hero-image {
    	background: url('/images/charity.jpg');
        background-position: center,top;
        background-repeat: no-repeat,no-repeat;
        background-size: cover,cover;
        height: 100%;
    
    }
    
        .hero-image:before {
        content: '';
    	position: absolute;
    	top: 0;
    	right: 0;
    	bottom: 0;
    	left: 0;
    	background-image: linear-gradient(to bottom right,#759FA2,#759FA2);
    	opacity: .8; 
      }
    
      .about .wrapper {
      	    padding: 30px 20px 0;
      }
    
    .description{
        color: #505050;
        line-height: 1.4;
    }
    
    .logo-carousel {
     padding: 10px 20px 0;
    }
    
    
    .about {
    
        background-color: #FBFAF8;
        width: 100%;
    }
    
    
    .hero-image .wrapper {
        align-items: center;
        display: -webkit-flex;
        height: 100%;
        position: relative;
    }
    
    .hero-image h1 {
        font-size: 3.125em;
        color: #fff;
        line-height: 1.2;
        text-align: center;
    }
    
    
    .hero-image p {
        color: #fff;
        line-height: 1.2;
        text-align: center;
    }

 <section class="hero-image">
    	<div class="ui container wrapper">
    		<h1>Lorem ipsum dolor sit amet</h1>
    		<br>
    		<p>consectetur adipiscing elit, sed do eiusmod</p>
    		<br>
    		<button class="ui green button">tempor incididunt ut labore</button>
    	</div>
    			  
    </section>
    <section class="ui container stackable logo-carousel">
    	<img src="{{asset('images/zip.png')}}" alt="">
    </section>
    <section class="about">
    <div class="ui container wrapper">
    	<h3 class="ui headline">Welcome to Find Kind Media!</h3>
    	<p class="description">Hi, My name is Marika. I am Web Developer who has a love & passion for helping people.  
    	<br>
    	
    
    	  </p>
    		<img src="{{public_path('images/charity.jpg')}}" alt="">
    		</div>
    </section>

Answer 1

我看到您使用了display: -webkit-flex;。为了让元素以您想要的方式呈现，您需要做的就是向同一类添加 flex-direction: column; 行。这是添加了这一行的解决方案。

我还冒昧地删除了您在 html 中添加的换行符。

 .hero-image {
    	background: url('/images/charity.jpg');
        background-position: center,top;
        background-repeat: no-repeat,no-repeat;
        background-size: cover,cover;
        height: 100%;
    
    }
    
        .hero-image:before {
        content: '';
    	position: absolute;
    	top: 0;
    	right: 0;
    	bottom: 0;
    	left: 0;
    	background-image: linear-gradient(to bottom right,#759FA2,#759FA2);
    	opacity: .8; 
      }
    
      .about .wrapper {
      	    padding: 30px 20px 0;
      }
    
    .description{
        color: #505050;
        line-height: 1.4;
    }
    
    .logo-carousel {
     padding: 10px 20px 0;
    }    
    
    .about {
    
        background-color: #FBFAF8;
        width: 100%;
    }
    
    
    .hero-image .wrapper {
        align-items: center;
        display: -webkit-flex;
        height: 100%;
        position: relative;
        flex-direction: column;
    }
    
    .hero-image h1 {
      display: block;
        font-size: 3.125em;
        color: #fff;
        line-height: 1.2;
        text-align: center;
    }
    
    
    .hero-image p {
      display: block;
        color: #fff;
        line-height: 1.2;
        text-align: center;
    }
    
    .button{
      display: block;
    }

<section class="hero-image">
    	<div class="ui container wrapper">
    		<h1>Lorem ipsum dolor sit amet</h1>
    		<p>consectetur adipiscing elit, sed do eiusmod</p>
    		<button class="ui green button">tempor incididunt ut labore</button>
    	</div>
    			  
    </section>
    <section class="ui container stackable logo-carousel">
    	<img src="{{asset('images/zip.png')}}" alt="">
    </section>
    <section class="about">
    <div class="ui container wrapper">
    	<h3 class="ui headline">Welcome to Find Kind Media!</h3>
    	<p class="description">Hi, My name is Marika. I am Web Developer who has a love & passion for helping people.  
    	<br>
    	
    
    	  </p>
    		<img src="{{public_path('images/charity.jpg')}}" alt="">
    		</div>
    </section>