Vertical align image with flex
Vertical align image with flex
HTML
<div class="video_header">Videos</div>
<br>
<br>
<div class="videos">
<div class="newspaper">
<img src="http://i.giphy.com/xYHscQ1Np55i8.gif" width="300">
<div class="video_title">
<p class="normal">Solo Video #01</p>
<div class="video_discription">
<p class="normal">Alicia Secrets masturbates</p>
<img src="http://i.giphy.com/xYHscQ1Np55i8.gif" width="300">
<div class="video_title">
<p class="normal">Solo Video #01</p>
<div class="video_discription">
<p class="normal">Alicia Secrets masturbates</p>
<img src="http://i.giphy.com/xYHscQ1Np55i8.gif" width="300">
<div class="video_title">
<p class="normal">Solo Video #01</p>
<div class="video_discription">
<p class="normal">Alicia Secrets masturbates</p>
<img src="http://i.giphy.com/xYHscQ1Np55i8.gif" width="300">
<div class="video_title">
<p class="normal">Solo Video #01</p>
<div class="video_discription">
<p class="normal">Alicia Secrets masturbates</p>
<img src="http://i.giphy.com/xYHscQ1Np55i8.gif" width="300">
<div class="video_title">
<p class="normal">Solo Video #01</p>
<div class="video_discription">
<p class="normal">Alicia Secrets masturbates</p>
<img src="http://i.giphy.com/xYHscQ1Np55i8.gif" width="300">
<div class="video_title">
<p class="normal">Solo Video #01</p>
<div class="video_discription">
<p class="normal">Alicia Secrets masturbates</p>
</div>
CSS
body {
background: darkslategrey;
font-family: sans-serif;
font-size: 1.3em;
}
section {
padding: 20px;
margin: 20px;
background-color: cornsilk;
border: 6px solid gold;
}
h1 {
color: coral;
}
p {
color: black;
font-size: 15px;
}
a:link,
a:visited {
color: darkorange;
}
a:hover {
color: orangered;
}
a:active {
background: orangered;
color: white;
}
p.normal {
border: 2px solid white;
border-width: 2px;
}
p.round1 {
border: 2px solid red;
border-radius: 5px;
border-width: 5px;
}
p.round2 {
border: 2px solid red;
border-radius: 8px;
border-width: 5px;
}
p.round3 {
border: 2px solid red;
border-radius: 12px;
border-width: 5px;
}
.newspaper {
/* Chrome, Safari, Opera */
-webkit-column-count: 3;
-webkit-column-gap: auto;
-webkit-column-rule-style: outset;
-webkit-column-rule-width: 5px;
/* Firefox */
...