如何使这个弹出文本框居中

Question

这是我和我的一些朋友正在为他们的YouTube频道建立的网站 我从W3schools获得了这个弹出代码 我有弹出窗口工作，但我希望弹出窗口是320px宽而不是160px并与图像对齐。问题是当我将弹出窗口扩展到320px并尝试将弹出窗口置于图像中心时，它永远不会成功。我的所有解决方案都将弹出窗口向右移动或者与实际布局本身混淆。

我尝试过 - 在将宽度设置为320px后，在CSS中我尝试删除margin-left属性和/或将其设置为0px，我尝试删除left属性和/或将其设置为auto，我已经删除了填充，我已经在.popup和.popup .popuptext中搞乱了位置属性但是唉，什么都没有用。他们要么与布局本身搞混，要么只是将弹出窗口向右移动。我也尝试过在线研究这些解决方案，但我还没有找到解决方案，因为我觉得这个问题太具体了，因为我从W3schools那里得到了原来的代码，没有人在之前解决过并在网上发布过。不管怎样，或者我还是太新了，无法专门研究答案。此外，我仍然试图围绕位置属性。我认为问题在于position属性，因为当我检查元素时，我看到除了margin或padding之外还有多少定位，以及我想说这就是扔东西的原因。

这是相关的CSS代码 -

.popup {
    position: relative;
    display: inline-block;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* The actual popup */

.popup .popuptext {
    visibility: hidden;
    width: 160px; 
    background-color: #555;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 8px 0;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    margin-left: -80px;
}

/* Popup arrow */
.popup .popuptext::after {

}

/* Toggle this class - hide and show the popup */
.popup .show {
    visibility: visible;
    -webkit-animation: fadeIn 1s;
    animation: fadeIn 1s;
}

/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
    from {opacity: 0;}
    to {opacity: 1;}
}

@keyframes fadeIn {
    from {opacity: 0;}
    to {opacity:1 ;}
}

这是一个指向实际网站的链接，这样你们就可以看到发生了什么，并查看其背后的源代码。 The Site

非常感谢。非常感谢任何和所有的帮助。要查看弹出窗口，请单击剧集标题。

Answer 1

似乎如果你删除左边：50％和margin-left然后添加宽度：320px你的问题就消失了。尽量不要只是从W3Schools复制粘贴，因为它已经过时了。更可靠的来源是MDN。

Answer 2

您需要删除margin-left。

执行此操作后，设置所需的宽度并定义名为transform的属性，其值为translateX(-50%);

离开你：

.popup .popuptext {
    visibility: hidden;
    width: 320px; 
    background-color: #555;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 8px 0;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    transform: translateX(-50%);
}

我不知道你是否知道但是Bootstrap已经拥有了自己的popover。

另一方面，你不应该看W3Schools，它不是一个好的来源。

以下是一些更好的资源：

Plain Javascript

<强> CSS Reference Codrops

Answer 3

你总是可以使用bootstrap class text-center

http://getbootstrap.com/css/