I have a small css alignment issue

Ionic Framework ionic-v3
1

i want to do like this inside the side menu
sidemenu copy

but my current view is
sidemenu

how can i do that?
please help me anyone

2

Hello,

please show code because aligment depends to which element you want align.

Best regards, anna-liebt

1 Like
3

Here is my .html

  <ion-content>
    <ion-list>
      <button menuClose ion-item *ngFor="let p of pages" (click)="openPage(p)">
        <img width="35px" height="35px" src="{{p.icon}}"/>
        <p>{{p.title}}</p>
      </button>
    </ion-list>
  </ion-content>

.css here


   ion-content{
      ion-list{
         img{
            position: relative;
            top: 0px;
         }
      }
   }
4

Hello,
p is a block element, Maybe you can use an inline element like span

Best regards, anna-liebt

5

please give me the example of code am new in css

6

Hello,

maybe there is no issue with css. I think it is a problem, because p tag is a paragraph, that means is makes a break. See here https://www.w3schools.com/html/html_paragraphs.asp

Try span. It is a inline element.

<span>{{p.title}}</span>

Best regards, anna-liebt

1 Like
7

after p change to span now its look like this but alignment is not proper. how can i fix that?
Screenshot_2

8

Hello,

okay sorry, I forget you want also center vertically.

Maybe it helps if you take a look to flexbox. Flexbox isn’t at first so easy to understand, but it helps with the most layout things.

here is a good description. https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Also this tool helps to get the most needed css for flexbox https://www.htmllion.com/css-flexbox.html

Best regards, anna-liebt

9

i fixed my alignment issue but there is take more space to each other
Screenshot_3

10

Hello,
space to an element is set by margin and padding. Your css, you have shown, has nothing of them, so it is set by other css. Maybe the directive ion-item, maybe the tag ion-list maybe…

Best regards, anna-liebt

11

ok i will try after that inform to you

12

Thanks for your effort and I really appreciate it
now its work fine
Below my updated .css

   ion-content{
      ion-list{
         span{
            position: relative;
            top: -6px;
         }
      }
   }

Screenshot_4

13

Hello,
I do not see really a difference. :wink:

Best regards, anna-liebt

14

above my before code
now change to this

   ion-content{
      ion-list{
         span{
            position: relative;
            top: -6px;
         }
      }
   }
15

hello,
I meant, I did not see a difference because its only 6px.

Best regards, anna-liebt