Looking for a way to achieve this using only CSS rather than JavaScript. I have a horizontal line (div) and would like to center an image both vertically and horizontally on the line.
I attempted to do this with JavaScript, but encountered issues.
Here is some sample HTML code:
<style type="text/css">
#container {
background-color:#F00;
height:5px;
width: 77%;
margin: 0 auto;
}
</style>
<script>
var logo = document.getElementById('logo');
var container = document.getElementById('container');
var margin = (container.clientHeight - logo.clientHeight) / 2;
logo.style.marginTop = margin + "px";
logo.style.marginBottomn = margin + "px";
</script>
<br><br><br>
<div id="container">
<img src="images/logo_footer.jpg" width="229" height="75" id="logo" />
</div>