垂直对齐多条线，包括h1和p元素

Question

我想让我的p文本和h1文本都垂直对齐。 我尝试了多种解决方案，如表解决方案等。 因为我有一个h1和一个p，它不适用于两者。 或者只有我的p是垂直对齐，或者我的h1在我的旁边....

#txtslide {
    border-top: 1px solid #e9e9e9;
    overflow: hidden;
    background-color: #f5f5f5;
    width: 100%;
}
}
#txtslide h1 {
    font-size: 2vw;
    text-align: left;
    margin-left: 4%;
    margin-top: 2%;
    margin-bottom: 0;
    width: 70%;
}
#txtslide1, #txtslide2, #txtslide3 {
    float: left;
    height: 500px;
    width: 33%
}
#txtslide1 {
    border-right: 1px solid #e9e9e9;
}
#txtslide p {
    font-family:'Source sans pro';
    font-size: 1vw;
    padding-left: 15%;
    width: 80%;
}
#txtslide3 p #txtslide1 p {
    font-size: 1.3vw;
    padding-left: 18%;
    width: 64%;
    padding-top: 5%;
}
#txtslide1 h1 {
    padding-left: 15%;
}
#txtslide img {
    width: 25%;
    height: auto;
    padding-top: 20%;
    padding-left: 18%;
}
#txtslide3 p {
    padding-top:15%;
    padding-left: 10%;
}

<div id="txtslide">
    <div class="container">
        <div id="txtslide1">
            <img src="images/kaarten.png" />
            	<h1>titeln</h1>

            <p>text text</p>
        </div>
    </div>
    <div class="container">
        <div id="txtslide2">
            	<h1>Kop</h1>

            <p>text text</p>
        </div>
    </div>
    <div class="container">
        <div id="txtslide3">
            <p>text text</p>
        </div>
    </div>
</div>
</div>

Answer 1

这是你在找什么？

＆＃13;

＆＃13;

.container{
    display: inline-block;
    height: 500px;
    width: 33%
}

h1 {
    font-size: 4vw;
    text-align: center;
    margin-left: 4%;
    margin-top: 2%;
    margin-bottom: 0;

}

p {
    font-family: 'Source sans pro';
    font-size: 2vw;    
    text-align: center;   
    
}

img {
    width: 25%;
    height: auto;
    display: block;
   margin: auto auto;
    vertical-align: center;
}

＆＃13;

<div class = "container">		
    <div id = "txtslide1" >
        <img src = "images/kaarten.png" />
		<h1>titeln</h1>
        
		     <p>
				text text
			</p>
	</div>
 </div>	
    
<div class = "container">																				
		<h1>title 2</h1>
			<p>
			text text
			</p>
	
</div>
									
<div class = "container">				
	
       <h1>title3</h1>
    	<p>
			text text
	    </p>
   
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

我稍微整理了你的css和html结构。

#txtslide {
    border-top: 1px solid #e9e9e9;
    overflow: hidden;
    background-color: #f5f5f5;
    width:100%;
}
img {
    border:1px solid black;
}
.container {
    width: 33%;
    float:left;
}
.txtSlide p, .txtSlide h1 {
}
.txtSlide {
    width:100%;
    text-align:center;
    height: 500px;
    border-right: 1px solid #e9e9e9;
}
.txtSlide p {
    font-family:'Source sans pro';
    font-size: 1vw;
}

<div id="txtslide">
    <div class="container">
        <div class="txtSlide" id="txtslide1">
            <img src="http://placehold.it/100x100" />
            	<h1>titeln</h1>

            <p>text text</p>
        </div>
    </div>
    <div class="container">
        <div class="txtSlide" id="txtslide2">
            	<h1>Kop</h1>

            <p>text text</p>
        </div>
    </div>
    <div class="container">
        <div class="txtSlide" id="txtslide3">
            <p>text text</p>
        </div>
    </div>
</div>
</div>

Answer 3

您可以在父级中使用display: table，在子级上使用display: table-cell：

#txtslide {
  border-top: 1px solid #e9e9e9;
  overflow: hidden;
  background-color: #f5f5f5;
  width: 100%;
  display: table;
}
#txtslide h1 {
  font-size: 2vw;
  text-align: left;
  margin-left: 4%;
  margin-top: 2%;
  margin-bottom: 0;
  width: 70%;
}
#txtslide1,
#txtslide2,
#txtslide3 {
  height: 500px;
  width: 33%;
  display: table-cell;
  vertical-align: middle;
}
#txtslide1 {
  border-right: 1px solid #e9e9e9;
}
#txtslide p {
  font-family: 'Source sans pro';
  font-size: 1vw;
  padding-left: 15%;
  width: 80%;
}
#txtslide3 p #txtslide1 p {
  font-size: 1.3vw;
  padding-left: 18%;
  width: 64%;
  padding-top: 5%;
}
#txtslide1 h1 {
  padding-left: 15%;
}
#txtslide img {
  width: 25%;
  height: auto;
  padding-top: 20%;
  padding-left: 18%;
}
#txtslide3 p {
  padding-top: 15%;
  padding-left: 10%;
}
.container {
  display: table-cell;
  width: 33%;
}

<div id="txtslide">
  <div class="container">
    <div id="txtslide1">
      <img src="images/kaarten.png" />
      <h1>titeln</h1>

      <p>text text</p>
    </div>
  </div>
  <div class="container">
    <div id="txtslide2">
      <h1>Kop</h1>

      <p>text text</p>
    </div>
  </div>
  <div class="container">
    <div id="txtslide3">
      <p>text text</p>
    </div>
  </div>
</div>
</div>