Вертикальное выравнивание перепутались на границе

Question

Answer 1

Ваше Вертикальное выравнивание перепутались, потому что браузер применяется верхний нижний край в р теге, если вы удалили его, это решит вашу проблему

.question > p { 
    margin: 0; 
}

или

p { 
    margin: 0; 
}

видеть мою обновленную скрипку here

Answer 2

Попробуйте, родительский div отображается в виде table и p отображается как table-cell затем использовать vertical-align.
См. Ниже фрагмент.

@import 'https://fonts.googleapis.com/css?family=Open+Sans'; 
 

 
body { 
 
    text-align: center; 
 
    width: 100%; 
 
    font-family: 'Open Sans',sans-serif; 
 
    //background-color: rgba(0,150,250,0.75); 
 
} 
 

 
.question { 
 
    border: 2em solid rgba(0,150,250,.75); 
 
    background-color: white; 
 
    border-radius: 1.618em; 
 
    margin: 5em auto; 
 
    width: 75%; 
 
    height: 10em; 
 
    display: table; 
 
} 
 

 
.question p { 
 
    border-radius: 1.618em; 
 
    position: relative; 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
} 
 

 
.answer { 
 
    font-size: 1.618em; 
 
    border: 0; 
 
    border-radius: 1.618em; 
 
    width: 50%; 
 
    margin: auto; 
 
}

<body> 
 
    <div class="main_container"> 
 
     <div class="question"> 
 
     <p>Test question here</p> 
 
     </div> 
 
     <input class="answer" type="text"> 
 
     <input class="submit" type="submit"> 
 
    </div> 
 
    </body>

Answer 3

Обновление позиций внутреннего пункта в абсолют и удалите края

и обновить внешний DIV положения пункта к относительным

рассматривают работу скрипки link

.question { 
    border-style: solid; 
    border-color: rgba(0,150,250,0.75); 
    border-width: 2em; 
    background-color: white; 
    border-radius: 1.618em; 
    margin: 5em auto; 
    width: 75%; 
    height: 10em; 
    position: relative; 
} 

.question>p { 
    background-color: red; 
    border-radius: 1.618em; 
    top: 50%; 
    margin: 0; 
    transform: translateY(-50%); 
    position: absolute; 
    width: 100%; 
}

Answer 4

Просто установите margin 0px из тэга p. Образец

.question>p { 
background-color:red; 
border-radius: 1.618em; 
position: relative; 
top: 50%; 
transform: translateY(-50%); 
margin:0px; 
}

Answer 5

Вы можете использовать Flexbox здесь:

1.) Добавить display: flex; и flex-direction: column; в .question

2.) Добавить margin: auto 0; в .question > p.

3.) Стереть все остальное, за исключением границы радиуса от .question > p

Вот скрипка: https://jsfiddle.net/35jhjqcx/

Answer 6

Существует перевес по умолчанию на p элементов, поэтому, когда нет границы на родительском элементе, что происходит составляет margin collapsing по адресу parent-child, и этот запас не влияет на положение p. Но когда вы устанавливаете границу (она может быть любой границей, как вы можете видеть здесь DEMO) на родительском элементе вы предотвращаете смену маржи, и теперь вы можете увидеть маржу на элементе p.

Так одно решение, чтобы удалить из запаса p

@import 'https://fonts.googleapis.com/css?family=Open+Sans'; 
 
body { 
 
    text-align: center; 
 
    width: 100%; 
 
    font-family: 'Open Sans', sans-serif; 
 
    //background-color: rgba(0,150,250,0.75); 
 

 
} 
 
.question { 
 
    border-style: solid; 
 
    border-color: rgba(0, 150, 250, 0.75); 
 
    border-width: 2em; 
 
    background-color: white; 
 
    border-radius: 1.618em; 
 
    margin: 5em auto; 
 
    width: 75%; 
 
    height: 10em; 
 
} 
 
.question>p { 
 
    background-color: red; 
 
    border-radius: 1.618em; 
 
    position: relative; 
 
    top: 50%; 
 
    transform: translateY(-50%); 
 
} 
 
.answer { 
 
    font-size: 1.618em; 
 
    border: 0; 
 
    border-radius: 1.618em; 
 
    width: 50%; 
 
    margin: auto; 
 
} 
 
p { 
 
    margin: 0; 
 
}

<div class="main_container"> 
 
    <div class="question"> 
 
    <p>Test question here</p> 
 
    </div> 
 
    <input class="answer" type="text"> 
 
    <input class="submit" type="submit"> 
 
</div>

Вертикальное выравнивание перепутались на границе

ответ

Смежные вопросы