Is there a way to center this text vertically within the divs?
I've attempted adjusting the position using relative/absolute, and modifying the top and left properties of the paragraph, but none of these methods have been successful.
div.roxo{
background-color: purple;
padding: 40px;
}
div.amarelo{
background-color: yellow;
height: 300px;
width: 25%;
float: left;
}
div.vermelho{
background-color: red;
height: 300px;
width: 50%;
float: left;
}
div.verde{
background-color: green;
height: 300px;
width: 25%;
float: left;
}
div.azul{
background-color: blue;
padding: 40px;
}
p{
margin: 0;
text-align: center;
vertical-align: middle;
}<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<div class="roxo">
<p>roxo</p>
</div>
<div class="amarelo">
<p>amarelo</p>
</div>
<div class="vermelho">
<p>vermelho</p>
</div>
<div class="verde">
<p>verde</p>
</div>
<div class="azul">
<p>azul</p>
</div>
</body>
</html>