Element's property align-itself is not working

Asked Aug 09 '19 at 22:56

Active Aug 09 '19 at 23:18

Viewed 45 times

My element put in some flex container but I can't align it itself. I've already tried change some values of properties, but nothing works(((

<div id="mainHeader">
        <img id="mainHeaderImageLeft" src="images/coder.png">

        <span id="mainHeaderCodeImg">for(int i=0; i < arr.length; i++){ <br>System.out.println("Hello World");<br>
        int width = 10;<br>
        System.err.println(width);
        <br>}</span>
</div>

#mainHeader{
    width: 100%;
    height: 10vh;
    display: flex;
    margin-top: calc(-1 * height);
    background: var(--primary-light);
    overflow: hidden;
}

#mainHeaderCodeImg{
    display: block;
    justify-self: flex-end;
    align-self: flex-end;
}

edited Aug 09 '19 at 23:18

Michael Benjamin

346,931
104
581
701

asked Aug 09 '19 at 22:56

topit

`align-self` is working fine in your code. What is the problem? – Michael Benjamin Aug 09 '19 at 23:05
@Michael_B, it doesn't work, I attach the image – topit Aug 09 '19 at 23:16
What do you want to happen? – Michael Benjamin Aug 09 '19 at 23:19
@Michael_B, I want to replace the text in span to the right side of the header – topit Aug 09 '19 at 23:20
In your layout, `align-self` moves items vertically (up and down, not left and right). [`justify-self` has no effect](https://stackoverflow.com/q/32551291/3597276). Try `justify-content: space-between` on the container element. – Michael Benjamin Aug 09 '19 at 23:22
1

@Michael_B, It works!!! Thank u) – topit Aug 09 '19 at 23:26

Element's property align-itself is not working

0 Answers0