CODEWITHSUNDEEP
htmlcss
user4648142
user4648142

Reputation: 45

Need span to appear in middle of and below another span

Trying to do something like this correctway

Tried a bunch of different combinations. Can't get it working.

    <div>
        <div style="display: inline-block">
            <span>QTY On Order<span>0</span></span>
        </div>
        <div style="display: inline-block">
            <span>QTY Needed<span>0</span></span>
        </div>
        <div style="display: inline-block">
            <span>QTY In Stock<span>320</span></span>
        </div>
        <div style="display: inline-block">
            <span>QTY Consumed<span>20</span></span>
        </div>
    </div>

https://jsfiddle.net/phv7mbt3/

Upvotes: 0

Views: 46

Answers (4)

Lal
Lal

Reputation: 14810

See this fiddle

You can just replace your span with div. Also, there should be a slight change in your HTML structure.

To make the text centered, you can just apply a new CSS rule - text-align:center.

Updated HTML

<div>
  <div style="display: inline-block">
    <div style="text-align:center;">QTY On Order</div>
    <div style="text-align:center;">0</div>
  </div>
  <div style="display: inline-block">
    <div style="text-align:center;">QTY Needed</div>
    <div style="text-align:center;">0</div>
  </div>
  <div style="display: inline-block">
    <div style="text-align:center;">QTY In Stock</div>
    <div style="text-align:center;">320</div>
  </div>
  <div style="display: inline-block">
    <div style="text-align:center;">QTY Consumed</div>
    <div style="text-align:center;">20</div>
  </div>
</div>

Upvotes: 1

cnrhgn
cnrhgn

Reputation: 703

New Code:

        <div>
        <div class="qty" style="display: inline-block">
        <span>QTY On Order</span>
        <p>0</p>
        </div>
        <div class="qty" style="display: inline-block">
        <span>QTY Needed</span>
        <p>0</p>
        </div>
        <div class="qty" style="display: inline-block">
        <span>QTY In Stock</span>
        <p>320</p>
        </div>
        <div class="qty" style="display: inline-block">
        <span>QTY Consumed</span>
        <p>20</p>
        </div>
    </div>

CSS:

.qty{
  float:left;
  text-align: center;
  padding:10px;
}

Upvotes: 1

cyr_x
cyr_x

Reputation: 14257

This should work:

div > div > span {
  text-align: center;
  margin: 0 10px;
}
div > div > span > span {
  display: block;
  font-weight: bold;
}
<div>
    <div style="display: inline-block">
        <span>QTY On Order<span>0</span></span>
    </div>
    <div style="display: inline-block">
        <span>QTY Needed<span>0</span></span>
    </div>
    <div style="display: inline-block">
        <span>QTY In Stock<span>320</span></span>
    </div>
    <div style="display: inline-block">
        <span>QTY Consumed<span>20</span></span>
    </div>
</div>

Also you should consider using the class attribute to select the elements within css.

Upvotes: 1

Simrandeep Singh
Simrandeep Singh

Reputation: 585

Here is your modified code:

<div>
            <div style="display: inline-block; text-align:center;">
                <span>QTY On Order<span style="display: block">0</span></span>
            </div>
            <div style="display: inline-block">
                <span>QTY Needed<span style="display: block">0</span></span>
            </div>
            <div style="display: inline-block">
                <span>QTY In Stock<span style="display: block">320</span></span>
            </div>
            <div style="display: inline-block">
                <span>QTY Consumed<span style="display: block">20</span></span>
            </div>
        </div>

Upvotes: 1

Related Questions