How to make the text box align on top with in the bluebox with css3?

Question

I would like to make the text box on the top of the blue box and the text in the text box will align middle. Here is my code on Fiddle .

 .parent { height: 60px; width: 200px; padding: 17px 15px 15px 15px; margin-right: 10px; float: left; background: rgba(255,255,255,0.3); font-size: 26px; text-align: center; border-top: 35px; border-left: 1px; border-right: 1px; border-bottom: 1px; border-color: #00bfff; border-style: solid; border-radius: 11px; } .parent > .child { vertical-align: middle; text-align: center; background: #00bfff; }

 <div class="parent"> <div class="child">1111ggggggg1</div> </div>

Answer 1

You can use the position , top and width properties:

 .parent { position: relative; /* added */ height: 60px; width: 200px; padding: 17px 15px 15px 15px; margin-right: 10px; float: left; background: rgba(255,255,255,0.3); font-size: 26px; text-align: center; border-top: 35px; border-left: 1px; border-right: 1px; border-bottom: 1px; border-color: #00bfff; border-style: solid; border-radius: 11px; } .parent > .child { position: absolute; /* added */ top: -35px; /* since the top border is 35px */ width: 200px; /* same as the parent */ /* not needed vertical-align: middle; text-align: center; background: #00bfff; */ }

 <div class="parent"> <div class="child">1111ggggggg1</div> </div>