Как мы можем центрировать div в div с кнопками слева и справа?

В моем коде я пытаюсь поместить кнопки со стрелками в крайнее левое и правое от div, а div mid должен находиться в середине div. Я видел мужественный вопрос по этому вопросу, но не получаю правильный ответ Может ли кто-нибудь помочь мне в чем проблема?

то, что я хочу, это div mid div любого размера, поэтому он содержит 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>

Ответ 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>

Тогда, на ваш вопрос. Отобразите div #mid как встроенный блок и добавьте text-align в #page-nav. Затем поместите левую и правую стрелки в стороны.

#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

Ответ 2

Установите display:table родительскому div и display: table-cell с помощью text-align:center во внутренний div, а левую и правую кнопки

UPDATE

Лучше обернуть левую и правую кнопки в div:

#page-nav{
    display: table;
    width:400px;
    border:1px solid;
    height:20px;
}
#left { 
  display:table-cell }
#right{
  display:table-cell;
  text-align:right;
}
#mid{
  display:table-cell;
  text-align: center;
}
button {
  margin-top: 0;
  margin-bottom: 0;
}

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

Ответ 3

использование

CSS

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

FIDDLE DEMO

Ответ 4

Вот как мне нравится растягивать вещи с помощью text-align: justify; с помощью span at 100% width

Кон таким методом является пространство внизу.

 <div id='page-nav'>

            <button id=left><</button>



 <button>1</button>
        <button>2</button>
        <button>3</button>
        <button>4</button>
        <button>5</button>

        <button id="right">></button>

     <span class="stretch"> </span>

</div>

CSS

 #page-nav{
        width:400px;
        border:1px solid;
        text-align: justify;
    }
    .stretch {
        width:100%;
        height:1em;
        display:inline-block;
    }

Jsfiddle

Ответ 5

Используйте absolute для стрелок и display:table для кнопок:

#page-nav {
width:400px;
border:1px solid;
height:30px;
position: relative;
}
#left {
position:absolute;
left:0;
height:25px;

/*To center vertically*/
margin:auto;
top:0;
bottom:0;
}
#right {
position:absolute;
right:0;
height:25px;

/*To center vertically*/
margin:auto;
top:0;
bottom:0;
}
#mid {
margin: 0 auto;
width:auto;
display:table;
}