troubleshooting Question

CSS - Centering an image

Avatar of GileadIT
GileadITFlag for United States of America asked on
CSSHTMLWeb Development
2 Comments1 Solution220 ViewsLast Modified:
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
Greg Alexander
Lead Developer

Our community of experts have been thoroughly vetted for their expertise and industry experience.

Log in to continue reading
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform for $9.99/mo
View membership options
Unlock 1 Answer and 2 Comments.
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
See how we're fighting big data
The Value of Experts Exchange in My Daily IT Life

Experts Exchange (EE) has become my company's go-to resource to get answers. I've used EE to make decisions, solve problems and even save customers. OutagesIO has been a challenging project and... Keep reading >>

Mike

Owner of Outages.IO
Phoenix, Arizona, United States
Member Since 2016
Join a full scale community that combines the best parts of other tools into one platform.
Unlock 1 Answer and 2 Comments.
View membership options
“All of life is about relationships, and EE has made a virtual community a real community. It lifts everyone's boat.”
William Peck

Member since 2004