can I know How to make the 2 pic align to the page center horizontally?? only using HTML and CSS only..
I using this code now, but cannot..
#product .container {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
CodePudding user response:
use justify-content: center;
.flex-container {
display: flex;
justify-content: center;
background-color: DodgerBlue;
}
.flex-container > div {
background-color: #f1f1f1;
width: 100px;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
}
<h1>The justify-content Property</h1>
<p>The "justify-content: center;" aligns the flex items at the center of the container:</p>
<div >
<div>1</div>
<div>2</div>
</div>
CodePudding user response:
use display flex for the parent justify-content: center
.container {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 15px;
max-width: 1140px;
background-color: deepskyblue;
padding: 15px;
}
.box {
background-color: #eee;
width: 260px;
height: 200px;
text-align: center;
}
<div >
<div >1</div>
<div >2</div>
<div >3</div>
<div >4</div>
<div >5</div>
<div >6</div>
</div>
CodePudding user response:
You can use something like that...
#product {
width: 600px;
.container {
display: grid;
grid-template-columns: 200px 200px;
justify-items: center;
justify-content: center;
img {
width: 150px;
height: 150px;
}
}
}
Set the number of columns and align in the center of the container.