html - Center text horisontaly and verticaly in an image -

html - Center text horisontaly and verticaly in an image -

i want alter text on photos in center, both horisontal , vertical. it's centered horisontally, not vertically. remember it's "hover-effect background image"-thing.

html

<a href="portrait"> <div id="imagebox1" class="imagebox columns"> <div id="image1"> <span id="plus">portrett</span> </div> </div> </a> <a href="nature"> <div id="imagebox3" class="imagebox columns"> <div id="image3"> <span id="plus">natur</span> </div> </div> </a> <a href="various"> <div id="imagebox2" class="imagebox columns"> <div id="image2"> <span id="plus">annet</span> </div> </div> </a>

css

#imagebox1, #imagebox2, #imagebox3 { float: left; background-repeat: no-repeat; margin-right: 0px; } #imagebox1 { background:url(../images/sample_image400.jpg); background-size: cover; margin-left: 0px; } #imagebox2 { background:url(../images/sample_image.jpg); background-size: cover; } #imagebox3 { background:url(../images/sample_image.jpg); background-size: cover; } #image1, #image2, #image3 { background:rgba(255,255,255,.75); text-align:center; padding-top: 100%; opacity:0; -webkit-transition: 0.3s ease-in-out; } #imagebox1:hover #image1 { opacity:1; } #imagebox2:hover #image2 { opacity:1; } #imagebox3:hover #image3 { opacity:1; } .images img { margin-left: 0px; padding-bottom:30px; padding-top:35px; } #imagebox1, #imagebox2, #imagebox3 { margin-bottom: 30px; } #plus { font-family: gotham, "helvetica neue", helvetica, arial, sans-serif; font-weight: 200; color: #282828; font-size: 20px; text-transform: uppercase; }

jsfiddle

http://jsfiddle.net/8abcy/

ok...i think html construction complex trying do.

so i've simplified it.

jsfiddle demo

the image content , should in html not background-image in css gives us, simply

html

<a href="portrait" class="imagebox"> <img src="http://www.ginakorslund.no/images/sample_image400.jpg" alt=""/> <span class="plus">portrett</span> </a>

note i'be changed lot of id out more generic class. can still give each anchor link individual id if want classes mean css re-usable.

css

.imagebox { position: relative; /* required */ text-align: center; display: block; } .plus { position: absolute; top:50%; /* top , left values set span's top left corner */ left:50%; /* halfway downwards , across screen **not** center */ -webkit-transform:translate(-50%, -50%); transform:translate(-50%, -50%); /* move span half it's own width , height */ /* , it's centered regardless of width & height */ display: none; /* hide until hovered */ font-family: gotham, "helvetica neue", helvetica, arial, sans-serif; font-weight: 200; color: #282828; font-size: 20px; text-transform: uppercase; color:white; } .imagebox:hover .plus { display: block; /* show when link hovered */ }

html css center