0

I have an inline-block element and would like to centre the text next to it. I had already tried negative margin on the span (box) element but this changed the whole content (box and text).

MY code

fieldset {
  max-width: 350px; 
  margin: 0 auto; 
  padding:1px; 
  display: flex; 
  justify-content: space-around;  
  align-items: center;
}

.legend-item-box {
  display: inline-block;
  height: 16px;
  width: 30px;
  margin-right: 5px;
  margin-left: 0;
  border: 1px solid #999;
}

.a {
  background:#8DD3C7;
}

.b {
  background:#FFFFB3;
}
<fieldset>
  <legend>Legend:</legend>
  <div class="legend-item-container">
    <span class="a legend-item-box"></span>Legend a
  </div>
  <div>
    <span class="b legend-item-box"></span> Legend b
  </div>
</fieldset>

Many thanks in advance! Max

Max Pattern
  • 1,430
  • 7
  • 18

2 Answers2

1

You can use vertical-align: middle; to archive this. https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align?retiredLocale=en

fieldset {
  max-width: 350px; 
  margin: 0 auto; 
  padding:10px; 
  display: flex; 
  justify-content: space-around;  
  align-items: center;
}

.legend-item-box {
  vertical-align: middle; /* <--- added */
  display: inline-block;
  height: 16px;
  width: 30px;
  margin-right: 5px;
  margin-left: 0;
  border: 1px solid #999;
}
.legend-item-container {}

.legend-text { /* <--- added */    
  font-size: 0.6rem; 
}

.a {
  background:#8DD3C7;
}

.b {
  background:#FFFFB3;
}
<fieldset>
  <legend>Legend:</legend>
  <div class="legend-item-container">
    <span class="a legend-item-box"></span><span class="legend-text">Legend a</span>
  </div>
  <div class="legend-item-container"><!-- added class -->
    <span class="b legend-item-box"></span><span class="legend-text">Legend b</span>
  </div>
</fieldset>
Maik Lowrey
  • 15,957
  • 6
  • 40
  • 79
1

Is this what you want?

fieldset {
  max-width: 350px; 
  margin: 0 auto; 
  padding:1px; 
  display: flex; 
  justify-content: space-around;  
  align-items: center;
}

.legend-item-container {
  display: flex;
  align-items: center;
}

.legend-item-box {
  display: inline-block;
  height: 16px;
  width: 30px;
  margin-right: 5px;
  margin-left: 0;
  border: 1px solid #999;
}

.a {
  background:#8DD3C7;
}

.b {
  background:#FFFFB3;
}
<fieldset>
  <legend>Legend:</legend>
  <div class="legend-item-container">
    <span class="a legend-item-box"></span>Legend a
  </div>
  <div>
    <span class="b legend-item-box"></span> Legend b
  </div>
</fieldset>
ChanHyeok-Im
  • 541
  • 3
  • 11