I want to center `div` inside another having backgrounds and `span` using Bootstrap?
3
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:
Required output,
After making changes as you ppl mentioned,
html css image css3 twitter-bootstrap-3
edited Jan 1 at 10:05
Shakespear
626820
asked Jan 1 at 8:59
john derikjohn derik
378
add a comment |
3
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:
Required output,
After making changes as you ppl mentioned,
html css image css3 twitter-bootstrap-3
edited Jan 1 at 10:05
Shakespear
626820
asked Jan 1 at 8:59
john derikjohn derik
378
add a comment |
3
3
3
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:
Required output,
After making changes as you ppl mentioned,
html css image css3 twitter-bootstrap-3
edited Jan 1 at 10:05
Shakespear
626820
asked Jan 1 at 8:59
john derikjohn derik
378
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:
Required output,
After making changes as you ppl mentioned,
html css image css3 twitter-bootstrap-3
html css image css3 twitter-bootstrap-3
edited Jan 1 at 10:05
Shakespear
626820
asked Jan 1 at 8:59
john derikjohn derik
378
edited Jan 1 at 10:05
Shakespear
626820
asked Jan 1 at 8:59
john derikjohn derik
378
edited Jan 1 at 10:05
Shakespear
626820
edited Jan 1 at 10:05
Shakespear
626820
edited Jan 1 at 10:05
Shakespear
626820
626820
asked Jan 1 at 8:59
john derikjohn derik
378
asked Jan 1 at 8:59
john derikjohn derik
378
asked Jan 1 at 8:59
john derikjohn derik
378
378
add a comment |
add a comment |
2 Answers
2
active
oldest
votes
1
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;
answered Jan 1 at 9:23
Andrei GheorghiuAndrei Gheorghiu
35.5k74774
thanks for your reply but one question that I don't understand it is not responsive even width height are in vw and vh and inner circle comes down but not in middle ?
– john derik
Jan 1 at 9:44
Sorry it is reflecting size difference in device except web and inner pic is not coming in center I am editing my post for showing picture after changes
– john derik
Jan 1 at 9:54
@john: It won't be responsive, but it will be square. But you can make it responsive (if you want it smaller on a narrow device) using a@mediaquery. If you really want both, you could use the same value for both: (width: 23vw; height: 23vw;).
– Andrei Gheorghiu
Jan 1 at 20:09
add a comment |
1
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>answered Jan 1 at 9:26
Arshiya KhanamArshiya Khanam
308110
thanks for your reply but one question that I don't understand it is not responsive even width height are in vw and vh and inner circle comes down but not in middle ?
– john derik
Jan 1 at 9:44
@john derik in which series it's not coming properly.
– Arshiya Khanam
Jan 1 at 9:51
I edit my post and shows in picture after making changes
– john derik
Jan 1 at 9:52
Sorry it is reflecting size difference in device except web and inner pic is not coming in center I am editing my post for showing picture after changes
– john derik
Jan 1 at 9:54
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53994200%2fi-want-to-center-div-inside-another-having-backgrounds-and-span-using-bootst%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
1
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;
answered Jan 1 at 9:23
Andrei GheorghiuAndrei Gheorghiu
35.5k74774
thanks for your reply but one question that I don't understand it is not responsive even width height are in vw and vh and inner circle comes down but not in middle ?
– john derik
Jan 1 at 9:44
Sorry it is reflecting size difference in device except web and inner pic is not coming in center I am editing my post for showing picture after changes
– john derik
Jan 1 at 9:54
@john: It won't be responsive, but it will be square. But you can make it responsive (if you want it smaller on a narrow device) using a@mediaquery. If you really want both, you could use the same value for both: (width: 23vw; height: 23vw;).
– Andrei Gheorghiu
Jan 1 at 20:09
add a comment |
1
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;
answered Jan 1 at 9:23
Andrei GheorghiuAndrei Gheorghiu
35.5k74774
thanks for your reply but one question that I don't understand it is not responsive even width height are in vw and vh and inner circle comes down but not in middle ?
– john derik
Jan 1 at 9:44
Sorry it is reflecting size difference in device except web and inner pic is not coming in center I am editing my post for showing picture after changes
– john derik
Jan 1 at 9:54
@john: It won't be responsive, but it will be square. But you can make it responsive (if you want it smaller on a narrow device) using a@mediaquery. If you really want both, you could use the same value for both: (width: 23vw; height: 23vw;).
– Andrei Gheorghiu
Jan 1 at 20:09
add a comment |
1
1
1
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;
answered Jan 1 at 9:23
Andrei GheorghiuAndrei Gheorghiu
35.5k74774
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;
answered Jan 1 at 9:23
Andrei GheorghiuAndrei Gheorghiu
35.5k74774
edited Jan 1 at 9:40
answered Jan 1 at 9:23
Andrei GheorghiuAndrei Gheorghiu
35.5k74774
answered Jan 1 at 9:23
Andrei GheorghiuAndrei Gheorghiu
35.5k74774
answered Jan 1 at 9:23
Andrei GheorghiuAndrei Gheorghiu
35.5k74774
35.5k74774
thanks for your reply but one question that I don't understand it is not responsive even width height are in vw and vh and inner circle comes down but not in middle ?
– john derik
Jan 1 at 9:44
Sorry it is reflecting size difference in device except web and inner pic is not coming in center I am editing my post for showing picture after changes
– john derik
Jan 1 at 9:54
@john: It won't be responsive, but it will be square. But you can make it responsive (if you want it smaller on a narrow device) using a@mediaquery. If you really want both, you could use the same value for both: (width: 23vw; height: 23vw;).
– Andrei Gheorghiu
Jan 1 at 20:09
add a comment |
thanks for your reply but one question that I don't understand it is not responsive even width height are in vw and vh and inner circle comes down but not in middle ?
– john derik
Jan 1 at 9:44
Sorry it is reflecting size difference in device except web and inner pic is not coming in center I am editing my post for showing picture after changes
– john derik
Jan 1 at 9:54
@john: It won't be responsive, but it will be square. But you can make it responsive (if you want it smaller on a narrow device) using a@mediaquery. If you really want both, you could use the same value for both: (width: 23vw; height: 23vw;).
– Andrei Gheorghiu
Jan 1 at 20:09
thanks for your reply but one question that I don't understand it is not responsive even width height are in vw and vh and inner circle comes down but not in middle ?
– john derik
Jan 1 at 9:44
thanks for your reply but one question that I don't understand it is not responsive even width height are in vw and vh and inner circle comes down but not in middle ?
– john derik
Jan 1 at 9:44
Sorry it is reflecting size difference in device except web and inner pic is not coming in center I am editing my post for showing picture after changes
– john derik
Jan 1 at 9:54
Sorry it is reflecting size difference in device except web and inner pic is not coming in center I am editing my post for showing picture after changes
– john derik
Jan 1 at 9:54
@john: It won't be responsive, but it will be square. But you can make it responsive (if you want it smaller on a narrow device) using a
@media query. If you really want both, you could use the same value for both: (width: 23vw; height: 23vw;).– Andrei Gheorghiu
Jan 1 at 20:09
@john: It won't be responsive, but it will be square. But you can make it responsive (if you want it smaller on a narrow device) using a
@media query. If you really want both, you could use the same value for both: (width: 23vw; height: 23vw;).– Andrei Gheorghiu
Jan 1 at 20:09
add a comment |
1
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>answered Jan 1 at 9:26
Arshiya KhanamArshiya Khanam
308110
thanks for your reply but one question that I don't understand it is not responsive even width height are in vw and vh and inner circle comes down but not in middle ?
– john derik
Jan 1 at 9:44
@john derik in which series it's not coming properly.
– Arshiya Khanam
Jan 1 at 9:51
I edit my post and shows in picture after making changes
– john derik
Jan 1 at 9:52
Sorry it is reflecting size difference in device except web and inner pic is not coming in center I am editing my post for showing picture after changes
– john derik
Jan 1 at 9:54
add a comment |
1
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>answered Jan 1 at 9:26
Arshiya KhanamArshiya Khanam
308110
thanks for your reply but one question that I don't understand it is not responsive even width height are in vw and vh and inner circle comes down but not in middle ?
– john derik
Jan 1 at 9:44
@john derik in which series it's not coming properly.
– Arshiya Khanam
Jan 1 at 9:51
I edit my post and shows in picture after making changes
– john derik
Jan 1 at 9:52
Sorry it is reflecting size difference in device except web and inner pic is not coming in center I am editing my post for showing picture after changes
– john derik
Jan 1 at 9:54
add a comment |
1
1
1
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>answered Jan 1 at 9:26
Arshiya KhanamArshiya Khanam
308110
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>.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>.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>answered Jan 1 at 9:26
Arshiya KhanamArshiya Khanam
308110
answered Jan 1 at 9:26
Arshiya KhanamArshiya Khanam
308110
answered Jan 1 at 9:26
Arshiya KhanamArshiya Khanam
308110
answered Jan 1 at 9:26
Arshiya KhanamArshiya Khanam
308110
308110
thanks for your reply but one question that I don't understand it is not responsive even width height are in vw and vh and inner circle comes down but not in middle ?
– john derik
Jan 1 at 9:44
@john derik in which series it's not coming properly.
– Arshiya Khanam
Jan 1 at 9:51
I edit my post and shows in picture after making changes
– john derik
Jan 1 at 9:52
Sorry it is reflecting size difference in device except web and inner pic is not coming in center I am editing my post for showing picture after changes
– john derik
Jan 1 at 9:54
add a comment |
thanks for your reply but one question that I don't understand it is not responsive even width height are in vw and vh and inner circle comes down but not in middle ?
– john derik
Jan 1 at 9:44
@john derik in which series it's not coming properly.
– Arshiya Khanam
Jan 1 at 9:51
I edit my post and shows in picture after making changes
– john derik
Jan 1 at 9:52
Sorry it is reflecting size difference in device except web and inner pic is not coming in center I am editing my post for showing picture after changes
– john derik
Jan 1 at 9:54
thanks for your reply but one question that I don't understand it is not responsive even width height are in vw and vh and inner circle comes down but not in middle ?
– john derik
Jan 1 at 9:44
thanks for your reply but one question that I don't understand it is not responsive even width height are in vw and vh and inner circle comes down but not in middle ?
– john derik
Jan 1 at 9:44
@john derik in which series it's not coming properly.
– Arshiya Khanam
Jan 1 at 9:51
@john derik in which series it's not coming properly.
– Arshiya Khanam
Jan 1 at 9:51
I edit my post and shows in picture after making changes
– john derik
Jan 1 at 9:52
I edit my post and shows in picture after making changes
– john derik
Jan 1 at 9:52
Sorry it is reflecting size difference in device except web and inner pic is not coming in center I am editing my post for showing picture after changes
– john derik
Jan 1 at 9:54
Sorry it is reflecting size difference in device except web and inner pic is not coming in center I am editing my post for showing picture after changes
– john derik
Jan 1 at 9:54
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53994200%2fi-want-to-center-div-inside-another-having-backgrounds-and-span-using-bootst%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
