I want to center `div` inside another having backgrounds and `span` using Bootstrap?

user_10799844 0
Viewed 97

I have full-width bootstrap row having three divs inside one another with a background image. the third div has span tag for showing data. I have an issue in there alignment my code is:

<div class="container-fluid">
 <div class="row">
    <div class="col-xs-12 align">
      <div id="center">
        <div id="middle">
          <div class="CImage">
            <div class="Upper">
              <div class="inner"><span id="require" runat="server">140</span></div>
            </div>
          </div>
          <div id="title">Hello</div>
        </div>
      </div>
    </div>
  </div>
</div>

CSS:

.align {
    text-align: center;
    justify-content: center;
    display: flex;
}
#center {
    width: 100vw;
    text-align: center;
    height: 15vh;
    justify-content: center;
    display: flex;
}
#middle {
    margin-top: 15px;
}
.CImage {
    background-image: url(../Responsive/img/Under.png);
    border-bottom-width: 1px;
    background-size: contain;
    background-repeat: no-repeat;
    width: 23vw;
    height: 8.7vh;
}
.Upper {
    background-image: url(../Responsive/img/Upper.png);
    border-bottom-width: 1px;
    background-size: contain;
    background-repeat: no-repeat;
    width: 22.8vw;
    height: 8.7vh;
}
.inner {
    background-image: url(../Responsive/img/Inner.png);
    border-bottom-width: 1px;
    background-size: contain;
    background-repeat: no-repeat;

    width: 20.8vw;
    height: 6.7vh;
}

Now they are displaying result but alignment for images are not coming on each other perfectly especially in third div

The result that I am getting is:

enter image description here

Required output,

enter image description here

After making changes as you ppl mentioned,

enter image description here

twitter-bootstrap-3 css image html
2 Answers

You seem to expect each item to be vertically and horizontally centered in its parent. 

.CImage, .Upper, .inner {
  display: flex; 
  align-items: center; 
  justify-content: center;
}

... should center #require in .inner, .inner in .Upper and .Upper in .CImage.

Side note: if you want your elements to be square, use the same values. Namely,

width: 23vw;
height: 8.7vh;

... will stop being square if you rotate your device, or on any device having a different w/h viewport ratio than the one you're currently testing on.
You probably want to express the sizes in either em or rem. i.e:

width: 4.8rem;
height: 4.8rem;
user_18916770

Check this one

.align {
    text-align: center;
    justify-content: center;
    display: flex;
}
#center {
    width: 100vw;
    text-align: center;
    height: 15vh;
    justify-content: center;
    display: flex;
}
#middle {
    margin-top: 15px;
  background-color: gray;
}
.CImage {
    background-image: url(../Responsive/img/Under.png);
    border-bottom-width: 1px;
    background-size: contain;
    background-repeat: no-repeat;
    width: 23vw;
    height: 8.7vh;
    background-color: red;
    justify-content: center;
    display: flex;
}
.Upper {
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: url(../Responsive/img/Upper.png);
    border-bottom-width: 1px;
    background-size: contain;
    background-repeat: no-repeat;
    width: 22.8vw;
    height: 8.7vh;
    background-color: black;
}
.inner {
    background-image: url(../Responsive/img/Inner.png);
    border-bottom-width: 1px;
    background-size: contain;
    background-repeat: no-repeat;
    background-color: blue;

    width: 20.8vw;
    height: 6.7vh;
}
<div class="container-fluid">
    <div class="row">
        <div class="col-xs-12 align">
                <div id="center">
                    <div id="middle">
                        <div class="CImage">
                            <div class="Upper"> 
                                <div class="inner">
                                     <span id="require" runat="server">140</span>
                            </div>
                        </div>

                        </div>
                        <div id="title">Hello</div>
                    </div>
                    </div>
                </div>
            </div>
        </div>

user_101853440
Related