Html 居中并包含菜单div

我正在使用css和bootstrap（用于FlexGrid）构建一个悬停菜单。如果我尝试将菜单放在任何父div中，我的菜单只会与父div一样宽

此外，我似乎无法将悬停菜单居中到菜单项的长度

那么，我怎样才能使我的菜单项拉伸宽度，使文本不会换行，以及如何使整个菜单与它的链接居中

html

小的
长菜单项
非常长的菜单项

CSS

/*下拉按钮*/
.dropbtn{
颜色：#3A3A；
填充：16px；
字体大小：16px；
边界：无；
}
/*容器-需要定位下拉内容*/
.下拉列表{
位置：相对位置；
}
/*下拉内容（默认情况下隐藏）*/
.下拉内容{
显示：无；
位置：绝对位置；
背景：#fff；
边框：1px实心#cecece；
颜色：#3A3A；
z指数：1；
框大小：边框框；
}
.下拉内容：之后，.下拉内容：之前{
底部：100%；
左：50%；
边框：实心透明；
内容：“；
身高：0；
宽度：0；
位置：绝对位置；
指针事件：无；
}
.下拉列表内容：在{
边框底色：#fff；
边框宽度：13px；
左边距：-13px；
}
.下拉列表内容：之前{
边框底色：#cecece；
边框宽度：14px；
左边距：-14px；
}
/*下拉列表中的链接*/
.下拉内容a{
颜色：黑色；
填充：12px 16px；
文字装饰：无；
显示：块；
}
/*更改悬停时下拉链接的颜色*/
.下拉列表内容a：悬停{
颜色：$绿色；
}
/*悬停时显示下拉菜单*/
.下拉：悬停.下拉内容{
显示：块；
}
/*显示下拉内容时，更改下拉按钮的背景色*/
.dropdown:悬停.dropbtn{
//背景色：#3e8e41；
}

如何使菜单项拉伸宽度，使文本不会换行

您可以使用css属性

空白：nowrap，因此文本永远不会换行到下一行。见文件：

新行以及如何将与其链接相关的整个菜单居中

因此，您可以设置一个位置
left:50%
，然后使用
transform
属性设置值translateX（50%）将其恢复为其大小的50%。将以下内容添加到
。下拉列表内容
：

left: 50%;
transform: translateX(-50%);


/*下拉按钮*/
.dropbtn{
颜色：#3A3A；
填充：16px；
字体大小：16px；
边界：无；
}
/*容器-需要定位下拉内容*/
.下拉列表{
位置：相对位置；
}
/*下拉内容（默认情况下隐藏）*/
.下拉内容{
显示：无；
位置：绝对位置；
背景：#fff；
边框：1px实心#cecece；
颜色：#3A3A；
z指数：1；
框大小：边框框；
左：50%；
转化：translateX（-50%）；
}
.下拉内容：之后，.下拉内容：之前{
底部：100%；
左：50%；
边框：实心透明；
内容：“；
身高：0；
宽度：0；
位置：绝对位置；
指针事件：无；
}
.下拉列表内容：在{
边框底色：#fff；
边框宽度：13px；
左边距：-13px；
}
.下拉列表内容：之前{
边框底色：#cecece；
边框宽度：14px；
左边距：-14px；
}
/*下拉列表中的链接*/
.下拉内容a{
颜色：黑色；
填充：12px 16px；
文字装饰：无；
显示：块；
空白：nowrap；
}
/*更改悬停时下拉链接的颜色*/
.下拉列表内容a：悬停{
颜色：$绿色；
}
/*悬停时显示下拉菜单*/
.下拉：悬停.下拉内容{
显示：块；
}
/*显示下拉内容时，更改下拉按钮的背景色*/
.dropdown:悬停.dropbtn{
//背景色：#3e8e41；
}

小的
长菜单项
非常长的菜单项
我不能完全确定您的JSFIDLE链接是否正常工作
    /* Dropdown Button */
    .dropbtn {
        color: #3a3a3a;
        padding: 16px;
        font-size: 16px;
       border: none;
  }

  /* The container <div> - needed to position the dropdown content */
  .dropdown {
      position: relative;
  }

  /* Dropdown Content (Hidden by Default) */
  .dropdown-content {
    display: none;
    position: absolute;
    background: #fff;
    border: 1px solid #cecece;
    color:#3a3a3a;
    z-index: 1;
    box-sizing: border-box;
}


.dropdown-content:after, .dropdown-content:before {
    bottom: 100%;
    left: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}

.dropdown-content:after {
    border-bottom-color: #fff;
    border-width: 13px;
    margin-left: -13px;
}
.dropdown-content:before {
    border-bottom-color: #cecece;
    border-width: 14px;
    margin-left: -14px;
}




/* Links inside the dropdown */
.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {
   color:$green;
}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
    display: block;
}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
    //background-color: #3e8e41;
}

left: 50%;
transform: translateX(-50%);