1

Тема: Центрування вмісту одного div в іншому div

Добрий день! Э такий код html

<div class="email">
    <h2>Design tips, tricks and freebies. Delivered weekly.</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipis cing elit, sed dooing.</p>
    <div class="subscriber">
        <form action="" method="post">
            <input type="email" name="email" placeholder="Email Adress">
            <input type="submit" value="SUBSCRIBE">
        </form>
    </div>            
</div>

і його CSS

.email {
    background-color: #F5F0DD;
    position: absolute;
    top: 4720px;
    text-align: center; 
    width: 100%;
    padding-bottom: 220px;
}
.email h2 {
    font-family : 'Ubuntu', sans-serif;
    font-size : 1.5em;
    color: #fff;
    margin-top: 30px;
    margin-bottom: 15px;
    text-transform: uppercase;
}

.email p {
    font-family : 'Ubuntu', sans-serif;
    font-size : 0.7em;
    color: #fff;
    margin-bottom: 25px;
}
.subscriber {
    position: absolute;
}
.subscriber input[type="email"] {
    border : 0;
    border-radius : 5px;
    width : 240px;
    font-family : 'Open Sans', sans-serif;
    font-size : 1.0em;
    color : #000;
    padding : 10px 10px 10px 10px;
    position: relative;
    top:10px;
}

.subscriber input[type="submit"] {
    background : #ff2d2d;
    font-size : 0.7em;
    color : #fff;
    font-family : 'Ubuntu', sans-serif;
    border : 0;
    border-radius : 5px;
    padding : 12px 35px 12px 35px;
    cursor : pointer;
    position: relative;
    top:30px;
}

Треба, щоб на усій пристроях менших за екран компа поля input центрувались по горизонталі одне під іншим.
Бюсь-бюсь не вдається зробити правильно центрування. Якщо на портреті процентрує, то при переключенні на ландшафт знову усі поля то в право то вліво. Дякую
https://replace.org.ua/misc.php?action=pun_attachment&amp;item=1851&amp;download=0

Post's attachments

Буфер обміну01.jpg 7.02 kb, 129 downloads since 2018-07-13 

2

Re: Центрування вмісту одного div в іншому div

IS1971 написав:

Добрий день!

код

Э такий код html

<div class="email">
    <h2>Design tips, tricks and freebies. Delivered weekly.</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipis cing elit, sed dooing.</p>
    <div class="subscriber">
        <form action="" method="post">
            <input type="email" name="email" placeholder="Email Adress">
            <input type="submit" value="SUBSCRIBE">
        </form>
    </div>            
</div>

і його CSS

.email {
    background-color: #F5F0DD;
    position: absolute;
    top: 4720px;
    text-align: center; 
    width: 100%;
    padding-bottom: 220px;
}
.email h2 {
    font-family : 'Ubuntu', sans-serif;
    font-size : 1.5em;
    color: #fff;
    margin-top: 30px;
    margin-bottom: 15px;
    text-transform: uppercase;
}

.email p {
    font-family : 'Ubuntu', sans-serif;
    font-size : 0.7em;
    color: #fff;
    margin-bottom: 25px;
}
.subscriber {
    position: absolute;
}
.subscriber input[type="email"] {
    border : 0;
    border-radius : 5px;
    width : 240px;
    font-family : 'Open Sans', sans-serif;
    font-size : 1.0em;
    color : #000;
    padding : 10px 10px 10px 10px;
    position: relative;
    top:10px;
}

.subscriber input[type="submit"] {
    background : #ff2d2d;
    font-size : 0.7em;
    color : #fff;
    font-family : 'Ubuntu', sans-serif;
    border : 0;
    border-radius : 5px;
    padding : 12px 35px 12px 35px;
    cursor : pointer;
    position: relative;
    top:30px;
}

