CODEWITHSUNDEEP
htmlcss
Laura
Laura

Reputation: 99

Center image both horizontally and vertically

I have 2 images on my homepage that are centered vertically with this. 

#pgc-10-1-1.panel-grid-cell {
display: inline-block;
float: none !important;
vertical-align: middle;

}

#pgc-10-3-0.panel-grid-cell {
display: inline-block;
float: none !important;
vertical-align: middle;

}

However, I want them to be centered both horizontally and vertically.
When I don't use float: none !important;, the image is centered horizontally, but not vertically. When I use float: none !important;, the image is centered vertically but not horizontally. How can I have it centered both horizontally and vertically at the same time? Thanks!

<div class="panel-grid-cell" id="pgc-10-1-1" >
  <div class="so-panel widget widget_sow-editor panel-first-child panel-last-child" id="panel-10-1-1-0">
    <div class="so-widget-sow-editor so-widget-sow-editor-base">
      <div class="siteorigin-widget-tinymce textwidget">
        <p>
          <img style="text-align: center;" src="site" width="208" height="208" />
        </p>
      </div>
    </div>
  </div>
</div>

Upvotes: 0

Views: 206

Answers (2)

Kevin Restiaens
Kevin Restiaens

Reputation: 238

#pgc-10-1-1.panel-grid-cell {
  display: block;
  float: none !important;
  background-color: blue;
  width: 500px;
  height: 500px;
  position: absolute;
}

#pgc-10-1-1.panel-grid-cell > div{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  }

#pgc-10-3-0.panel-grid-cell {
  display: inline-block;
  float: none !important;
  vertical-align: middle; 
}
<div class="panel-grid-cell" id="pgc-10-1-1" >
  <div class="so-panel widget widget_sow-editor panel-first-child panel-last-child" id="panel-10-1-1-0">
    <div class="so-widget-sow-editor so-widget-sow-editor-base"><div class="siteorigin-widget-tinymce textwidget">
      <p>
        <img style="text-align: center;" src="site" width="208" height="208" />
      </p>
      </div>
    </div>
  </div>
</div>

Upvotes: 0

Aer0
Aer0

Reputation: 3907

According to your code snippet, I've taken a short look into your website. You are currently nesting a few divs into each other. To achieve what you want, you have to set text-align: center; in your parental container. In your case, you have 2 child divs inside of your parent, which (both together) take 100 % of your parent divs width.

As a short example, you may use display: none; (just to hide that div) on the div with the text and text-align: center; on your parent one. After that, your image should be centered. After doing so, you may see that your div containing the text has to be smaller. If you want the text to appear below your image, just use display: block; on the text div.

Upvotes: 1

Related Questions