CSS inline-block margin question.

Hi, everyone. I arranged the images rendered by django like an image gallery by inline-block. But I want to centralize the elements in the container div, but I don't know how ㅠ<

HTML:

<div class="align">
    <ul>
        <li><img src="Image"></li>
    </ul>
</div>

CSS:

    .align {
    display: inline-block;
    width: 125px;
    height: 130px;
    margin: 0 10px 0 10px;
    vertical-align: top;
}

I applied CSS like above As shown in the image above, the rightmost gap is created and the leftmost margin is not applied as the line is not aligned.

How do I apply the CSS to make the image elements centralized like the image below?

css html django

2022-09-22 20:45

1 Answers

Flexbox layout makes it easier to organize images more freely within the div tag.

<div class="align">
  <img src="http://www.imagebon.com/postpic/2014/08/black-and-white-shapes-clip-art_76554.png" alt="image"/>
</div>

.align {
    width: 800px;
    height: 360px;
    border: 1px solid #d0d0d0;

    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    align-items: center;
    justify-content: center;
}

See codepen demo here.

For more information on flexbox layout, please refer to the links below.

2022-09-22 20:45

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656