медиа запрос для выравнивания текста во flexbox - PullRequest
Новая
       2

медиа запрос для выравнивания текста во flexbox

0 голосов
/ 01 марта 2019

У меня есть две flexbox, расположенные рядом, которые располагаются друг над другом под медиазапросом, когда размер экрана уменьшается.Левое поле имеет текст, выровненный по левому краю, правое поле имеет текст, выровненный по правому краю.Можно ли выровнять текст по центру в обоих flex-блоках, когда медиазапрос активирован?Пожалуйста, отправьте код, если это возможно.Спасибо. 

/* Container for flexboxes */
header {
  display: -webkit-flex;
  display: flex;
}

/* Responsive layout - makes the menu and the content (inside the section) sit on top of each other instead of next to each other */
@media (max-width: 600px) {
  header {
    -webkit-flex-direction: column;
    flex-direction: column;
  }
}


/* Style the side */
logosmall {
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  background: #FA8072;
  padding: 20px;
}

/* Style the content */
bannersmall {
  -webkit-flex: 3;
  -ms-flex: 3;
  flex: 3;
  background-color: #FFA07A;
  padding: 10px;
}


/* Container for flexboxes */
section {
  display: -webkit-flex;
  display: flex;
}
<header>

<logosmall>
<h1 style="font-size:15px; font-style:italic; color:#555; text-align: left;">Text-align: left</h1>
</logosmall>

<bannersmall>
<h1 style="font-size:15px; font-style:italic; color:#555; text-align: right;">Text-align: right</h1>
</bannersmall>
</header>

Ответы [ 2 ]

0 голосов
/ 01 марта 2019

Удалите встроенный стиль на h1, вот обновленный код.Надеюсь, это поможет 

/* Container for flexboxes */
header {
  display: -webkit-flex;
  display: flex;
}

/* Responsive layout - makes the menu and the content (inside the section) sit on top of each other instead of next to each other */


/* Style the side */
logosmall {
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  background: #FA8072;
  padding: 20px;
}
header h1{
font-size:15px; font-style:italic; color:#555; text-align: left;
}
header bannersmall h1{
  text-align:right;
}
/* Style the content */
bannersmall {
  -webkit-flex: 3;
  -ms-flex: 3;
  flex: 3;
  background-color: #FFA07A;
  padding: 10px;
}


/* Container for flexboxes */
section {
  display: -webkit-flex;
  display: flex;
}

@media (max-width: 600px) {
  header {
    -webkit-flex-direction: column;
    flex-direction: column;
  }
  header h1, header bannersmall h1{
  text-align:center;
  }
}
<!DOCTYPE html>
<html lang="en">

<head>

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content ="ie=edge">




<title>Test</title>

<style>

</style>
</head>



<body>

<header>

<logosmall>
<h1>Text-align: left</h1>
</logosmall>

<bannersmall>
<h1>Text-align: right</h1>
</bannersmall>
</header>

</body>
0 голосов
/ 01 марта 2019

Вам нужно удалить встроенный стиль для выравнивания текста на обоих ваших элементах и ​​вместо этого поместить их в свой файл CSS.Затем вы можете просто добавить стиль text-align:center; к существующему медиазапросу. 

 @media (max-width: 600px) {
    header {
      -webkit-flex-direction: column;
      flex-direction: column;
      text-align:center;
    }
    logosmall, bannersmall {
      text-align:center;
    }
}

logosmall {
  text-align:left;
}

bannersmall {
  text-align:right;
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...