Is there a way to vertically center all of the text content, especially focusing on the drop-down button and block, here? Despite my efforts to research and find solutions online, I have not been able to achieve the desired visual results.
I am restricted to using percentages for width and height as variables. Fixed padding or margins did not work as they do not look right when the page is resized.
Any advice on how to accomplish this task would be greatly appreciated. I am new to coding and eager to learn! I might be a bit of a noob, but I am trying my best.
I would like to find a clean solution, and if possible, I would also like to horizontally center it, as I am currently using padding for that purpose, which is not perfect. However, since I will have a maximum width, I can settle for that.
.div1 {
Height: 100%;
Width: 100%;
background-color: D4D4D2;
opacity: 0.75
}
.div1:hover {
background-color: red;
opacity: 0.95
}
.dropbtn {
background-color: transparent;
color: black;
padding: 10px 14px;
font-size: 20px;
text-align:center;
border: none;
cursor: pointer;
position: relative;
min-width: 310px;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: relative;
background-color: transparent;
min-width: 310px;
}
.dropdown-content a {
color: black;
position: relative;
padding: 12px 16px;
text-decoration: none;
text-align:center;
display: block;
}
.dropdown-content a:hover {background-color: none}
.dropdown-content a:hover {color: white}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: transparent;
color: white;
}
</style>
<div class="div1">
<div class="dropdown">
<h2>Hoverable Dropdown</h2>
<p>Move the mouse over the button to open the dropdown menu.</p>
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
<a href="#">Link 1 link very long</a>
<a href="#">Link 2 medium</a>
<a href="#">Link 3</a>
</div>
</div>
</div>
</div>