Треба, щоб на усій пристроях менших за екран компа поля input центрувались по горизонталі одне під іншим.
Бюсь-бюсь не вдається зробити правильно центрування. Якщо на портреті процентрує, то при переключенні на ландшафт знову усі поля то в право то вліво. Дякую
https://replace.org.ua/misc.php?action=pun_attachment&amp;item=1851&amp;download=0

1) Це не весь код, тому відтворити вигляд як у вас, не виходить.

2)

.email {
    position: absolute;
    top: 4720px;
    padding-bottom: 220px;
}

це погано.

.subscriber input[type="email"] { width: 240px; }

А тут краще використовувати em або %.

3)

<input type="submit" value="SUBSCRIBE">

value не має бути CAPS'ом, для цього існує text-transform: uppercase;

3 Востаннє редагувалося IS1971 (18.07.2018 09:05:34)

Re: Центрування вмісту одного div в іншому div

leofun01 написав:

Це не весь код, тому відтворити вигляд як у вас, не виходить.

Дякую за увагу! Добре, мені ніяк не вдається зробити так, щоб при усіх варіантах портрет/ландшафт input "Email address" i button "Subscribe" рівнялись по центру. Чи так можливо? Поки що мушу при різних розмірах просто центрувати left: XXpx;

leofun01 написав:
.email {
    position: absolute;
    top: 4720px;
    padding-bottom: 220px;
}

це погано.

Чому так є погано? Я ще не спец, якщо можна поясніть.

4

Re: Центрування вмісту одного div в іншому div

так, це можливо. Чекайте, я прийду з поліклініки і покажу.

5

Re: Центрування вмісту одного div в іншому div

о, забув за вас

6

Re: Центрування вмісту одного div в іншому div

таке ?
https://jsfiddle.net/38chsL4n/6/

<div class="email">
    <h2>Design tips, tricks and freebies. Delivered weekly.</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipis cing elit, sed dooing.</p>
    <div class="subscriber">
        <form action="" method="post">
          <div class="wrapper">
            <input type="email" name="email" placeholder="Email Adress">
            <input type="submit" value="SUBSCRIBE">
            </div>
        </form>
    </div>            
</div>
.email {
    background-color: #F5F0DD;
    position: absolute;
   
    text-align: center; 
    width: 100%;
    padding-bottom: 220px;
}
.email h2 {
    font-family : 'Ubuntu', sans-serif;
    font-size : 1.5em;
    color: #fff;
    margin-top: 30px;
    margin-bottom: 15px;
    text-transform: uppercase;
}
 
.email p {
    font-family : 'Ubuntu', sans-serif;
    font-size : 0.7em;
    color: #fff;
    margin-bottom: 25px;
}
.wrapper {
  display: flex;
  justify-content: center;
}
.subscriber input[type="email"] {
    border : 0;
    border-radius : 5px;
    width : 240px;
    font-family : 'Open Sans', sans-serif;
    font-size : 1.0em;
    color : #000;
    padding : 10px 10px 10px 10px;
    position: relative;
}
 
.subscriber input[type="submit"] {
    background : #ff2d2d;
    font-size : 0.7em;
    color : #fff;
    font-family : 'Ubuntu', sans-serif;
    border : 0;
    border-radius : 5px;
    padding : 12px 35px 12px 35px;
    cursor : pointer;
    position: relative;
}
@media only screen and (max-width: 720px) {
  .wrapper {
     flex-direction: column;
     align-items: center;
  }
  .subscriber input[type="submit"] {
    margin-top: 20px;
  }
}

7

Re: Центрування вмісту одного div в іншому div

Дякую. Буду вивчати. Якщо будуть питання, можна звернутись?

8

Re: Центрування вмісту одного div в іншому div

IS1971 написав:

Дякую. Буду вивчати. Якщо будуть питання, можна звернутись?

ні.

Подякували: morgot1

9

Re: Центрування вмісту одного div в іншому div

FakiNyan написав:

таке ?
https://jsfiddle.net/38chsL4n/6/

