Link to home
Start Free TrialLog in
Avatar of GileadIT
GileadITFlag for United States of America

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

Open in new window


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;
}

Open in new window


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
Avatar of Greg Alexander
Greg Alexander
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of GileadIT

ASKER

Simple. I was way over-complicating this. Thanks!