Text Not Centering

Posted on 2014-08-26
Last Modified: 2014-08-26
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;

		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;
		div.flip-3d:hover figure { transform: rotateY(.5turn); }
		div.flip-3d:hover figure figcaption { opacity: 1; }

Open in new window
Question by:DS928
    LVL 58

    Accepted Solution

    Put the text in a span and add this css

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

    Open in new window


    Author Comment

    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">
    	<img src="portfolio/adele.jpg" alt="">

    Open in new window


    Author Closing Comment

    Nevermind it works!  You are the best!  I move dthe spans.

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    Highfive + Dolby Voice = No More Audio Complaints!

    Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

    "I want to put my photos online, but I don't want them stolen.  What settings should I use?" When You Put Photos Online First and foremost, any digital file published on the WWW can be copied, stored, modified, retransmitted, etc.  Remember Naps…
    CSS3 Custom checkboxes This article shows how to style the checkbox form element using only CSS. Works in: Chrome, FF, Safari, Opera, IE9+ Uses modernizr.js to check for :checked pseudo class, falling back to plain old checkboxes (IE8 and bel…
    In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
    In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…

    779 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    14 Experts available now in Live!

    Get 1:1 Help Now