[ad_1]
Asked
Viewed
10 times
I have seen similar questions and this began by using the answer provided:
.wraptocenter {
float: left;
position: relative;
display: table-cell;
text-align: center;
vertical-align: middle;
width: 200px;
height: 200px;
background-color: yellow;
border: solid black 1px;
}
.wraptocenter * {
vertical-align: middle;
}<div class="wraptocenter"><img src="http://www.brunildo.org/thumb/tmiri2_o.jpg" /></div>
<div class="wraptocenter"><img src="http://www.brunildo.org/thumb/tmiri2_o.jpg" /></div>
<div class="wraptocenter"><img src="http://www.brunildo.org/thumb/tmiri2_o.jpg" /></div>
<div class="wraptocenter"><img src="http://www.brunildo.org/thumb/tmiri2_o.jpg" /></div>
<div class="wraptocenter"><img src="http://www.brunildo.org/thumb/tmiri2_o.jpg" /></div>
<div class="wraptocenter"><img src="http://www.brunildo.org/thumb/tmiri2_o.jpg" /></div>
<div class="wraptocenter"><img src="http://www.brunildo.org/thumb/tmiri2_o.jpg" /></div>It doesn’t work as I want. I want my wraptocenter div containers to float one after he other and go down to the next row. If I remove float then they center but all of then squish on one row. When I add float the image is no longer centered vertically.
In the final HTMl I will want to use various images of different dimensions, all of which should be central.
I don’t want to use any special elements (like flex grids). Just basic html / css.
7,2153 gold badges6 silver badges22 bronze badges
Flex is the ideal solution for this. But as that is undesired. A solution would be to remove the static width and height you have set on .wraptocenter and use padding instead.
.wraptocenter {
float: left;
position: relative;
padding: 2em 1em;
display: table-cell;
text-align: center;
vertical-align: middle;
background-color: yellow;
border: solid black 1px;
}<div class="wraptocenter"><img src="http://www.brunildo.org/thumb/tmiri2_o.jpg" /></div>
<div class="wraptocenter"><img src="http://www.brunildo.org/thumb/tmiri2_o.jpg" /></div>
<div class="wraptocenter"><img src="http://www.brunildo.org/thumb/tmiri2_o.jpg" /></div>
<div class="wraptocenter"><img src="http://www.brunildo.org/thumb/tmiri2_o.jpg" /></div>
<div class="wraptocenter"><img src="http://www.brunildo.org/thumb/tmiri2_o.jpg" /></div>
<div class="wraptocenter"><img src="http://www.brunildo.org/thumb/tmiri2_o.jpg" /></div>
<div class="wraptocenter"><img src="http://www.brunildo.org/thumb/tmiri2_o.jpg" /></div>
Not the answer you’re looking for? Browse other questions tagged html css or ask your own question.
lang-html
[ad_2]