center on picture

by YeZeJin

HTML

<section id="services" class="services">
		<h3 class="title">Services</h3>
		<p>List of services.</p>
		<hr>

		<ul class="grid">
			<li class="large" style="background-image: url(assets/img/somepic.jpg);">
				<a class="servlink" href="#">Learn more</a>
			</li>
			<!--
			<li class="small" style="background-image: url(assets/img/island.jpg);"></li>
			<li class="small" style="background-image: url(assets/img/mountain.jpg);"></li>


			-->
			<li class="large" style="background-image: url(assets/img/somepic.jpg);">
				<a class="servlink" href="#">Learn more</a>
			</li>
		</ul>
	</section>

CSS

.services{
	background-color: #fff;
}

.services .grid li{
	padding: 20px;
	height: 350px;
	border-radius: 3px;

	background-clip: content-box;
	background-size: cover;
	background-position: center;
	background-color: #333;


}

/*
.services .grid li.small{
	flex-basis: 40%;
}
*/

.services .grid li.large{
	flex-basis: 60%;
}

.services .grid li a {
	color: red;
	font-family: 'Open Sans', sans-serif;
	background-color: green;

	display: flex;
	justify-content: center;
	align-content: center;

	
	
}