Facebook API Question posted in
The official documentation for the Facebook APIs can be found here.

CSS text and icon center alignment issue – Facebook api

I’m having trouble getting the text and icons to be horizontally and vertically center aligned in my footer center box. HTML and CSS sheets are below. Please look through my code and let me know any changes I need to make and a solution to my problem.

<style>.footer-distributed{
	background-color: #292c2f;
	box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12);
	box-sizing: border-box;
	width: 100%;
	text-align: left;
	font: bold 16px sans-serif;

	padding: 55px 50px;
	margin-top: 80px;
}

.footer-distributed .footer-left,
.footer-distributed .footer-center,
.footer-distributed .footer-right{
	display: inline-block;
	vertical-align: top;
}

/* Footer left */

.footer-distributed .footer-left{
	width: 40%;
}

/* The company logo */

.footer-distributed h3{
	color:  #ffffff;
	font: normal 34px '', normal;
	margin: 20px ;
}

.footer-distributed h3 span{
	color:  #894FAB;
}

/* Footer links */

.footer-distributed .footer-links{
	color:  #ffffff;
    font: normal 16px 'arial', normal;
    text-transform: none;
	margin: 20px 0 12px;
	padding: 0;
}

.footer-distributed .footer-links a{
	display:inline-block;
	font-size: 14;
	font-weight: normal;
	line-height: 1.8;
	text-decoration: none;
	color:  inherit;
}

.footer-distributed .footer-company-name{
	color:  #8f9296;
	font-size: 14px;
	font-weight: normal;
	margin: 0;
}

.footer-distributed .footer-privacy-policy{
	color:  #8f9296;
	font-size: 14px;
	font-weight: normal;
	margin: 0;
}

/* Footer Center */

.footer-distributed .footer-center{
	width: 35%;
}

.footer-distributed .footer-center i{
	background-color:  #33383b;
	color: #ffffff;
	font-size: 25px;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	text-align: center;
	line-height: 42px;
	margin: 10px 15px;
	vertical-align: middle;
}

.footer-distributed .footer-center i.fa-envelope{
	font-size: 17px;
	line-height: 38px;
}

.footer-distributed .footer-center p{
	display: inline-block;
	color: #ffffff;
	vertical-align: middle;
    text-align: center;
	margin:0;
}

.footer-distributed .footer-center p span{
	display:block;
	font-weight: normal;
	font-size:14px;
	line-height:2;
}

.footer-distributed .footer-center p a{
	color:  #894FAB;
	text-decoration: none;;
}


/* Footer Right */

.footer-distributed .footer-right{
	width: 20%;
}

.footer-distributed .footer-company-about{
	line-height: 20px;
	color:  #92999f;
	font-size: 13px;
	font-weight: normal;
	margin: 0;
}

.footer-distributed .footer-company-about span{
	display: block;
	color:  #ffffff;
	font-size: 14px;
	font-weight: bold;
	margin-bottom: 20px;
}

.footer-distributed .footer-icons{
	margin-top: 25px;
}

.footer-distributed .footer-icons a{
	display: inline-block;
	width: 35px;
	height: 35px;
	cursor: pointer;
	background-color:  #33383b;
	border-radius: 2px;

	font-size: 20px;
	color: #ffffff;
	text-align: center;
	line-height: 35px;

	margin-right: 3px;
	margin-bottom: 5px;
}

/* If you don't want the footer to be responsive, remove these media queries */

@media (max-width: 880px) {

	.footer-distributed{
		font: bold 14px ;
	}

	.footer-distributed .footer-left,
	.footer-distributed .footer-center,
	.footer-distributed .footer-right{
		display: block;
		width: 100%;
		margin-bottom: 40px;
		text-align: center;
	}

	.footer-distributed .footer-center i{
		margin-left: 0;
	}
.footer-privacy-policy {
}

}
</style>
<!DOCTYPE html>
<html>

  <script src="https://use.fontawesome.com/7b48e06cba.js"></script>
  
	<body>

		
		<!-- The content of your page would go here. -->

		<footer class="footer-distributed">

			<div class="footer-left">

				<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBQ9lFHOxqSd-Tx5713FBhTp4L5QsC1oxg"></script><div style='overflow:hidden;height:250px;width:auto; margin: 0 auto;'><div id='gmap_canvas' style='height:250px;width:auto; margin: 0 auto;'></div>
              <style>#gmap_canvas img{max-width:none!important;background:none!important}</style></div><script type='text/javascript'>function init_map(){var myOptions = {zoom:12,center:new google.maps.LatLng(40.459225378643445,-86.84742606020508),mapTypeId: google.maps.MapTypeId.ROADMAP};map = new google.maps.Map(document.getElementById('gmap_canvas'), myOptions);marker = new google.maps.Marker({map: map,position: new google.maps.LatLng(40.459225378643445,-86.84742606020508)});infowindow = new
