垂直和水平中心对齐容器div内的图像和文本

Question

I am trying to create a list of thumbnail type divs. The divs have fixed height and width. The div containes an image and a title text. Both the image and the title text need to be in the vertical and horizontal cen ter of the container div. I am able to center the image but cannot quite make out how to position the text. I need to design it with css only.

 .thumb { height: 100px; width: 96px; padding: 3px; cursor: pointer; } .thumb img, .thumb svg { height: 100%; width: 100%; max-height: 100%; max-width: 100%; } .thumb div { position: absolute; } 

 <div id="Thumb" class="thumb ml-10 mt-10 float-left ui-sortable-handle"> <img src="../something.svg"> <div>Name of something</div> </div> 

Please suggest what changes I need to make to the CSS or HTML.

Answer 1

first what do you mean 'Both the image and the title text need to be in the vertical and horizontal center of the container div' ?.

At the same time, they whould be in horizontal and vertical ? Anyway if you want them to be in horizontal, you can use flexbox like this :

.thumb {
 display : flex;
 flex-direction: row; // change this to 'column' if you want vertical
 // for center
 align-items: center;

}

Hope this will help you.

Answer 2

/*The ans is simple you use a wrapper*/

 .thumb { height: 100px; width: 96px; padding: 3px; cursor: pointer; } .thumb img, .thumb svg { height: 100%; width: 100%; max-height: 100%; max-width: 100%; } .thumb div { position: absolute; } /*The ans is simple you use a wrapper make it flex*/ .wrapper{ display: flex; align-items: center; justify-content: center; } 

 <div class="wrapper"> <div id="Thumb" class="thumb ml-10 mt-10 float-left ui-sortable-handle"> <img src="https://www.f-cdn.com/assets/img/fl-logo-c555380d.svg"> <div>Name of something</div> </div> </div>