How do I center my image inside of the parent element?

Code Feedback
1
Easy Life 
<link href="https://fonts.googleapis.com/css?family=Indie+Flower" rel="stylesheet">
header { font-family: 'Indie Flower', cursive;; text-align: center; } 
	#main {
		text-align: center;
		font-family: 'Indie Flower', cursive;
		max-width: 50%;
		margin: auto;

	}

	p {
		font-size: 25px;
	}

	#image-div {
		display: block;
		margin-left: auto;
		margin-right: auto;
		align-content: center;
			
	}

	#image {
		
		border: 10px ridge pink;
		padding: 12px;
		margin: 10px;
		align-content: center;
		max-width: 100%;
		display: block;
		height: auto;
	}

	#img-caption {
		text-align: center;
	}

	#box-container {
		display: flex;
	}

	#tribute-info {	
		text-align: left;	
	}

	#tribute-link {

	}

	#fifa-div {
		display: inline-block;
		padding-bottom: 20px;
	}

	#fifa {
		width: 75%;
		height: 75%;
		align-content: center;
	}

</style>

<header>
	<h1 id="title">Easy Life</h1>
</header>

<main id="main">
	<div id="img-div">
		<a href="https://www.readdork.com/news/easy-life-get-up-to-mischief-in-hospital-corridors-for-their-new-nightmares-video">
		<img id="image" src="https://www.readdork.com/images/article/Artist-Images/E/Easy-Life/_crop1500x1000/Easy-Life-2018.jpg" alt="Easy Life">
		</a>
		<h2 id="img-caption">A 5 peice band from Leicester, UK</h2>
	</div>

	<div id="box-container">
		<div id="tribute-info">
			<p>
				Easy Life is the jazz-funk 5 peice band that has taken the media by storm and gained a lot of popularity over the last few months.
				The members all met in school and found a common interest of having a love for a wide taste of music ranging from hip-hop to indie.
			</p>
			<p>
				The first ever single the band realsed to the public, "Pockets", can be described as a slow-moving groovy header-nodder - This has been their most recognized bop from the start and will probably remain their most popular for a while due to the song being introduced as a soundtrack in one of the biggest head line games of the year - Fifa 2019.   
			</p>
			<p>
				You can read more about Easy Life <a id="tribute-link" target="_blank" href="https://www.thelineofbestfit.com/new-music/song-of-the-day/easy-life-pockets">here</a> 
			</p>
		</div>
	</div>
	<div id="fifa-div">
			<a href="https://www.instagram.com/p/BnRTmBvgtmW/?utm_source=ig_embed&utm_medium=loading">
				<img style="border-radius: 10%;" id="fifa" src="https://scontent-lhr3-1.cdninstagram.com/vp/e427f7a6c898aa597a47b3e96f2cc140/5C6E7772/t51.2885-15/e35/39874874_547181569054037_5514702179446816768_n.jpg">
			</a>
	</div>
</main>
1 Like
2

I think you should set text-align: center; on the parent div. An image is an inline element and is treated as text.

1 Like