google.maps.InfoWindow({content:'<strong>Bethany Childcare & Preschool</strong><br>3305 Longlois Dr., Lafayette, IN 47904<br>'});google.maps.event.addListener(marker, 'click', function()              {infowindow.open(map,marker);});infowindow.open(map,marker);}google.maps.event.addDomListener(window, 'load', init_map);</script>

				<p class="footer-links">
					<a href="https://www.bccandp.org/">Home</a>
					·
					<a href="https://www.bccandp.org/contact">Contact</a>
					·
					<a href="https://www.bccandp.org/brightwheel">Brightwheel</a>
					·
					<a href="https://www.bccandp.org/programs">Programs</a>
					·
					<a href="https://www.bccandp.org/calendar">Calendar</a>
				    ·
					<a href="https://www.bccandp.org/enrollment">Enrollment</a>
					·
					<a href="https://www.bccandp.org/staff">Staff</a>
				</p>

				<p class="footer-company-name">BCC&P DOT &copy; 2017 |
					<a href="https://www.bccandp.org/privacy" class="footer-privacy-policy">Privacy Policy</a></p>
			</div>

			<div class="footer-center">

				<div>
					<i class="fa fa-map-marker"></i>
					<p><span>3305 Longlois Dr.</span> Lafayette, Indiana</p>
				</div>

				<div>
					<i class="fa fa-phone"></i>
					<p>+1.765.447.7044 X.2</p>
				</div>

				<div>
					<i class="fa fa-envelope"></i>
					<p><a href="mailto:[email protected]">[email protected]</a></p>
				</div>

			</div>

			<div class="footer-right">

				<p class="footer-company-about">
					<span>About Us</span>
					We are an Indiana State registered childcare and preschool ministry of Bethany Presbyterian Church. Our primary focus is on the community of Lafayette, Indiana and its surrounding communities. We are a Child Care Development Fund (CCDF) provider. Founded in 1988.
				</p>

				<div class="footer-icons">

					<a href="https://www.facebook.com/bccandp"><i class="fa fa-facebook"></i></a>
					<a href="#"><i class="fa fa-twitter"></i></a>
					<a href="#"><i class="fa fa-linkedin"></i></a>
					<a href="#"><i class="fa fa-github"></i></a>

				</div>

			</div>

		</footer>

	</body>
  
</html>
Tags:

2

Answers


  1. 0

    Create a div to wrapp the content. This will be the div responsible to center it to the page.

    <div class="footer-center">

    <div class="wrapper">
        <div>
            <i class="fa fa-map-marker"></i>
            <p><span>3305 Longlois Dr.</span> Lafayette, Indiana</p>
        </div>

        <div>
            <i class="fa fa-phone"></i>
            <p>+1.765.447.7044 X.2</p>
        </div>

        <div>
            <i class="fa fa-envelope"></i>
            <p><a href="mailto:[email protected]">[email protected]</a></p>
        </div>

    </div>
</div>

    Now, just make the wrapper an inline-block, considering that it’s father have a text-center, the wrapper will be centered.
    Align the text and all the other things inside the wrapper to the left.

    Login or Signup to reply.
  2. 0

    I am unable to run your sample due to this error: 

    "Google Maps API error: RefererNotAllowedMapError https://developers.google.com/maps/documentation/javascript/error-messages#referer-not-allowed-map-error
Your site URL to be authorized: https://stacksnippets.net/js"

    So I’m a bit in the dark with what you are faced with. However, when I need vertical alignment my go to is flexbox.
    ie on the containing element:

      display: flex;
  justify-content: center;
  flex-direction: column;
  text-align: center;

    (and sometimes doing a margin: 0 auto; is necessary as well).

    If you are having issues with an icon and a label aligning vertically, a trick I always use is using vertical-align with a negative pixel value. Ie:

    vertical-align: -2px;
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search