'Breaking a div with display: inline; into a new line

So o basicly have a problem with my divs. There are some divs and imgs in my code, and they are put as inline so they just fit the contents. Though this might seem fine, i need the text to be UNDER the imgs, so break it into a new line. Also centering it relative to the img would be cool too. Thanks

HTML:

        <div class="people">
            <div class="matej">
                <img src="imgs/team_matej.jpg" alt="Photo of Matej Marek">
                <div class="name">Matěj Marek</div><br\>
            </div>
        </div>

CSS:

.people .matej {
  display: inline;
  background-color: #0e1a45;
}

.people .matej .name {
  display: inline-block;
  color: #F2F2F2;
}

.people .matej img {
  display: inline-block;
  width: 10%;
}

Picture:

enter image description here

htmlcssreactjsformsmaterial-uiform-submitreact-hook-form


Solution 1:[1]

If you simply add the <br> tag after the <img/> tag you should be fine.

Note that you do not have to use / or \ to exit the <br> tag!

New code:

    <div class="people">
        <div class="matej">
            <img src="imgs/team_matej.jpg" alt="Photo of Matej Marek"><br>
            <div class="name">Mat?j Marek</div>
        </div>
    </div>

Additionally, when using <br\> as you did, it won't work at all since <br\> isn't a valid tag. To exit a tag you will generally want to use a /.

Solution 2:[2]

For your container, set display to inline-flex instead of inline, and set its flex-direction to column. To center the content on the cross-axis (vertically) in each container, set align-items to center.

.people > .matej {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
}

.people > .matej > img {
  border: 1px solid;
  width: 10rem;
  height: 10rem;
}
<div class="people">
  <div class="matej">
    <img src="imgs/team_matej.jpg" alt="Photo of Matej Marek">
    <div class="name">Mat?j Marek</div><br\>
  </div>
  <div class="matej">
    <img src="imgs/team_matej.jpg" alt="Photo of Matej Marek">
    <div class="name">Mat?j Marek</div><br\>
  </div>
</div>

Solution 3:[3]

hide your functions in eventlistener behind function. like

onSubmit={() => handleSubmit2(on)},

can't completely understand how your components are build and functionality, so hope it will help for you

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Just5MoreMinutes
Solution 2 jsejcksn
Solution 3 Peter Csala

Related Questions