lpbug lpbug - 2 months ago 7
CSS Question

Vertical align messed up by border

As shown in the fiddle here with the following HTML:

<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>


And CSS:

@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 {
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;
}


I am able to get the test question centered if I remove the
border-style:solid
property of question. However, I am wondering why with border-style it is not centered. I've tried using
box-sizing:border-box
to no avail.

Thanks

Answer

Your Vertical align is messed up because browser applied top bottom margin in p tag, if you removed it this will solve your problem

.question > p {
   margin: 0;
}

or

p {
   margin: 0;
}

see my updated fiddle here

Comments