CSS: Vertical-align not working
Please check inside the style tag. I am not sure why "vertical-align" is not working. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Browse Images</title> <style> #block{ width:300px; height:250px; background-color:yellow; padding:10px; margin-top:0px; vertical-align: middle; text-align:center; } #imagetitle{ width:300px; height:25px; background-color:orange; padding:10px; margin-bottom:0px; vertical-align: middle; text-align:center; } </style> </head> <body> <h1 id ="imagetitle">Earth</h1> <div id ="block"> <button id = "prev" onClick = "prev()"> Prev </button> <img id="slider" src="Earth.gif" width="200px" height="200px"/> <button id = "next" onClick = "next()"> Next </button> </div> <script> var text = document.getElementById("imagetitle"); var number = 0; var images = ["Earth.gif","Colors.gif","Rose.gif"] var title = ["Earth","Colors","Rose"] function next(){ var slider = document.getElementById("slider"); number++; if (number >=images.length){number = 0}; slider.src = images[number]; text.innerHTML = title[number]; } function prev(){ var slider = document.getElementById("slider"); number--; if (number < 0){number = images.length - 1}; slider.src = images[number]; text.innerHTML = title[ number]; } </script> </body> </html>
Often have questions like this?
Learn more efficiently, for free:
