What is the best way to center an image vertically within a parent div that is utilizing the CSS display: table property?

I've been attempting to center the div that holds the image on the left vertically, but I'm facing some challenges in achieving that. Any suggestions or solutions would be greatly appreciated.

The container div for the left div containing the image is called weekly-middle.

The text in the container is already centered as desired.

.weekly-middle {
  text-align: center;
  width: 100%;
  /*height:100%;*/
  border: none;
  border-collapse: collapse;
  margin: 0px;
  padding-top: 56px;
  padding-bottom: 56px;
  content: "";
  display: table;
  /*clear: both;*/
}

.left {
  text-align: left;
  padding: 20px;
  width: 100px;
  float: left;
  /*padding-top: 56px; 
padding-bottom: 56px;*/
  vertical-align: middle;
  height: 300px
}

.right {
  margin-left: 100px;
  float: left;
  padding-top: 56px;
  padding-bottom: 56px;
}
<div class="weekly-middle teal">
  <div class="left">
    <img width="50" height="50" src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f9/Wiktionary_small.svg/350px-Wiktionary_small.svg.png" />
  </div>
  <div class="right">
    <h1>Some Title</h1>
    <p class="title">Problems Solved</p>
  </div>
</div>

You can find a solution in the comment section below

Please refer to Joseph Marikle's insightful comment with a link attached to a JSFiddle for further assistance.

htmlcss

Answer №1

Utilize flexbox for enhanced CSS styling capabilities:

.left {
  text-align: left;
  padding: 20px;
  width: 100px;
  float: left;
  /*    padding-top: 56px; 
    padding-bottom: 56px;*/
  vertical-align: middle;
  height: 300px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

Answer №2

Here is an example code snippet you can experiment with:

 <div class="left">
  <div class="display-table"> 
      <div class="display-table-cell">
<img width="50" height="50" src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f9/Wiktionary_small.svg/350px-Wiktionary_small.svg.png" />
      </div>
 </div>

If you want to style it, you can use the following CSS:

.display-table{
     display: table;
     width:100%;
 }
 .display-table-cell{
      display:table-cell;
      vertical-align: middle;
      text-align:left;
      height: 100px;// your choice
 }

Answer №3

Here is a CSS code snippet that may be helpful:

.weekly-middle img {
margin-top:50%;
}


.weekly-middle {
  text-align: center;
  width: 100%;
  /*height:100%;*/
  border: none;
  border-collapse: collapse;
  margin: 0px;
  padding-top: 56px;
  padding-bottom: 56px;
  content: "";
  display: table;
  /*clear: both;*/
  
}
.weekly-middle img {
margin-top:50%;
}

.left {
  text-align: left;
  padding: 20px;
  width: 100px;
  float: left;
  /*padding-top: 56px; 
padding-bottom: 56px;*/
  vertical-align: middle;
  height: 300px
}

.right {
  margin-left: 100px;
  float: left;
  padding-top: 56px;
  padding-bottom: 56px;
}
<div class="weekly-middle teal">
  <div class="left">
    <img width="50" height="50" src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f9/Wiktionary_small.svg/350px-Wiktionary_small.svg.png" />
  </div>
  <div class="right">
    <h1>Some Title</h1>
    <p class="title">Problems Solved</p>
  </div>
</div>

Answer №4

In my opinion, if you remove the 'left' and 'right' classes from the inner divs, it should solve the issue.

Take a look below to see if it meets your requirements.

.weekly-middle {
  text-align: center;
  width: 100%;
  /*height:100%;*/
  border: none;
  border-collapse: collapse;
  margin: 0px;
  padding-top: 56px;
  padding-bottom: 56px;
  content: "";
  display: table;
  /*clear: both;*/
}

.left {
  text-align: left;
  padding: 20px;
  width: 100px;
  float: left;
  /*padding-top: 56px; 
padding-bottom: 56px;*/
  vertical-align: middle;
  height: 300px
}

.right {
  margin-left: 100px;
  float: left;
  padding-top: 56px;
  padding-bottom: 56px;
}
<div class="weekly-middle teal">
  <div class="">
    <img width="50" height="50" src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f9/Wiktionary_small.svg/350px-Wiktionary_small.svg.png" />
  </div>
  <div class="">
    <h1>Some Title</h1>
    <p class="title">Problems Solved</p>
  </div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Using base64 encoding for font-face with alternative fallbacks

After reading this article, I am interested in incorporating a font face in the following way: @font-face { font-family: 'MyWebFont'; src: url('webfont.eot'); src: url('webfont.eot?#iefix') format('embedded-openty ...

css

Efficiently loading Google Visualizations for core charts by utilizing AJAX within jQueryUI tabs

Loading Google Visualizations via AJAX in jQueryUI tabs After encountering a similar issue, I discovered a solution provided in the link above that partially resolved my problem. I am trying to use Google Visualization core charts within jQueryUI tabs wit ...

jqueryhtmlajaxjquery-uigoogle-visualization

Prevent the sorting feature of angular-ui-sortable from functioning on the second div

I have set up a sortable option to arrange image positions. Now, I want to display another "div" if there are less than 5 images, where users can add new images. The issue is that the "add new image" div is nested within another div. Here is my HTML: < ...

htmlangularjsangular-uiangular-ui-sortable

The ellipsis text-overflow feature occasionally malfunctions during a single session when using IE 11

.show-ellipsis { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } <div class="container"> <div class="row show-ellipsis"> {{record.bodyName}} </div> </div> My web application supports versions o ...

htmlcss

`Certain browsers are experiencing issues with text overlay functionality.`

I have managed to successfully create the necessary code to incorporate an image with a child element containing text overlaying the image. However, this functionality does not appear to be working on Internet Explorer (IE), and I am struggling to find a C ...

htmlcssinternet-explorerbootstrap-4

The positioning attribute and flexible height in CSS are essential for creating dynamic

My goal is to create a layout with 3 DIVs inside a container, similar to table rows. top {height = 100px} / middle {height = dynamic} / bottom {height = 100px} I am trying to figure out the best approach to make the height of the middle div dynamic whi ...

cssposition

The footer section of my website seems to have gone missing in the HTML/CSS coding

I'm having trouble with my website footer not displaying. I've tried using "position: absolute; top: 50px; left:100px;" in my HTML/CSS, but it's not working. Can anyone help me fix this issue? Here is a link to the code I'm working on: ...

javascripthtmlcssfooter

Unfortunate Outcome: CSS Request Results in 404 Error

Recently, I made a transition from having a single-page website to using an express server for my website. During this process, I had to modify the file paths. However, I am encountering difficulties in loading my css and js files. Upon inspecting the dev ...

htmlcssexpress

Crafting a triangle's shape using user inputs and a button: a step-by-step guide

https://i.sstatic.net/EAvcU.png I recently created a form similar to the one shown above, but I omitted the triangles on the left and right sides. However, after implementing this feature, my form became static instead of adaptive (I specified sizes in pi ...

htmlcsscss-shapes

Please create a gap between the main menu and the dropdown menu

I can't seem to create some space between my top navigation menu and the dropdown list (when hovered). Check out this screenshot for reference: the lack of space is making it look cluttered I attempted to add a margin-top: 10px; to the css of the dro ...

htmlcss

Ways to align my image to the left and text to the right using Bootstrap

body{ height: 100%; font-size: 1rem ; } .navbar-brand{ font-family: 'Syne Mono', monospace; color: black; size: 0.5rem; } header { width: 100%; height: 100vh; background: rgb(237,104,104); background: linear-gradient(90d ...

htmlcssbootstrap-4

Centered Layout using HTML and CSS

Exploring the world of Ruby on Rails and HTML has been quite an adventure. Today's question veers away from RoR and focuses on HTML and CSS. As I attempt to center my body, a peculiar issue arises: Help me solve this problem here How can I align the ...

htmlcssformattingcentering

The image on Bootstrap isn't showing up

Can someone please help me troubleshoot why my logo image is not showing up? I can't figure out why the min and max width/height parameters are not working as intended. Here is my HTML: <div class="container-fluid"> <div class="head"> ...

htmlcsstwitter-bootstrap

Adding a canvas inside a container that has a height set will result in scrollbars appearing

I am experiencing an issue with the canvas tag. I am trying to append it into a parent div, but when I set specific dimensions for the parent and embed the canvas tag, scrollbars appear. However, when I try the same thing with a regular div, it works fine. ...

javascripthtmlcss

Design a Label or Tab with Pure CSS

Is it possible to achieve a tab or label-like look using only CSS, without the need for images? This is what I am aiming for: While I can create one end, I am struggling to create the triangle point. Can this be accomplished solely with CSS? ...

css

Modify the width measurement from pixels to percentage using JavaScript

Looking for some help with a content slider on my website at this link: . I want to make it responsive so that it adjusts to 100% width. I managed to make it responsive by tweaking some code in the developer tools, but now I'm stuck. The bottom two p ...

javascriptjqueryhtmlcssresponsive-design

Clicking to center div elements

When clicking on my div elements, they transform into flipcards and expand to a size of 600px by 600px. I want these divs to be centered in the middle of the screen when clicked, and then move back to their original position when clicked again. I've b ...

javascriptjqueryhtmlcss

Chrome does not display the z-index of an element

After days of troubleshooting, I have been struggling to make an element with a z-index of 1 visible over its parent element. Originally, the element (a small bucket in the bottom right corner under the title "May/June") on this page: did not need to be a ...

cssz-index

Issue arising from CSS and div elements

I am facing some challenges in making certain divs behave as desired. Take a look at the following references: Link 1: - contains two divs Link 2: - has only one div I am trying to utilize two divs (.content) without them being positioned incorrectly ...

csshtml

Is it possible to deactivate JavaScript for only a specific section of my HTML code?

Currently, I am utilizing a bootstrap template that incorporates the "jqBootstrapValidation.js" script for form validation. After customizing the template and adding a new form, I encountered an issue where my submit button was not functioning properly. Su ...

javascripthtmljqbootstrapvalidation