CODEWITHSUNDEEP
css
zeroweb
zeroweb

Reputation: 2752

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" appears next to the round box instead of appearing down. How do I achieve this ?

Upvotes: 5

Views: 4320

Answers (4)

Mohamad Mokarram
Mohamad Mokarram

Reputation: 1

you can just put your text into a span tag and only give line-height property to span tag.then it will be at center next to the .legend box

New Order

Upvotes: 0

Sleek Geek
Sleek Geek

Reputation: 4686

Changing the display property value to inline-block will do that.

.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

Upvotes: 8

vicente
vicente

Reputation: 2633

To show the text next to the box and give it the proper line-height you can use the code below:

.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>

Upvotes: 1

Oriol
Oriol

Reputation: 288010

Use

display: inline-table;

instead of

display: table;


.legend {
  display: inline-table;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: orange;
}
<div class="legend"></div> New Order

Upvotes: 0

Related Questions