Centering element in multielement parent css

Question

i have a parent div which contain two child. i want that first child to be centered while the other to be at the end of flex but using margin auto does center the first child according to the space left for him not according to the size of parent div.i mean margin on left should be different from margin on right as i have second element on the right of first one.so how to make margin calculated responsively or if there another solution to center one element and make the other at end.I would like to apologize for this long question.

HTML

<div class="parent">
                <h2 class="firstchild">line of text</h2>
                <div class="secondchild">
                    <form>
                        <input type="text" placeholder="search.. " name="search">
                        <span class="searchbutton"><button id="button" type="submit" name="search" >Search</button></span> 
                    </form>
                </div>
            </div>

parent

.parent{
    display: flex;
    flex-wrap: wrap;
    flex-direction:row;
    width: 100%;

first child


.firstchild{
    margin-top: 10px;
    text-align: center;
    margin-bottom: 5px;
    margin: 0 auto;
    justify-self: center;
    position: absolute;

second child


.secondchild {
    margin-left: 0px;
    margin-bottom: 5px;
    margin-right: 0px;
    position: relative;
    justify-self: flex-end;

Thank you for everyone who replied. maybe i express my question wrongly but i have found the solution using java script the solution is:


<script>
                    function myFunction() {
                        var elmnt=document.getElementById('parent');
                        var w=elmnt.clientWidth;
                        var m=(w-256.922)/2;
                        var r=m-240.594;
                        document.getElementById("child1").style.marginLeft=m+'px';
                        document.getElementById('child1').style.marginRight=r+'px';
                                            
                    }
                    window.onresize=myFunction;
                    </script>

where 256.922 and 240.594 is width of first and second child respectively.

Hello, welcome to Stackoverflow I'm wondering if this can help you: [How to center align a child div inside a parent div with css?](https://stackoverflow.com/questions/19946504/how-to-center-align-a-child-div-inside-a-parent-div-with-css) — Pirogrammer, Mar 26 '21 at 09:13
just to understand: you want to have both children in the same row? If yes, what should happen to the second child if no enough space is available? — Fabrizio Calderan, Mar 26 '21 at 09:15

score 0 · Answer 1 · answered Mar 26 '21 at 09:12

0

justify-self doesn't work in flexbox. But you can use margin-left: auto to do what you want.

answered Mar 26 '21 at 09:12

İlker

1,872
1
12
28

score 0 · Answer 2 · answered Mar 26 '21 at 09:19

Your code will work if you remove all the positioning in your first and second child, also second child does not need to justify-self: flex-end.

.parent{
    display: flex;
    flex-wrap: wrap;
    flex-direction:row;
    width: 100%;
}
.firstchild{
    margin-top: 10px;
    text-align: center;
    margin-bottom: 5px;
    margin: 0 auto;
    justify-self: center;
    /* position: absolute; */
  }
  .secondchild {
    margin-left: 0px;
    margin-bottom: 5px;
    margin-right: 0px;
  /* position: relative; 
     justify-self: flex-end */
  }

score 0 · Answer 3 · answered Mar 26 '21 at 09:21

You could use margin-left: auto to make it centerlize:

.firstchild
{
  margin: auto;  /* to align center*/
}

or if you want to center horizontally or vertically

.firstchild
  {
     margin: 0px auto;  /* to align center horizontally*/
     margin: auto 0px;  /* to align center veritcally*/
  }

Centering element in multielement parent css

3 Answers3