0

I'm trying to get text to align to the exact center of an image. I've looked at w3schools example and a few others and can't get them to work.

Another issue I'm having is getting the image in the container to fill the whole container. It does this without the box shadow but as soon as I put a box shadow on it fills up only most of the container.

Here's my fiddle: http://jsfiddle.net/DPMC87/nztcg4u2/

                     <div id="image">
                        <a href="http://www.facebook.com">
                            <p id="image-text">
                              Hello World!</p> 
                            </div>
Peter Mortensen
  • 28,342
  • 21
  • 95
  • 123
Garrus
  • 17
  • 4
  • Single line of text [like this example](http://jsfiddle.net/z2mxtpfe/)? There are millions of questions about this. You could just place the properties on the `` itself as well, no need for the `

    `.

     – misterManSam Sep 07 '15 at 03:35
  • @misterManSam That's it exactly. Sorry if it's been asked a lot I tried a few other people's answers and it didn't work. Thanks a million! – Garrus Sep 07 '15 at 03:43
  • How do I mark your answer as the answer? – Garrus Sep 07 '15 at 03:43
  • Bear in mind that if the text goes over more than one line it will break with this technique. Don't worry about marking an answer (it's optional anyway), the question will get closed as a duplicate :) – misterManSam Sep 07 '15 at 03:45
  • @misterManSam ok great, thank you! If I do want to add more than one line would I have to make a new div and change it's line height or is there a better way? – Garrus Sep 07 '15 at 03:50
  • There are a bunch of question [like this one here](http://stackoverflow.com/q/9192389/2930477) that address this. Keywords to look for are "Vertical Align" and "Multiple Lines" – misterManSam Sep 07 '15 at 03:52
  • @misterManSam Cool, I'll have a look. You've been a great help. Thank you :) – Garrus Sep 07 '15 at 03:55
  • No worries :) [This example is one of my favourite techniques](http://jsfiddle.net/by6h4z1u/). There is a good write up of how it works [over here on CSS-Tricks](https://css-tricks.com/centering-in-the-unknown/). It uses a "Ghost element" – misterManSam Sep 07 '15 at 03:58
  • @misterManSam I was just looking at vertical-align:middle; Can't believe I never knew of it's existence haha. Very good technique in that fiddle. – Garrus Sep 07 '15 at 04:01

3 Answers3

0

change the max-width property to 100% in the #image css

#image {
   max-width:100%;
}

let me know what you exactly want in center alignment.

Because according to me it is already center aligned whether you want horizontal or vertical center alignment

Rajesh kannan
  • 638
  • 3
  • 16
0

http://jsfiddle.net/hjqe3cej/

I've made some changes to your code, mainly:

/* fill entire DIV element with your image */    
background-size: cover;

And for the <p> element:

/* absolute positioning required for this to work */
position: absolute;
/* start the <p> element half-way from the top of your container */
top: 50%;
/* make sure it's flush to the left so that your text is in the center, horisontally */
left: 0;

/* to be as accurate as possible, you should know what would be the height of your text block */
height: 20px;
/* and then subtract half of it to ensure your text is dead center vertically */
margin-top: -10px;

Also, make sure that you are using HTML5 to code this page as HTML4 standards do not allow block elements inside of <a>

dmitrizzle
  • 582
  • 5
  • 10
0

Below pattern will short help you out.

#image a{
display:table-cell;
max-height:100%;
max-width:100%;
height:500px;
width:500px;
vertical-align:middle;
}

To see live demo click here:

https://jsfiddle.net/Salehin/nztcg4u2/4/

Salehin
  • 3
  • 4