我无法对齐文字。 我想在图像圈的中心显示它。 现在，文字只是悬停在图像上方。
我正在使用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"> </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>
答案 0 :(得分：2)
我玩了你的样本，并根据我认为你想要实现的目标（或许）工作。对不起，如果我误解了。 jsfiddle在这里：
https://jsfiddle.net/6s5h1dar/1/
基本上我使用此页面的帮助修改了您的代码：
修改HTML：
<div id="bubbleWrap">
<div id="middleBubble"> </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;
}
这是否符合您的需求？
答案 1 :(得分：1)
使用HTML / CSS，一般来说居中很困难。关于所有这些方法的好的入门读物位于css-tricks.com：
https://css-tricks.com/centering-css-complete-guide/
根据您的具体情况添加
position: absolute;
top: 50%;
margin-top: -65px; // height of the box
可以做到这一点，但是使用弹性框或其他更复杂的技巧（概述为css-tricks）将允许您避免脆弱的边缘顶部黑客攻击，这会限制中心到特定数量的线。