• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 99
  • Last Modified:

Text Not Centering

I have a page that flips an image with text on the back.. I can't get the text to center vertically without expanding the padding around the image.  The CSS.
div.flip-3d {
		perspective: 1200px; width: 30%; float: left;
		}

		div.flip-3d figure {
		position: relative;
		transform-style: preserve-3d;
		transition: 1s transform;
		font-size: 18px;
		}
		div.flip-3d figure img {
		width: 100%; height:auto;
		}

		/*Captions*/
		div.flip-3d figure figcaption {
		position: absolute;
		width: 100%; height: 100%; top: 0;
		transform: rotateY(.5turn) translateZ(1px);
		background: rgba(255,255,255,0.9);
		background: rgba(255,255,255,0.9);
		text-align: center;
		/*padding-top: 45%;*/
		opacity: 0.6;
		transition: 1s;
		transition: 1s .5s opacity;
		}
		/*Rotations*/
		div.flip-3d:hover figure { transform: rotateY(.5turn); }
		div.flip-3d:hover figure figcaption { opacity: 1; }

Open in new window


http://www.davidschure.com/portfolio.html
0
DS928
Asked:
DS928
  • 2
1 Solution
 
GaryCommented:
Put the text in a span and add this css

#market span {
    display: inline-block;
    margin-top: 25%;
}

Open in new window

0
 
DS928Author Commented:
AI added the CSS and did this.... It went back to the grey showing.  Unless I did it wrong.  (Good Chance)

<div id='product' class="flip-3d">
	<figure>
	<img src="portfolio/adele.jpg" alt="">
	<span><figcaption>Adele</figcaption></span>
	</figure>
	</div>

Open in new window

0
 
DS928Author Commented:
Nevermind it works!  You are the best!  I move dthe spans.
0

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now