I know similar questions have been asked- but I've been working on this 2+ hours and haven't found the answer on Stackoverflow yet.
I'm working on my first website and want to vertically align a fontawesome icon in a column next to my text box. I've tried using vertical-align: middle and a wide variety of padding options, but can't figure out how to dynamically center the icon based on row height. Here is my code (reproducible on jsfiddle.net)
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
<style>
.jumbotron {
background-color: #f4511e;
color: #fff;
padding: 100px 25px;
}
.bg-grey {
background-color: #f6f6f6;
}
.logo {
font-size: 200px;
}
@media screen and (max-width: 768px) {
.col-sm-4 {
text-align: center;
margin: 25px 0;
}
}
</style>
<body>
<div class="jumbotron text-center">
<h1>Company</h1>
<p>We specialize in blablabla</p>
</div>
<!-- Container (About Section) -->
<div id="about" class="container-fluid">
<div class="row">
<div class="col-sm-8">
<h2>About Company Page</h2><br>
<h4>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</h4><br>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<br><button class="btn btn-default btn-lg">Get in Touch</button>
</div>
<div class="col-sm-4" style="text-align: center;">
<i class="fas fa-camera" style="font-size: 200px !important;"></i>
</div>
</div>
</div>
</body>
Can anybody help me center the camera icon on the right side of the page?
