Centralize Icons in mobile - Css + Html

Asked

Viewed 715 times

0

I’m not able to centralize my icones on mobile, I need this little force, here’s 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>

css html5 mobile

1 answer

0


Centralize mode 1: (each in its 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>

Center mode 2: (Side by side, centered on the 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>

Browser other questions tagged css html5 mobile

You are not signed in. Login or sign up in order to post.