<div class="email">
    <h2>Design tips, tricks and freebies. Delivered weekly.</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipis cing elit, sed dooing.</p>
    <div class="subscriber">
        <form action="" method="post">
          <div class="wrapper">
            <input type="email" name="email" placeholder="Email Adress">
            <input type="submit" value="SUBSCRIBE">
            </div>
        </form>
    </div>            
</div>
.email {
    background-color: #F5F0DD;
    position: absolute;
   
    text-align: center; 
    width: 100%;
    padding-bottom: 220px;
}
.email h2 {
    font-family : 'Ubuntu', sans-serif;
    font-size : 1.5em;
    color: #fff;
    margin-top: 30px;
    margin-bottom: 15px;
    text-transform: uppercase;
}
 
.email p {
    font-family : 'Ubuntu', sans-serif;
    font-size : 0.7em;
    color: #fff;
    margin-bottom: 25px;
}
.wrapper {
  display: flex;
  justify-content: center;
}
.subscriber input[type="email"] {
    border : 0;
    border-radius : 5px;
    width : 240px;
    font-family : 'Open Sans', sans-serif;
    font-size : 1.0em;
    color : #000;
    padding : 10px 10px 10px 10px;
    position: relative;
}
 
.subscriber input[type="submit"] {
    background : #ff2d2d;
    font-size : 0.7em;
    color : #fff;
    font-family : 'Ubuntu', sans-serif;
    border : 0;
    border-radius : 5px;
    padding : 12px 35px 12px 35px;
    cursor : pointer;
    position: relative;
}
@media only screen and (max-width: 720px) {
  .wrapper {
     flex-direction: column;
     align-items: center;
  }
  .subscriber input[type="submit"] {
    margin-top: 20px;
  }
}

Нажаль не працює. Можливо це через
.wrapper {
  display: flex;
  justify-content: center;
}
З flex не працював ще. Можливо я щось не правильно ще розумію, але якщо flex вимагає якісь модулі, які треба
додатково підключити (як bootstrap), то підскажіть. Дякую.

10

Re: Центрування вмісту одного div в іншому div

IS1971 написав:
FakiNyan написав:

таке ?
https://jsfiddle.net/38chsL4n/6/

<div class="email">
    <h2>Design tips, tricks and freebies. Delivered weekly.</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipis cing elit, sed dooing.</p>
    <div class="subscriber">
        <form action="" method="post">
          <div class="wrapper">
            <input type="email" name="email" placeholder="Email Adress">
            <input type="submit" value="SUBSCRIBE">
            </div>
        </form>
    </div>            
</div>
.email {
    background-color: #F5F0DD;
    position: absolute;
   
    text-align: center; 
    width: 100%;
    padding-bottom: 220px;
}
.email h2 {
    font-family : 'Ubuntu', sans-serif;
    font-size : 1.5em;
    color: #fff;
    margin-top: 30px;
    margin-bottom: 15px;
    text-transform: uppercase;
}
 
.email p {
    font-family : 'Ubuntu', sans-serif;
    font-size : 0.7em;
    color: #fff;
    margin-bottom: 25px;
}
.wrapper {
  display: flex;
  justify-content: center;
}
.subscriber input[type="email"] {
    border : 0;
    border-radius : 5px;
    width : 240px;
    font-family : 'Open Sans', sans-serif;
    font-size : 1.0em;
    color : #000;
    padding : 10px 10px 10px 10px;
    position: relative;
}
 
.subscriber input[type="submit"] {
    background : #ff2d2d;
    font-size : 0.7em;
    color : #fff;
    font-family : 'Ubuntu', sans-serif;
    border : 0;
    border-radius : 5px;
    padding : 12px 35px 12px 35px;
    cursor : pointer;
    position: relative;
}
@media only screen and (max-width: 720px) {
  .wrapper {
     flex-direction: column;
     align-items: center;
  }
  .subscriber input[type="submit"] {
    margin-top: 20px;
  }
}

