Centering an image and text both vertically and horizontally within a container div

Question

Centering an image and text both vertically and horizontally within a container div

I am currently working on creating a series of thumbnail-style divs with fixed dimensions. These divs will contain an image and a title text, both of which need to be centered vertically and horizontally within the container div. While I have successfully centered the image, I am struggling to position the text correctly. My goal is to achieve this design using only CSS.

.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>

If you have any suggestions for adjustments to the CSS or HTML code, please let me know.

html css

Answer 1

Answer №1

Can you clarify what you mean by 'Both the image and the title text need to be in the vertical and horizontal center of the container div'?

Do you want them to be centered both horizontally and vertically at the same time? If so, you can achieve this using flexbox like the example below:

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

}

I hope this solution helps you with your layout.

Answer 2

Can you clarify what you mean by 'Both the image and the title text need to be in the vertical and horizontal center of the container div'?

Do you want them to be centered both horizontally and vertically at the same time? If so, you can achieve this using flexbox like the example below:

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

}

I hope this solution helps you with your layout.

Answer 3

Answer №2

/*To solve this issue, simply utilize 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 solution is to use a wrapper and set it as 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>

Answer 4

/*To solve this issue, simply utilize 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 solution is to use a wrapper and set it as 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>

Centering an image and text both vertically and horizontally within a container div

Answer №1

Answer №2

Similar questions

Prevent content overlap in Tumblr's sidebars by using CSS positioning techniques

Is there a way to delete a stylesheet if I only have limited information about the url?

By simply clicking the link, the content comes to life with animation

Customize your webpage's style to reflect your unique identity with user

What could be causing the vertical alignment to be disrupted by the img tag in relation to line-height?

Dynamic Column Image and Text Display

Difficulty executing for loop due to multiple buttons, resulting in malfunctioning buttons in JavaScript code

Converting data from Random.org into an integer using JavaScript

Angular Igx-calendar User Interface Component

Finding all anchor tags in raw HTML using htmlagilitypack

Implementing a pre-defined value for ajax in ajax programming for beginners

Omitting items from the duplicated text on Safari

Extracting data from the web using PHP

How can I set a video as the background of a div?

The sub-menu options are constantly shifting... How can I keep them in place?

The appropriate use of spacing after text in the context of HTML and

Simple ways to conceal the style of the underline for disabled input fields

What are the steps to remove text within a list item using jQuery or regular JavaScript in a WordPress theme?

Is there any practical reason to choose tables over CSS for controlling layouts?

TypeError: 'array' type does not contain the method 'fetch_attribute'