Make Text align in center of image

Question

I am unable to align the text. I want to show it in the center of the image circle. Right now the text just hovers above the image.

I am using the text-align:center; declaration. But I guess I am missing something.

Here is my code snippet:

  $(document).ready(function() { //Center the "info" bubble in the "circle" div var divTop = ($("#divCircle").height() - $("#middleBubble").height()) / 2; var divLeft = ($("#divCircle").width() - $("#middleBubble").width()) / 2; $("#middleBubble").css("top", divTop + "px"); $("#middleBubble").css("left", divLeft + "px"); //Arrange the icons in a circle centered in the div numItems = $("#divCircle img").length; //How many items are in the circle? start = 0.25; //the angle to put the first image at. a number between 0 and 2pi step = (2 * Math.PI) / numItems; //calculate the amount of space to put between the items. //Now loop through the buttons and position them in a circle $("#divCircle img").each(function(index) { radius = ($("#divCircle").width() - $(this).width()) / 2; //The radius is the distance from the center of the div to the middle of an icon //the following lines are a standard formula for calculating points on a circle. x = cx + r * cos(a); y = cy + r * sin(a) //We have made adjustments because the center of the circle is not at (0,0), but rather the top/left coordinates for the center of the div //We also adjust for the fact that we need to know the coordinates for the top-left corner of the image, not for the center of the image. tmpTop = (($("#divCircle").height() / 2) + radius * Math.sin(start)) - ($(this).height() / 2); tmpLeft = (($("#divCircle").width() / 2) + radius * Math.cos(start)) - ($(this).width() / 2); start += step; //add the "step" number of radians to jump to the next icon //set the top/left settings for the image $(this).css("top", tmpTop); $(this).css("left", tmpLeft); }); //set the highlight and bubble default based on the homepageGridDefault class currentGridSelector = $(".homepageGridDefault").attr("id"); $("#" + currentGridSelector).attr("src", "images/home-" + currentGridSelector + "-icon-on.png"); $("#middleBubble").html("<p><b>" + $(".homepageGridDefault").data("bubble1") + "</b><br />" + $(".homepageGridDefault").data("bubble2") + "</p>"); //Setup the grid to change the highlighted bubble on mouseover ans click $("#divCircle img").mouseover(function() { //if the selected option has changed, deactivate the current selection if (currentGridSelector != $(this).attr("id")) { $("#" + currentGridSelector).attr("src", "images/home-" + currentGridSelector + "-icon-off.png"); } //turn on the new selection $(this).attr("src", "images/home-" + $(this).attr("id") + "-icon-on.png"); //set the content of the center bubble $("#middleBubble").html("<p><b>" + $(this).data("bubble1") + "</b><br />" + $(this).data("bubble2") + "</p>"); currentGridSelector = $(this).attr("id"); }); }); 

 /** * * Position icons into circle (SO) * */ #mainContainer { width: 100%; text-align: center; } #divCircle { width: 485px; height: 485px; position: relative; } #divCircle img { position: absolute; width: 18%; height: 18%; } #middleBubble { position: realtive; top: 50%; transform: translateY(-50%); background: url(../img/circle/9.png); background-repeat: no-repeat; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; color: #252525; font-size: 1em; text-align: center; height: 50%; width: 90%; margin: auto; position: absolute; } } #middleBubble b { font-size: 1em; } #middleBubble p { margin: 2em; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="container"> <div class="row"> <div class="hidden-xs hidden-sm"> <div class="center-block" id="divCircle"> <div id="middleBubble">&nbsp;</div> <img class="img-circle" src="img/circle/home-all-icon-off.png" id="all" data-bubble1="all:" data-bubble2="discounted lab work<br />on-site"> <img class="img-circle" src="img/circle/home-cover-icon-off.png" id="cover" data-bubble1="Lorem cover<br />personalized<br />lorem:" data-bubble2="Lorem Ipsum,<br />Ipsim Lorem, lore, lorem"> <img class="img-circle" src="img/circle/home-diy-icon-off.png" id="diy" data-bubble1="diy:" data-bubble2="Lorem Ipsum,<br />Ipsim Lorem, lore, lorem"> <img class="img-circle" src="img/circle/home-marketing-icon-off.png" id="marketing" data-bubble1="marketing:" data-bubble2="Lorem Ipsum,<br />Ipsim Lorem, lore, lorem"> <img class="img-circle" src="img/circle/home-other-icon-off.png" id="other" data-bubble1="other plans:" data-bubble2="Lorem Ipsum,<br />Ipsim Lorem, lore, lorem"> <img class="img-circle" src="img/circle/home-special-icon-off.png" id="special" data-bubble1="special for you:" data-bubble2="Lorem Ipsum,<br />Ipsim Lorem, lore, lorem"> <img class="img-circle" src="img/circle/home-vip-icon-off.png" id="vip" data-bubble1="you are Vip:" data-bubble2="Lorem Ipsum,<br />Ipsim Lorem, lore, lorem"> <img class="img-circle" src="img/circle/home-designe-icon-off.png" id="designe" data-bubble1: "designe from us:" data-bubble2="Lorem Ipsum,<br />Ipsim Lorem, lore, lorem"> </div> </div> </div> </div> 

Answer 1

I played with your sample, and made it (perhaps) work based on what I think you're trying to achieve. Sorry if I misunderstood. The jsfiddle is here:

https://jsfiddle.net/6s5h1dar/1/

Essentially I modified your code using help from this page:

http://howtocenterincss.com/

Modified HTML:

<div id="bubbleWrap">
    <div id="middleBubble">&nbsp;</div>
</div>

Modified CSS:

#bubbleWrap {
    display: table-cell;
    vertical-align: middle;
    height: 485px;
    width: 485px;
}

#middleBubble {
    background: url(../img/circle/9.png);
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    color: #252525;
    font-size: 1em;
    text-align: center;
}

Does that suit your needs?

Answer 2

Centering in general can be difficult with HTML/CSS. A good primer on all the good ways to do it is located on css-tricks.com here:

https://css-tricks.com/centering-css-complete-guide/

For your specific situation adding

position: absolute;
top: 50%;
margin-top: -65px; // height of the box

Would do the trick, but using a flex box or another more complicated trick (outlined as css-tricks) would allow you to avoid the brittle margin-top hack, which limits centering to a specific number of lines.