0

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="https://img.xcitefun.net/users/2015/01/382650,xcitefun-philippines-tour-1.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. enter image description here

2
  • 1
    why don't you want to use flex? absolute positioning and float should be used as little as possible.
    – DCR
    Jun 2, 2022 at 18:41
  • @DCR See my comment on the answer provided. Jun 2, 2022 at 18:41

2 Answers 2

1

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>

Flex solution with the static parent height and width. A Fiddle for Andrew

9
  • Thanks, it works, but, when I introduce other images, like a portrait image in the next container, the size for that one is taller. I want all containers to be grid like. For now, I have opted for not using flex because I am still using a CHtmlView control which won't support it. Eventually I will use WebView2 where a flex could be used. Jun 2, 2022 at 18:41
  • 1
    @AndrewTruckle No problem. Can you post an example or link a fiddle to show me what you mean when you have the portrait image and I can give you a solution for that one? Would a flex solution be helpful in addition to my current solution for when you use WebView2? Personal opinion - anything that doesn't support flex is outmoded. @gmail
    – Kameron
    Jun 2, 2022 at 18:49
  • I have updated the question by just adding another graphic from a public website. It conveys the idea. I know CHtmlView is now outdated, but WebView2 is new and it has some crippling limitations which, until resolved, mean it is not suitable to use in my live application. Jun 2, 2022 at 18:55
  • And yes, a flex solution would be helpful in addition. Eventually I will use WebView2 and I would be able to migrate over to that methodology. I have never used it. Jun 2, 2022 at 18:56
  • 1
    @AndrewTruckle Here is the flex solution with the static parent height and width. A Fiddle for Andrew. If you're doing a lot of front-end work I would recommend mastering flex.
    – Kameron
    Jun 2, 2022 at 19:21
0

Put these images as background-image for those divs. Btw you can make it responsive like that easily

Not the answer you're looking for? Browse other questions tagged or ask your own question.