html - 我们如何才能将 div 居中放置在左右两侧都有按钮的 div 中？

Question

在我的代码中，我试图将箭头按钮放在 div 的最左边和最右边，mid div 必须在 div 的中间我已经看到 manny question on this 但是没有得到正确的答案有人可以帮助我到底是什么问题吗？

我想要的是任何大小的 mid div jar 头，因此它包含 5 个按钮，但它可能包含或多或少的按钮，因此如何使该 div 居中以便可以实现。

#page-nav{
        width:400px;
        border:1px solid;
        height:20px;
}
    
#right{
        float:right;
}
#mid{
        margin: 0 auto;
        width:auto;
}

<div id='page-nav'>
          
  <button id=left></button>
        
  <div id="mid">
    <button>1</button>
    <button>2</button>
    <button>3</button>
    <button>4</button>
    <button>5</button>
    
  </div>
    
  <button id="right"></button>
</div>


 

Answer 1

您不能使用 <在您的 HTML 中...浏览器会将其视为开始标记。请改用特殊字符 <和 >

<div id='page-nav'>
    <button id="left">&lt;</button>
    <div id="mid">
        <button>1</button>
        <button>2</button>
        <button>3</button>
        <button>4</button>
        <button>5</button>
    </div>
    <button id="right">&gt;</button>
</div>

那么，对于你的问题。显示#mid div 作为行内 block ，并添加 text-align至 #page-nav .然后将左右箭头都 float 到两侧。

#page-nav {
    width:400px;
    border:1px solid;
    /*height:20px;*/
    text-align: center;
}
#left {
    float: left;
}
#right {
    float:right;
}
#mid {
    display: inline-block;
}

请注意，我删除了 #page-nav 的高度所以按钮很好地包裹在里面。

JSFiddle