css - 悬停后如何使未知宽度的内联 block 元素保持在中心位置

Question

这是我的我尝试将其居中的宽度未知的导航菜单。问题出在悬停状态下，此导航的宽度会扩大，因此该规则不再适用。 (因为宽度超过了它的容器宽度)

  #centerContent {
    width: 300px;
    margin: auto auto;
    padding: 110px 30px 30px 30px;
    background-color: #fff;
    text-align: center;
    outline: 1px solid red;
    }
        #mainNav {
        display: inline-block;
    	height: 42px;
    	background-color: #f5f5f5;
        white-space: nowrap;
        outline: 1px solid blue;
    }
    
    #mainNav a {
    	transition: all 0.15s ease-in-out;
    }
    
    #mainNav a > * {
    	transition: all 0.15s ease-in-out;
    }
    
    #mainNav > a {
    	display: inline-block;
    	height: 100%;
    	position: relative;
    	font: 13px/42px "IranYekanWebLight";
    	font-weight: 700;
    	color: #575757;
    	overflow: hidden;
    }
    
    #mainNav > a:hover {
    	background-color: #ddd;
    }
    
    #mainNav > a:hover span {
    	color: #fff;
    	font-size: 17px;
    	padding-right: 75px;
    }
    
    #mainNav > a:hover svg {
    	left: 40%;
    	fill: #fff;
    	animation: 0.3s 1 mainNavAnim;
    	animation-timing-function: ease-out;
    }
    
    #mainNav span {
    	padding: 0 28px;
    	position: relative;
    	z-index: 1;
    }
    
    #mainNav svg {
    	height: 90px;
    	position: absolute;
    	bottom: -90%;
    	left: 10%;
    	fill: #e3e3e3;
    	z-index: 0;
    }

          <div id="centerContent">
            <nav id="mainNav">
    			<a class="aqua" href="#">
    				<span>aaa</span>
                    <svg></svg>
                </a><a
                    class="aqua" href="#">
    				<span>bbb</span>
                    <svg></svg>
                </a><a
                    class="aqua" href="#">
    				<span>ccc</span>
                    <svg></svg>
                </a><a
                    class="aqua" href="#">
    				<span>ddd</span>
                    <svg></svg>
                </a>
           </nav>
        </div>

如您所见，#mainNav 宽度是 undefined，这使得它的宽度只要其子项展开即可。

我希望当我将鼠标悬停在每个 A 标签上时，mainNav 保持在其容器的中心位置

Answer 1

您可以使用具有这种样式的包装器 block :

#centerContent {
    width: 700px;
    background-color: #fff;
    padding-top: 30px;
    padding-bottom: 30px;
    text-align: center;
    }
        #mainNav {
        display: inline-block;
    	height: 42px;
    	background-color: #f5f5f5;
        white-space: nowrap;
    }
    
    #mainNav a {
    	transition: all 0.15s ease-in-out;
    }
    
    #mainNav a > * {
    	transition: all 0.15s ease-in-out;
    }
    
    #mainNav > a {
    	display: inline-block;
    	height: 100%;
    	position: relative;
    	font: 13px/42px "IranYekanWebLight";
    	font-weight: 700;
    	color: #575757;
    	overflow: hidden;
    }
    
    #mainNav > a:hover {
    	background-color: #ddd;
    }
    
    #mainNav > a:hover span {
    	color: #fff;
    	font-size: 17px;
    	padding-right: 75px;
    }
    
    #mainNav > a:hover svg {
    	left: 40%;
    	fill: #fff;
    	animation: 0.3s 1 mainNavAnim;
    	animation-timing-function: ease-out;
    }
    
    #mainNav span {
    	padding: 0 28px;
    	position: relative;
    	z-index: 1;
    }
    
    #mainNav svg {
    	height: 90px;
    	position: absolute;
    	bottom: -90%;
    	left: 10%;
    	fill: #e3e3e3;
    	z-index: 0;
    }

 <div id="centerContent">
            <nav id="mainNav">
    			<a class="aqua" href="#">
    				<span>aaa</span>
                    <svg></svg>
                </a><a
                    class="aqua" href="#">
    				<span>bbb</span>
                    <svg></svg>
                </a><a
                    class="aqua" href="#">
    				<span>ccc</span>
                    <svg></svg>
                </a><a
                    class="aqua" href="#">
    				<span>ddd</span>
                    <svg></svg>
                </a>
           </nav>
        </div>