HTML Responsive website image center

This question already has an answer here:

How to horizontally center a <div> in another <div>? 82 answers

Center image using text-align center? 21 answers

Center align image within div horizontally 17 answers

How to make an image center (vertically & horizontally) inside a bigger div 36 answers

---

you can try: {

display:flex;
justify-content:center;

}

---

You can use flexboxes.

.box {
  display: flex;
  justify-content: center;
  justify-items: center;
}

https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox

---

You should restructure your HTML by adding a container around the boxes:

<div class="box-container">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
</div>

Use flexbox for the container and give the boxes equal space in the screen with the flex property:

/* Only for demo purposes */

body, html {
    box-sizing: border-box;
    width: 100vw;
    max-width: 100%;
    overflow-x: hidden; 
}

/* Main part: flexbox is added to the container box and the flex property allots them equal space with a margin of 10px as well */

.box-container {
    width: 100vw;
    display: flex;
}

.box {
    flex: 1 0 0;
    width: 120px;
    height: 120px;
    background-color: red;
    margin-right: 10px;
}

Here is a link to the fiddle: jsfiddle

链接地址: http://www.djcxy.com/p/75768.html

上一篇: 使用div内的图像居中<a>元素

下一篇: HTML响应式网站图像中心