垂直对齐包括h1和p元素的多行

Question

I want to make my p text and h1 text both vertical align. I tried multiple solutions, like the table solution etc. Because I have a h1 and ap, it doesn't work for both the same. Or only my p is vertical align, or my h1 is next to my p....

 #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

Is this what you are looking for?

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

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

Answer 2

I've tidied up your css and html structure slightly.

 #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

You can use display: table in parent and display: table-cell on child's:

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