Как центрировать текст в родительском div, который имеет дочерние div разных размеров (flexbox) - PullRequest
Новая
       40

Как центрировать текст в родительском div, который имеет дочерние div разных размеров (flexbox)

0 голосов
/ 26 июня 2019

Я создаю сайт с Flexbox (которым я довольно нов в использовании). Я хочу поставить название сайта и кнопку выпадающего меню в одной строке. Мне удалось сделать это успешно с Flexbox, однако заголовок не центрирован на самой странице. Я знаю, что это потому, что кнопка меню имеет сгибание в 1, а у заголовка - изгиб в 8. Я сделал это специально для интервала, однако теперь заголовок не центрируется на всей странице.

Я попытался оставить заголовок div пустым и просто написать заголовок вне div, но это помещает текст перед родительским контейнером. 

<body>
    <div class="parent container">
        <!--Navigational Bar-->
        <div class="Nav">
            <div id="Nav_Button">
                <p>Button</p>
            </div>
            <div id="Nav_Title">
                <h3>Super Snack Stadium</h3>
            </div>
        </div>
    </div>
</body>


.parent_container {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: flex-start;
}

/*Containers within ".parent container"*/

.Nav {
    border: 1px solid black;
    text-align: center;
    /*Flex Child Code*/
    order:1;
    /*Flex Parent Code*/
    display: flex;
    flex-direction: row;

}

/*--------Children of .Nav ---------*/

#Nav_Button {
    border: 1px solid black;
    /*Flex Child Code*/
    order: 1;
    flex-grow: 1;
}

#Nav_Title {
    border: 1px solid black;
    text-align: center;
    /*Flex Child Code*/
    order: 2;
    flex-grow: 8;
}

Я хочу иметь возможность центрировать заголовок для всей страницы (не только внутри контейнера, в котором он находится), используя Flexbox, если это возможно.

Ответы [ 4 ]

0 голосов
/ 26 июня 2019 

.parent_container {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: flex-start;
}


/*Containers within ".parent container"*/

.Nav {
  border: 1px solid black;
  text-align: center;
  /*Flex Child Code*/
  order: 1;
  /*Flex Parent Code*/
  display: flex;
  flex-direction: row;
  position: relative;
}

h3 {
    position: absolute;
    width: 100%;
    left: 0;
    top: -5px;
}

/*--------Children of .Nav ---------*/

#Nav_Button {
  border: 1px solid black;
  /*Flex Child Code*/
  order: 1;
  flex-grow: 1;
}

#Nav_Title {
  border: 1px solid black;
  text-align: center;
  /*Flex Child Code*/
  order: 2;
  flex-grow: 8;
}
<div class="parent container">
  <!--Navigational Bar-->
  <div class="Nav">
    <div id="Nav_Button">
      <p>Button</p>
    </div>
    <div id="Nav_Title">
      <h3>Super Snack Stadium</h3>
    </div>
  </div>
</div>
0 голосов
/ 26 июня 2019

Шаг 1: Установите Nav position:relative; 

 .Nav {
   border: 1px solid black;
   text-align: center;
   /*Flex Child Code*/
   order:1;
  /*Flex Parent Code*/
  display: flex;
  flex-direction: row;
  position:relative;
}

Шаг 2: сделать h3 абсолютным. 

h3 {
  position:absolute;
}

Теперь h3 извлекается из потока документов, но его можно позиционировать на основе ближайшего элемента relative.

В этом случае мы сделали .Nav как relative. Так, h3 будет использовать .Nav для справки. Поскольку .Nav занимает всю ширину экрана, все, что нам нужно, это поместить h3 в центр .Nav, используя left и transform

Шаг 3: 

h3 {
  position:absolute;
  left:50%;
  transform:translateX(-50%);
}

Final: 

.parent_container {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: flex-start;
}

/*Containers within ".parent container"*/

.Nav {
   border: 1px solid black;
   text-align: center;
   /*Flex Child Code*/
   order:1;
  /*Flex Parent Code*/
  display: flex;
  flex-direction: row;
  position:relative;
}
/*--------Children of .Nav ---------*/

#Nav_Button {
    border: 1px solid black;
    /*Flex Child Code*/
    order: 1;
    flex-grow: 1;
}

#Nav_Title {
    border: 1px solid black;
    text-align: center;
    /*Flex Child Code*/
    order: 2;
    flex-grow: 8;
}
h3 {
  position:absolute;
  left:50%;
  transform:translateX(-50%);
}
<div class="Nav">
            <div id="Nav_Button"><p>Button</p></div>
            <div id="Nav_Title"><h3>Super Snack Stadium</h3></div>
        </div>
0 голосов
/ 26 июня 2019 

.parent_container {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: flex-start;
}

/*Containers within ".parent container"*/

.Nav {
    border: 1px solid black;
    text-align: center;
    /*Flex Child Code*/
    order:1;
    /*Flex Parent Code*/
    display: flex;
    flex-direction: row;
    position: relative;

}

/*--------Children of .Nav ---------*/

#Nav_Button {
    border: 1px solid black;
    /*Flex Child Code*/
    width: 300px;
}

#Nav_Title {
    border: 1px solid black;
    text-align: center;
    /*Flex Child Code*/
    position: absolute;
    width: 100%;
}
#Nav_Title h3 {
    margin: 14px;
}```
0 голосов
/ 26 июня 2019

Так что, если я вас правильно понял, вы уже на правильном пути, но вы не указали, что он должен быть центрирован. 

#Nav_Button {

  display: flex;

  border: 1px solid black;
  /*Flex Child Code*/
  order: 1;
  flex-grow: 1;

  align-items: center;
  justify-content: center;
}

Смотрите здесь, вы используете div, и у этого div есть дисплей по умолчанию: block; https://www.w3schools.com/cssref/css_default_values.asp

А вот для align-items и justify-content https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container

...