How to make div center align with the div left align? - html

Question

I have a parent Div center align in the page and the content is dynamic added to the parent Div based on the result.
The parent div is 100% wide and center in the page and expect the result should be
_______________________________________
| [Image] [Image] [Image] |
| [text ] [text ] [text ] |
| [Image] [Image] |
| [text ] [text ] |
But the result is
_______________________________________
| [Image] [Image] [Image] |
| [text ] [text ] [text ] |
| [Image] [Image] |
| [text ] [text ] |
.row {
width: 100%;
text-align: center;
}
.block {
display:inline-block;
margin-left: 10px;
}
.block img {
display:block;
}
.block span {
width : 100%;
text-align: center;
}
<div class="row">
<div class="block" width="320" height="200">
<img src="a.jpg"></img>
<span>a.jpg</span>
</div>
<div class="block" width="320" height="200">
<img src="b.jpg"></img>
<span>b.jpg</span>
</div>
<div class="block" width="320" height="200">
<img src="c.jpg"></img>
<span>c.jpg</span>
</div>
<div class="block" width="320" height="200">
<img src="d.jpg"></img>
<span>d.jpg</span>
</div>
<div class="block" width="320" height="200">
<img src="e.jpg"></img>
<span>e.jpg</span>
</div>
</div>

Answer 1

I used an extra container around the images. The container itself will be in the center of the page using auto margin for the left and right side.
The images are positioned using flexbox which is responsive by default.
Class .block has text-align: center; to put the text correctly below the image.
I removed the </img> tags since they are incorrect.
.row {
width: 100%;
}
.block {
display: inline-block;
margin-left: 10px;
text-align: center;
}
.block img {
display: block;
}
.block span {
width: 100%;
text-align: center;
}
.container {
display: flex;
flex-wrap: wrap;
width: 80%;
margin: 0 auto;
}
<div class="row">
<div class="container">
<div class="block" width="320" height="200">
<img src="http://via.placeholder.com/150x150">
<span>a.jpg</span>
</div>
<div class="block" width="320" height="200">
<img src="http://via.placeholder.com/150x150">
<span>b.jpg</span>
</div>
<div class="block" width="320" height="200">
<img src="http://via.placeholder.com/150x150">
<span>c.jpg</span>
</div>
<div class="block" width="320" height="200">
<img src="http://via.placeholder.com/150x150">
<span>d.jpg</span>
</div>
<div class="block" width="320" height="200">
<img src="http://via.placeholder.com/150x150">
<span>e.jpg</span>
</div>
</div>
</div>

Answer 2

You are aligning the content with the text-align: center; tag which always will center the elements, if you want them to align to a side you should use float: left;.
Hope it helps.

Answer 3

You can achieve your desired result with the following code.
<div class="row">
<div class="block" width="320" height="200">
<img src="a.jpg"></img>
<span>a.jpg</span>
</div>
<div class="block" width="320" height="200">
<img src="b.jpg"></img>
<span>b.jpg</span>
</div>
<div class="block" width="320" height="200">
<img src="c.jpg"></img>
<span>c.jpg</span>
</div>
<div class="block" width="320" height="200">
<img src="d.jpg"></img>
<span>d.jpg</span>
</div>
<div class="block" width="320" height="200">
<img src="e.jpg"></img>
<span>e.jpg</span>
</div>
</div>
.row {
width: 100%;
text-align: center;
}
.wrap {
display: inline-block;
text-align: left;
}
.block {
display:inline-block;
margin-left: 10px;
}
.block img {
display:block;
}
.block span {
width : 100%;
text-align: center;
}

Answer 4

For row class correct css as below:
.row {
width: 100%;
}

Answer 5

add css below:
.block {width: 33.33%;float: left;text-align: center;}
.block img {display: block;margin: auto;} & .block span{display: block;}

Answer 6

You can try row text-align: center; to change text-align: left;
HTML:
.row {
width: 100%;
text-align: left;
}
.block {
display:inline-block;
margin-left: 10px;
}
.block img {
display:block;
}
.block span {
width : 100%;
text-align: center;
}
<div class="row">
<div class="block" width="320" height="200">
<img src="a.jpg"></img>
<span>a.jpg</span>
</div>
<div class="block" width="320" height="200">
<img src="b.jpg"></img>
<span>b.jpg</span>
</div>
<div class="block" width="320" height="200">
<img src="c.jpg"></img>
<span>c.jpg</span>
</div>
<div class="block" width="320" height="200">
<img src="d.jpg"></img>
<span>d.jpg</span>
</div>
<div class="block" width="320" height="200">
<img src="e.jpg"></img>
<span>e.jpg</span>
</div>
<div class="block" width="320" height="200">
<img src="e.jpg"></img>
<span>e.jpg</span>
</div>
<div class="block" width="320" height="200">
<img src="e.jpg"></img>
<span>e.jpg</span>
</div>
<div class="block" width="320" height="200">
<img src="e.jpg"></img>
<span>e.jpg</span>
</div>
<div class="block" width="320" height="200">
<img src="e.jpg"></img>
<span>e.jpg</span>
</div>
<div class="block" width="320" height="200">
<img src="e.jpg"></img>
<span>e.jpg</span>
</div>
<div class="block" width="320" height="200">
<img src="e.jpg"></img>
<span>e.jpg</span>
</div>
<div class="block" width="320" height="200">
<img src="e.jpg"></img>
<span>e.jpg</span>
</div>
<div class="block" width="320" height="200">
<img src="e.jpg"></img>
<span>e.jpg</span>
</div>
<div class="block" width="320" height="200">
<img src="e.jpg"></img>
<span>e.jpg</span>
</div>
<div class="block" width="320" height="200">
<img src="e.jpg"></img>
<span>e.jpg</span>
</div>
<div class="block" width="320" height="200">
<img src="e.jpg"></img>
<span>e.jpg</span>
</div>
</div>