javascript - 使文本在图像的中心对齐

Question

我无法对齐文本。 我想显示在图像圈的中心。 现在，文本只是悬停在图像上方。

我正在使用 text-align:center; 声明。 但我想我遗漏了一些东西。

这是我的代码片段:

		$(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

我试玩了您的样本，并(可能)根据我认为您想要实现的目标使其发挥作用。对不起，如果我误解了。 jsfiddle 在这里:

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

基本上我使用此页面的帮助修改了您的代码:

http://howtocenterincss.com/

修改后的 HTML:

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

修改后的 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;
}

这符合您的需求吗？