-2

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>
VXp
  • 10,307
  • 6
  • 25
  • 40
butbut
  • 47
  • 1
  • 8
  • 3
    Having a hard time figuring out what you're looking to achieve. Can you post a picture/screenshot of what the desired result would look like? – Maharkus Oct 30 '17 at 15:50
  • Avoid inline styling like that. It's difficult to read and troubleshoot. Use stylesheets instead. – j08691 Oct 30 '17 at 15:51
  • I am guessing you want to center the text inside of that box, check https://stackoverflow.com/questions/8865458/how-do-i-vertically-center-text-with-css – Huangism Oct 30 '17 at 15:51

1 Answers1

0

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>
VXp
  • 10,307
  • 6
  • 25
  • 40
  • adding a `padding-top: 0;` on the parent element would suffice ! no need for any other rules on the child element. Don't forget that `absolute` positioning removes the element from the page flow ! – ths Sep 03 '18 at 22:53
  • If that would be true, I'd probably do it. There are many ways of doing it, this is just one of the possible solutions. I'll add more, if feel like it. – VXp Sep 07 '18 at 22:43
  • but there's a solution better than the other solutions ! – ths Sep 07 '18 at 22:48
  • True, this isn't the most optimal one, but it's sufficient. Will add more later on. – VXp Sep 07 '18 at 22:51