How to leave an icon centralized along with an LI added via CSS inside a UL

Question

How to leave an icon centralized along with an LI added via CSS inside a UL

Navigation

#1 by (1 votes)
#2 by (0 votes)

2

I'd like to know how to center an icon implemented via background url() in css along with my li , the problem is that when I add the icon, it moves away the right side of my li and how it appears pasted on the li I got a margin , and when I do that, it moves away even more and everything is decentralized compared to my header as I show in the prints with and without those changes. Is there any way that this will not happen?

CSS--


.main_footer_content{
display: flex;
flex-direction: column;
padding: 1em;
background-color: #010f19;
max-width: 400px;
margin: 0 auto;
}

.main_footer_content article{
display: flex;	
flex-direction: column;
flex: 1;
text-align: center;
padding: 1em 0;
}

.main_footer_content article header{
padding: 1em 0;
color: #fff;
font-size: 1.2em;	
border-bottom: 1px solid #fff;
}

.main_footer_menus{
padding: 0.5em 0;	
display: flex;
flex-direction: column;

}


.main_footer_menus li{
padding: 0.5em 0;
flex: 1;
}

.main_footer_menus li a{
color: #FFF;

}

.main_footer_menus li::before{
content: url(../img/verified.png);	
margin-right: 0.5em;
}

HTML--

<section class="main_footer_content">

        <h1 class="font_zero">Vem ver nossas novidades!</h1>


        <article>
            <header>
                <h1 class="menu_site_titulo">Menu do site</h1>
            </header>
            <ul class="main_footer_menus">

                <li><a href="#">Home</a></li>
                <li><a href="#">Quem somos</a></li>
                <li><a href="#">Serviços</a></li>
                <li><a href="#">Podutos</a></li>
                <li><a href="#">Contatos</a></li>

            </ul>

        </article>
        
        </section>

html css

asked by anonymous 30.10.2018 / 16:15

2 answers

1

You can basically put position: absolute and transform: translateX(-21px) in the pseudo-element :: before you resolve the situation. The position:absolute will make the element "get out of the flow" so it is "floating" inside the LI that I needed to put position:relative , and with transform: translateX(-21px) you put ::before 16px which is width of it +5px that would be the margin between it and the text.

article {
  text-align: center;
}
.main_footer_content{
display: flex;
flex-direction: column;
padding: 1em;
background-color: #010f19;
max-width: 400px;
margin: 0 auto;
}

.main_footer_content article{
display: flex;	
flex-direction: column;
flex: 1;
text-align: center;
padding: 1em 0;
}

.main_footer_content article header{
padding: 1em 0;
color: #000;
font-size: 1.2em;	
border-bottom: 1px solid #000;
}

.main_footer_menus{
padding: 0.5em 0;	
display: flex;
flex-direction: column;

}


.main_footer_menus li{
padding: 0.5em 0;
flex: 1;
position: relative;
}

.main_footer_menus li a{
color: #000;

}

.main_footer_menus li::before{
content: url(https://unsplash.it/16/16);	
position: absolute;
transform: translateX(-21px);
}

<article>
  <header>
    <h1 class="menu_site_titulo">Menu do site</h1>
  </header>
  <ul class="main_footer_menus">

    <li><a href="#">Home</a></li>
    <li><a href="#">Quem somos</a></li>
    <li><a href="#">Serviços</a></li>
    <li><a href="#">Podutos</a></li>
    <li><a href="#">Contatos</a></li>

  </ul>
  
</article>

30.10.2018 / 16:50

Jquery Get Checkbox Value Nearer by Line TableView bring date, from the mysql database

score 0 · Accepted Answer

Create ::before in a and not li , and use position: absolute to position the icon with left negative, remembering a must have position: relative . Since the icons will have absolute position, they will not interfere with the alignment of the links.

Example:

.main_footer_menus li a::before{
content: url(https://cdn3.iconfinder.com/data/icons/fugue/icon_shadowless/tick-circle-frame.png);
position: absolute;
top: 0;
left: -20px;
display: flex;
}

a{
   position: relative;
}

/* exemplos. não use os códigos abaixo */
article{
   text-align: center;
}

ul, li{
   list-style: none;
   margin: 0;
   padding: 0;
}

.main_footer_menus li a{
   text-decoration: none;
   color: white;
}

body{
   background: black;
   font-size: 22px;
   color: white;
}

<article>
   <header>
       <h1 class="menu_site_titulo">Menu do site</h1>
   </header>
   <ul class="main_footer_menus">

       <li><a href="#">Home</a></li>
       <li><a href="#">Quem somos</a></li>
       <li><a href="#">Serviços</a></li>
       <li><a href="#">Podutos</a></li>
       <li><a href="#">Contatos</a></li>

   </ul>

</article>