Centralize Icons in mobile - Css + Html

Question

Centralize Icons in mobile - Css + Html

Navigation

#1 by (0 votes)

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>

html5 css mobile

asked by anonymous 07.06.2018 / 23:23

1 answer

Production in PHP hours How to preserve the entire contents of a Word document when converting it to PDF using PhpWord and TCPDF

score 0 · Accepted Answer

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>