Нажаль не працює. Можливо це через
.wrapper {
  display: flex;
  justify-content: center;
}
З flex не працював ще. Можливо я щось не правильно ще розумію, але якщо flex вимагає якісь модулі, які треба
додатково підключити (як bootstrap), то підскажіть. Дякую.

нічого там не треба, опишіть свою проблему детальніше і зробіть мінімальний приклад, котрий показує проблему, можете намалювати, як повинно бути

11 Востаннє редагувалося IS1971 (20.07.2018 11:22:21)

Re: Центрування вмісту одного div в іншому div

Проблема в тому, що не знаю (не розумію) як правильно верстати адаптивно для різних розмірів мобільних пристроїв (і тільки мобільних) і варіантів портрет\альбом. Зверстав сторінку для ПК - усе добре на ПК виглядаю. Зменшуючи розміри екрана на ПК, верстка теж гарно виглядає. Тепер роблю мобільну адаптацію.
Найшов в неті таку заготовку

/* Смартфони (портретний і альбомний режими) ———– */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Додаємо сюди стилі*/
}
/* Смартфони (альбомний режим) ———– */
@media only screen
and (min-width : 321px) {
/* Додаємо сюди стилі*/
}
/* Смартфони (портретний режим) ———– */
@media only screen
and (max-width : 320px) {
/* Додаємо сюди стилі*/
}
/* iPad (портретний і альбомний режими) ———– */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Додаємо сюди стилі*/
}
/* iPad (альбомний режим) ———– */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Додаємо сюди стилі*/
}
/* iPad (портретний режим) ———– */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Додаємо сюди стилі*/
}
/* Настільні комп’ютери і ноутбуки ———– */
@media only screen
and (min-width : 1224px) {
/* Додаємо сюди стилі*/
}
/* Великі екрани ———– */
@media only screen
and (min-width : 1824px) {
/* Додаємо сюди стилі*/
}
/* iPhone 5 (портретний і альбомний режими)———– */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px) {
/* Додаємо сюди стилі*/
}
/* iPhone 5 (альбомний режим)———– */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px)
and (orientation : landscape) {
/* Додаємо сюди стилі*/
}
/* iPhone 5 (портретний режим)———– */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px)
and (orientation : portrait) {
/* Додаємо сюди стилі*/
}

Чи потрібно для кожного типу екрана в цій заготовці свою розмітку робити? Виходить дуже багато варіантів і якось не гнучко.
От і подумав чи може бути якось так щоб на ТІЛЬКИ на мобільних пристроях форми введення були одна під другою і центрувались. тоді виставивши це
@media only screen
and (min-device-width : 320px)
до якогось максимального мобільного розміру буде завжди центровано
and (max-device-width : ХХХpx)

Ось приклади як виглядає на ПК і як виглядає в Chrome в відладці в портреті і при обертанні в альбом

Post's attachments

Буфер обміну.jpg 26.48 kb, 148 downloads since 2018-07-20 

Подякували: 221VOLT1

12

Re: Центрування вмісту одного div в іншому div

Не можу кілька зображень вставити
Це на мобільному екрані портрет

Post's attachments

Буфер обміну01.jpg 7.02 kb, 130 downloads since 2018-07-20 

13

Re: Центрування вмісту одного div в іншому div

А це при переключенні в альбом

Post's attachments

Буфер обміну02.jpg 6.82 kb, 138 downloads since 2018-07-20 

14

Re: Центрування вмісту одного div в іншому div

А як має бути?

15

Re: Центрування вмісту одного div в іншому div

FakiNyan написав:

А як має бути?

Хочу, щоб на третій картинці, було як на другій. І на усіх мобільних екранах, щоб центрувало поля введення і кнопку Subscribe.

16

Re: Центрування вмісту одного div в іншому div

то все робиться через display: flex; і зміну flex-direction з row на column для мобілок, для центрування використовуються align-items: center; і justify-content: center; (з останнім мона погратись)

Подякували: 221VOLT, leofun01, IS19713