GileadIT
asked on
CSS - Centering an image
At first glance this may seem simple but I have been struggling with this all morning and now I am crying uncle! Here we go....
I have the following code...
I am trying to center the image inside the figure html tag. Right now, the image is left justified and I cannot get it to center to save my life. Below is some of the CSS code controlling the elements. If you need more let me know.
Here is a link to the image hover affect website being applied to my image. Not sure if it helps but I want to give some context to what I am working with.
Thanks in advance for any help you can offer. - Joe
I have the following code...
<div class="panel-body">
<article id="post-294" class="post-294 post type-post status-publish format-standard has-post-thumbnail hentry category-development">
<div class="img-responsive">
<figure class="imghvr-push-up">
<img alt="" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" height="210" sizes="(max-width: 360px) 100vw, 360px" src="http://server/wp-content/uploads/2017/02/Team.jpg" srcset="http://server/wp-content/uploads/2017/02/Team.jpg 360w, http://server/wp-content/uploads/2017/02/Team-300x175.jpg 300w" width="360" />
<figcaption>
<h4>Title Text</h4>
<p><strong>Title Text</strong> Blurb</p>
</figcaption>
<a href="http://server/training-days/"></a>
</figure>
</div>
</article>
</div>
I am trying to center the image inside the figure html tag. Right now, the image is left justified and I cannot get it to center to save my life. Below is some of the CSS code controlling the elements. If you need more let me know.
/*media all*/
.panel-body {
padding: 15px;
}
/*media all*/
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
display: block;
}
/*media all*/
.carousel-inner > .item > a > img, .carousel-inner > .item > img, .img-responsive, .thumbnail a > img, .thumbnail > img {
display: block;
max-width: 100%;
height: auto;
}
/*media all*/
[class^='imghvr-'], [class*=' imghvr-'] {
position: relative;
display: inline-block;
margin: 0px;
max-width: 100%;
background-color: #2266a5;
color: #fff;
overflow: hidden;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-moz-osx-font-smoothing: grayscale;
-webkit-transform: translateZ(0);
transform: translateZ(0px);
}
/*media all*/
[class^='imghvr-'] > img, [class*=' imghvr-'] > img {
vertical-align: top;
max-width: 100%;
}
/*media all*/
img {
max-width: 100%;
height: auto;
margin: 0 0 10px 0;
}
/*media all*/
#home-promo1 .panel-body img {
margin: auto;
}
Here is a link to the image hover affect website being applied to my image. Not sure if it helps but I want to give some context to what I am working with.
Thanks in advance for any help you can offer. - Joe
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER