Centralize Icons in mobile - Css + Html

0

I am not able to centralize my icons in the mobile, I need this forcinha, here is my code below @media (max-width: 700px);

		footer{     bottom:0 ;     position: initial;
						padding: 10px 0;
			height: 78px;
			right:0;
			left:0;
			text-align:center;
		}
<footer>

	<ul>
		<li><a href="https://www.facebook.com/99gourmet"><img src="facebook.png"></li>
		<li style="margin-left: 30px;"><a href="https://www.instagram.com/99gourmetapp/"><img src="instagramLogo.png"></a></li>
		<li style="margin-left: 30px;"><a href="https://twitter.com/99gourmet" ><img src="twitter.png"></a></li>
		<li style="margin-left: 30px;"><a href="https://br.pinterest.com/99gourmet" ><img src="pinterest-sign.png"></a></li>
	</ul>
</footer>
    
asked by anonymous 07.06.2018 / 23:23

1 answer

0

Center mode 1: (each one on your line)

		footer{     bottom:0 ;     position: initial;
						padding: 10px 0;
			height: 78px;
			right:0;
			left:0;
			text-align:center;
		}

footer li {text-align:center;}


----------
<footer>

	<ul>
		<li><a href="https://www.facebook.com/99gourmet"><img src="facebook.png"></li>
		<li style="margin-left: 30px;"><a href="https://www.instagram.com/99gourmetapp/"><img src="instagramLogo.png"></a></li>
		<li style="margin-left: 30px;"><a href="https://twitter.com/99gourmet" ><img src="twitter.png"></a></li>
		<li style="margin-left: 30px;"><a href="https://br.pinterest.com/99gourmet" ><img src="pinterest-sign.png"></a></li>
	</ul>
</footer>

Centralize mode 2: (Tiled, centered on screen)

		footer{     bottom:0 ;     position: initial;
						padding: 10px 0;
			height: 78px;
			right:0;
			left:0;
			text-align:center;
		}

footer li {text-align:center; display:inline-flex;}


----------
<footer>

	<ul>
		<li><a href="https://www.facebook.com/99gourmet"><img src="facebook.png"></li>
		<li style="margin-left: 30px;"><a href="https://www.instagram.com/99gourmetapp/"><img src="instagramLogo.png"></a></li>
		<li style="margin-left: 30px;"><a href="https://twitter.com/99gourmet" ><img src="twitter.png"></a></li>
		<li style="margin-left: 30px;"><a href="https://br.pinterest.com/99gourmet" ><img src="pinterest-sign.png"></a></li>
	</ul>
</footer>
    
07.06.2018 / 23:36