Question

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

＆＃13;

    .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;
    }

＆＃13;

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

＆＃13;

Answer 1

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

此外，我冒昧地删除了你在html中添加的换行符。

＆＃13;

 .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;
    }

＆＃13;

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

＆＃13;

Answer 2

确保分别显示段落，标题和按钮使用 {显示：内联;} 在div元素中。

Answer 3

您是否要为包装器的项目实施.Refresh BackgroundQuery:=False？这就是他们走向横向的原因。

为flexbox的孩子添加包裹和宽度将解决此问题。

ps别忘了浏览器前缀

flexbox

示例小提琴：https://jsfiddle.net/corofb0s/

Answer 4

您尝试将Session("password") = txtPWD.Text元素置于各自的父.wrapper元素中心。将flexbox规则添加到子元素不会起作用。相反，您需要将flexbox规则放在<section>元素上，然后将子<section> div居中。

对于下面的示例，我添加了一个名为.wrapper的类，它将垂直和水平居中于子.visually-centered元素。

＆＃13;

.wrapper

＆＃13;

.hero-image {
  background: url('/images/charity.jpg');
  background-position: center,top;
  background-repeat: no-repeat,no-repeat;
  background-size: cover,cover;
  height: 100%;
  text-align: center;
}

.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 {
  position: relative;
}

.hero-image h1 {
  font-size: 3.125em;
  color: #fff;
  line-height: 1.2;
}


.hero-image p {
  color: #fff;
  line-height: 1.2;
}

/* New helper class to keep things DRY */
.visually-centered {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Used just for the example so that it renders properly. */
.hero-image,
.about {
  height: 400px;
  position: relative;
}

＆＃13;

我试图将这些元素置于背景图像中

4 个答案: