CODEWITHSUNDEEP
htmlcss
edison xue
edison xue

Reputation: 1331

why can't I align my text and the button?

enter image description here

why do my text and button have some additional space in the blue content area and I can't align them in my page. How can I solve this?

this is my html code:

<div class="item-container">
  <span class="item">过去一年总结(15分)</span>
  <input type="button" class="score-input">
</div>

this is my css code:

.score-input{
   width:50px;
  margin-left:30%;
}
.item-container{
  margin-bottom: 10px;
  font-size:1rem;
  margin-top:10px;
  padding-left: 20px;
}

Upvotes: 1

Views: 84

Answers (1)

frnt
frnt

Reputation: 8795

span is an inline element so you need to change there display and using vertical-align, align them to center of parent div.

The vertical-align CSS property specifies the vertical alignment of an inline or table-cell box.

vertcial-align:middle Aligns the middle of the element with the baseline plus half the x-height of the parent.

If you console the display of button then you find it as display inline-block, so on that too you can use vertical-align and align text to the center of parent div.

#b {
  width: 100%;
  height: auto;
  background: blue;
}

.item {
  display: inline-block;
  vertical-align: middle;
}

.score-input {
  width: 50px;
  margin-left: 30%;
  display: inline-block;
  vertical-align: middle;
}
<div id="b">
  <span class="item">过去一年总结15分</span>
  <input type="button" class="score-input">
</div>

Upvotes: 5

Related Questions