lpbug lpbug - 1 year ago 112
CSS Question

Vertical align messed up by border

As shown in the fiddle here with the following HTML:

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

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
property of question. However, I am wondering why with border-style it is not centered. I've tried using
to no avail.


Answer Source

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;


p {
   margin: 0;

see my updated fiddle here

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download