Bootstrap：居中背景图片容器（<a> or </a> <div> <a>) and text

Question

Just starting out at web dev.

I'm trying to make two large buttons that are images with text over them. The buttons should be centered in relation to the column and the text should be centered in relation to the button (image).

My problem is that the right button (image) is definitely not centered in the column, and the text in both buttons (images) is not centering in relation to the buttons (images).

.ft{
	margin-bottom: 72px;
}

.ft-btn  {
	width: 100%;
	height: 250px;
	position: relative;
	margin: 0 auto;
	border-radius: 15px;
}

.travel {
	background: url('../../assets/IMG_3045(web).jpg') no-repeat;
	background-size: 80%;
}

.thoughts {
	background: url('../../assets/profile.jpg') no-repeat;
	background-size: 80%;
}
 
.blog-title {
	color: #4C4C4C;
	font-family: sans-serif;
	font-size: 4em;
}

.blog-sub-title {
	color: #4C4C4C;
	font-family: sans-serif;
	font-size: 1.2em;
	color: #4C4C4C;
}

.blog-title, .blog-sub-title {
	position: relative;
	text-align: center;
	margin: 0 auto;

}

.blog-sub-title {
	margin-top: 20px;
}

  

<div class= "row ft">
			<div class="col-sm-6">
				<a class="ft-btn btn travel center-block" href="#" role="button">
					<h2 class="blog-title center-block">Travel</h2>
					<h3 class="blog-sub-title">places I go, people I meet, things I do, what I use</h3>
				</a>
			</div>
			<div class="col-sm-6">
				<a class="ft-btn btn thoughts center-block" href="#" role="button">
					<h2 class="blog-title">Thoughts</h2>
					<h3 class="blog-sub-title">hoping to just spill the content of my mind (in an articulate manner)</h3>
				</a>
			</div>
		</div><!--end row -->