Centering social links

  • Resolved Josh Spires

    (@joshspires)


    8 years, 4 months ago

    hello,

    I have got this code for social links, currently when I place it in the footer it goes to the right of the screen. I would like it to be centered!

    Please could you add in the part that makes it center and then reply with it thanks for all the help!

    Current Code:

    <ul class="sc_menu">

<li><a href="https://dronenr.com/feed/rss/"><i class="t4p-icon-social-rss"></i></a></li>
<li><a href="https://twitter.com/Drone_NR"><i class="t4p-icon-social-twitter"></i></a></li>
<li><a href="https://plus.google.com/u/0/b/103406331465589302600/+DronenrOfficial?pageId=103406331465589302600"><i class="t4p-icon-social-google-plus"></i></a></li>
<li><a href="https://www.instagram.com/drone_nr/"><i class="t4p-icon-social-instagram"></i></a></li>

Viewing 5 replies - 1 through 5 (of 5 total)

  • @joshspires,
    As per your code we can not get idea about how to manage this.
    Please provide your site url.

    #sc_menu{
	text-align: center;
}
#sc_menu > li{
	float: none; /*making sure no css conflicts*/
	display: inline-block;
	vertical-align: middle;
	margin: 0 3px; /* add small margin between icon */
}
#sc_menu > li > a{
	display: block;
}

    Optional

    #sc_menu{
	text-align: center;
}
#sc_menu > li{
	float: none;
	display: inline-block;
	vertical-align: middle;
	margin: 0 3px;
	width: 35px;
	height: 35px;
	background: #363e4a;
	border-radius: 50%;
	text-align: center;
	padding: 6px 0;
	color: #fff;
}
#sc_menu > li > a{
	display: block;
}
    Thread Starter Josh Spires

    (@joshspires)

    @ravi https://www.dronenr.com

    For desktop 

    .container.container-header.header_v0 > div#righttopcolumn {
  float: none;
  margin: 0 auto;
  width: 15%;
}

    Hi,

    Try this CSS code

    .sc_menu { float: none; text-align: center; }
.sc_menu li { float: none; }
Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Centering social links’ is closed to new replies.