Clever Geek Handbook

CSS text after div

.legend {
display: table;
width: 40px;
height: 40px;
border-radius: 10px/10px;

}

<div style="background: orange" class="legend"></div> New Order

http://jsfiddle.net/2tx1n99f/

I want the text "New Order" to appear next to the round rectangle instead of appearing downward. How do you achieve this?

+3


source to share


3 answers


Changing the property value display

to inline-block

will do this.



.legend {
    display: inline-block;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background-color: orange;
    vertical-align: middle;/* Ensures that the text is vertically aligned in the middle */
}
      

        
        
        
      

    
<div class="legend"></div> New Order
Run codeHide result


+7


source


Using

display: inline-table;

instead



display: table;

      

        
        
        
      

    

.legend {
  display: inline-table;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: orange;
}
      

        
        
        
      

    
<div class="legend"></div> New Order
Run codeHide result


+1


source


To display the text next to the box and give it the correct line height, you can use the following code:

.legend-wrapper {
  line-height: 40px; /* Same as the height of the block */
}

.legend {
  display: block;
  float: left;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: orange;
  margin-right: 10px; /* Add some between text and block */
}
      

        
        
        
      

    
<div class="legend-wrapper">
    <div class="legend"></div> New Order
</div>
Run codeHide result


+1


source






More articles:


All Articles