Cannot make items (3) to be centered on top of other elements (3), flexboxHow to center absolutely positioned element in div?Make the cursor a hand when a user hovers over a list itemHow to center a “position: absolute” elementVertically centering content of :before/:after pseudo-elementsFlexbox: center horizontally and verticallyCannot display HTML stringFlexbox - align : center / justify : center with unknown heightCentering multiple items with display flexflexbox align center vertical and horizontal not working properlyCenter a group of flex items and left-align them on wrap
Why aren't satellites disintegrated even though they orbit earth within earth's Roche Limits?
Can't think of a good word or term to describe not feeling or thinking
What does this 'x' mean on the stem of the voice's note, above the notehead?
How can sister protect herself from impulse purchases with a credit card?
Why does snapping your fingers activate the Infinity Gauntlet?
How to choose the correct exposure for flower photography?
Bash Array of Word-Splitting Headaches
What city and town structures are important in a low fantasy medieval world?
Character had a different name in the past. Which name should I use in a flashback?
How does the "reverse syntax" in Middle English work?
How can I prevent Bash expansion from passing files starting with "-" as argument?
Bookshelves: the intruder
Can I have a delimited macro with a literal # in the parameter text?
FIFO data structure in pure C
Why were early aviators' trousers flared at the thigh?
Head-internal relative clauses
How could the B-29 bomber back up under its own power?
Why does string strummed with finger sound different from the one strummed with pick?
Why could the Lunar Ascent Engine be used only once?
Very serious stuff - Salesforce bug enabled "Modify All"
Parse a C++14 integer literal
Should I twist DC power and ground wires from a power supply?
On a piano, are the effects of holding notes and the sustain pedal the same for a single chord?
Who is frowning in the sentence "Daisy looked at Tom frowning"?
Cannot make items (3) to be centered on top of other elements (3), flexbox
How to center absolutely positioned element in div?Make the cursor a hand when a user hovers over a list itemHow to center a “position: absolute” elementVertically centering content of :before/:after pseudo-elementsFlexbox: center horizontally and verticallyCannot display HTML stringFlexbox - align : center / justify : center with unknown heightCentering multiple items with display flexflexbox align center vertical and horizontal not working properlyCenter a group of flex items and left-align them on wrap
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty height:90px;width:728px;box-sizing:border-box;
I am currently in the process of building a community blog/website
THPSBlog
While using the FlexBox functionality, I split and created a banner into three different sections
NEWS | MEDIA | COMMUNITY
It is a banner that contains 3 icons on top and below you can see 3 boxes of information
I have tried many combinations of justifying or aligning my content and items, but so far I haven't been able to properly center my three icons while being on top of the information box.
Banner
#flex-banner
display: flex;
position: absolute;
width: 100%;
height: 60%;
justify-content: space-between;
align-items: baseline;
background-color: rgba(102, 102, 102, 0.308);
Icons
.icon
display: flex;
margin-bottom: 16px;
Boxes of information
.box
text-align: center;
margin-top: 12px;
Media query for iPhone 6S
@media only screen
and (min-device-width: 375px)
and (max-device-width: 667px)
and (-webkit-min-device-pixel-ratio: 2)
.navbar
justify-content: center;
align-content: flex-start;
display: flex;
height: auto;
.navbar ul
display: block;
width: auto;
#flex-banner
display: flex;
justify-content: center;
align-items: baseline;
height: 100%;
width: auto;
HTML
<!DOCTYPE html>
<html>
<div id="flex-banner">
<!-- 1ST BOX-->
<div class="box">
<img class="icon" src="icon-news.svg" alt="newsicon"/ width="125px">
<a href="https://drive.google.com/file/d/1SNivhvHi-4PjPDy1tob-91HYs3x3R_z9/view">
<img src="./customlevels-icon.png" width="250px"/></a>
<h3>100+ Custom Levels in ONE pack</h3>
</div>
<!-- 2ND BOX-->
<div class="box">
<img class="icon" src="./icon-media.svg" alt="thpsvideoicon" width="90px"/>
<iframe width="390" height="245" src="https://www.youtube.com/embed/uvW0lsyttKw"
frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen></iframe>
<h3>Check tLT's pure ownage in their 2015 Team Video</h3>
</div>
<!-- 3RD BOX-->
<div class="box">
<img class="icon" src="./icon-community.svg" alt="thpscommunity" width="110px"/>
<a href="http://thpsx.com/cap-contest-8/">
<img src="./graveyard-scene.jpg" alt="graveyardtheme" width="400px" /></a>
<h3>Cap Contest #8 Theme: Graveyard</h3>
</div>
</div>
</body>
</html>
I would like to display this information correctly, 3 centered icons within the same line and above the other 3 box elements. Also trying this on my iPhone 6S, portrait looks O.K. (it is not centered but displays as a column, which is good) but landscape gets more messy. Cheers!
html css
asked Mar 23 at 18:39
EduardoEduardo
114
add a comment |
I am currently in the process of building a community blog/website
THPSBlog
While using the FlexBox functionality, I split and created a banner into three different sections
NEWS | MEDIA | COMMUNITY
It is a banner that contains 3 icons on top and below you can see 3 boxes of information
I have tried many combinations of justifying or aligning my content and items, but so far I haven't been able to properly center my three icons while being on top of the information box.
Banner
#flex-banner
display: flex;
position: absolute;
width: 100%;
height: 60%;
justify-content: space-between;
align-items: baseline;
background-color: rgba(102, 102, 102, 0.308);
Icons
.icon
display: flex;
margin-bottom: 16px;
Boxes of information
.box
text-align: center;
margin-top: 12px;
Media query for iPhone 6S
@media only screen
and (min-device-width: 375px)
and (max-device-width: 667px)
and (-webkit-min-device-pixel-ratio: 2)
.navbar
justify-content: center;
align-content: flex-start;
display: flex;
height: auto;
.navbar ul
display: block;
width: auto;
#flex-banner
display: flex;
justify-content: center;
align-items: baseline;
height: 100%;
width: auto;
HTML
<!DOCTYPE html>
<html>
<div id="flex-banner">
<!-- 1ST BOX-->
<div class="box">
<img class="icon" src="icon-news.svg" alt="newsicon"/ width="125px">
<a href="https://drive.google.com/file/d/1SNivhvHi-4PjPDy1tob-91HYs3x3R_z9/view">
<img src="./customlevels-icon.png" width="250px"/></a>
<h3>100+ Custom Levels in ONE pack</h3>
</div>
<!-- 2ND BOX-->
<div class="box">
<img class="icon" src="./icon-media.svg" alt="thpsvideoicon" width="90px"/>
<iframe width="390" height="245" src="https://www.youtube.com/embed/uvW0lsyttKw"
frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen></iframe>
<h3>Check tLT's pure ownage in their 2015 Team Video</h3>
</div>
<!-- 3RD BOX-->
<div class="box">
<img class="icon" src="./icon-community.svg" alt="thpscommunity" width="110px"/>
<a href="http://thpsx.com/cap-contest-8/">
<img src="./graveyard-scene.jpg" alt="graveyardtheme" width="400px" /></a>
<h3>Cap Contest #8 Theme: Graveyard</h3>
</div>
</div>
</body>
</html>
I would like to display this information correctly, 3 centered icons within the same line and above the other 3 box elements. Also trying this on my iPhone 6S, portrait looks O.K. (it is not centered but displays as a column, which is good) but landscape gets more messy. Cheers!
html css
asked Mar 23 at 18:39
EduardoEduardo
114
The link to your website doesn't help explain what you want. Please include yourHTMLhere to make this question a minimal, complete, and verifiable example.
– Andy Hoffman
Mar 23 at 19:04
THPSBlog not working and why are you usingposition: absolutein#flex-banner?
– Hassan Siddiqui
Mar 23 at 19:13
(thpsblog.000webhostapp.com) it's a free hosting but seems to be working for me on chrome, sorry for that. Used absolute position so it would "stick" to the position of the body, the parent.
– Eduardo
Mar 23 at 20:05
add a comment |
I am currently in the process of building a community blog/website
THPSBlog
While using the FlexBox functionality, I split and created a banner into three different sections
NEWS | MEDIA | COMMUNITY
It is a banner that contains 3 icons on top and below you can see 3 boxes of information
I have tried many combinations of justifying or aligning my content and items, but so far I haven't been able to properly center my three icons while being on top of the information box.
Banner
#flex-banner
display: flex;
position: absolute;
width: 100%;
height: 60%;
justify-content: space-between;
align-items: baseline;
background-color: rgba(102, 102, 102, 0.308);
Icons
.icon
display: flex;
margin-bottom: 16px;
Boxes of information
.box
text-align: center;
margin-top: 12px;
Media query for iPhone 6S
@media only screen
and (min-device-width: 375px)
and (max-device-width: 667px)
and (-webkit-min-device-pixel-ratio: 2)
.navbar
justify-content: center;
align-content: flex-start;
display: flex;
height: auto;
.navbar ul
display: block;
width: auto;
#flex-banner
display: flex;
justify-content: center;
align-items: baseline;
height: 100%;
width: auto;
HTML
<!DOCTYPE html>
<html>
<div id="flex-banner">
<!-- 1ST BOX-->
<div class="box">
<img class="icon" src="icon-news.svg" alt="newsicon"/ width="125px">
<a href="https://drive.google.com/file/d/1SNivhvHi-4PjPDy1tob-91HYs3x3R_z9/view">
<img src="./customlevels-icon.png" width="250px"/></a>
<h3>100+ Custom Levels in ONE pack</h3>
</div>
<!-- 2ND BOX-->
<div class="box">
<img class="icon" src="./icon-media.svg" alt="thpsvideoicon" width="90px"/>
<iframe width="390" height="245" src="https://www.youtube.com/embed/uvW0lsyttKw"
frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen></iframe>
<h3>Check tLT's pure ownage in their 2015 Team Video</h3>
</div>
<!-- 3RD BOX-->
<div class="box">
<img class="icon" src="./icon-community.svg" alt="thpscommunity" width="110px"/>
<a href="http://thpsx.com/cap-contest-8/">
<img src="./graveyard-scene.jpg" alt="graveyardtheme" width="400px" /></a>
<h3>Cap Contest #8 Theme: Graveyard</h3>
</div>
</div>
</body>
</html>
I would like to display this information correctly, 3 centered icons within the same line and above the other 3 box elements. Also trying this on my iPhone 6S, portrait looks O.K. (it is not centered but displays as a column, which is good) but landscape gets more messy. Cheers!
html css
asked Mar 23 at 18:39
EduardoEduardo
114
I am currently in the process of building a community blog/website
THPSBlog
While using the FlexBox functionality, I split and created a banner into three different sections
NEWS | MEDIA | COMMUNITY
It is a banner that contains 3 icons on top and below you can see 3 boxes of information
I have tried many combinations of justifying or aligning my content and items, but so far I haven't been able to properly center my three icons while being on top of the information box.
Banner
#flex-banner
display: flex;
position: absolute;
width: 100%;
height: 60%;
justify-content: space-between;
align-items: baseline;
background-color: rgba(102, 102, 102, 0.308);
Icons
.icon
display: flex;
margin-bottom: 16px;
Boxes of information
.box
text-align: center;
margin-top: 12px;
Media query for iPhone 6S
@media only screen
and (min-device-width: 375px)
and (max-device-width: 667px)
and (-webkit-min-device-pixel-ratio: 2)
.navbar
justify-content: center;
align-content: flex-start;
display: flex;
height: auto;
.navbar ul
display: block;
width: auto;
#flex-banner
display: flex;
justify-content: center;
align-items: baseline;
height: 100%;
width: auto;
HTML
<!DOCTYPE html>
<html>
<div id="flex-banner">
<!-- 1ST BOX-->
<div class="box">
<img class="icon" src="icon-news.svg" alt="newsicon"/ width="125px">
<a href="https://drive.google.com/file/d/1SNivhvHi-4PjPDy1tob-91HYs3x3R_z9/view">
<img src="./customlevels-icon.png" width="250px"/></a>
<h3>100+ Custom Levels in ONE pack</h3>
</div>
<!-- 2ND BOX-->
<div class="box">
<img class="icon" src="./icon-media.svg" alt="thpsvideoicon" width="90px"/>
<iframe width="390" height="245" src="https://www.youtube.com/embed/uvW0lsyttKw"
frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen></iframe>
<h3>Check tLT's pure ownage in their 2015 Team Video</h3>
</div>
<!-- 3RD BOX-->
<div class="box">
<img class="icon" src="./icon-community.svg" alt="thpscommunity" width="110px"/>
<a href="http://thpsx.com/cap-contest-8/">
<img src="./graveyard-scene.jpg" alt="graveyardtheme" width="400px" /></a>
<h3>Cap Contest #8 Theme: Graveyard</h3>
</div>
</div>
</body>
</html>
I would like to display this information correctly, 3 centered icons within the same line and above the other 3 box elements. Also trying this on my iPhone 6S, portrait looks O.K. (it is not centered but displays as a column, which is good) but landscape gets more messy. Cheers!
html css
html css
asked Mar 23 at 18:39
EduardoEduardo
114
asked Mar 23 at 18:39
EduardoEduardo
114
edited Mar 23 at 19:59
Eduardo
asked Mar 23 at 18:39
EduardoEduardo
114
asked Mar 23 at 18:39
EduardoEduardo
114
asked Mar 23 at 18:39
EduardoEduardo
114
114
The link to your website doesn't help explain what you want. Please include yourHTMLhere to make this question a minimal, complete, and verifiable example.
– Andy Hoffman
Mar 23 at 19:04
THPSBlog not working and why are you usingposition: absolutein#flex-banner?
– Hassan Siddiqui
Mar 23 at 19:13
(thpsblog.000webhostapp.com) it's a free hosting but seems to be working for me on chrome, sorry for that. Used absolute position so it would "stick" to the position of the body, the parent.
– Eduardo
Mar 23 at 20:05
add a comment |
The link to your website doesn't help explain what you want. Please include yourHTMLhere to make this question a minimal, complete, and verifiable example.
– Andy Hoffman
Mar 23 at 19:04
THPSBlog not working and why are you usingposition: absolutein#flex-banner?
– Hassan Siddiqui
Mar 23 at 19:13
(thpsblog.000webhostapp.com) it's a free hosting but seems to be working for me on chrome, sorry for that. Used absolute position so it would "stick" to the position of the body, the parent.
– Eduardo
Mar 23 at 20:05
The link to your website doesn't help explain what you want. Please include your
HTML here to make this question a minimal, complete, and verifiable example.– Andy Hoffman
Mar 23 at 19:04
The link to your website doesn't help explain what you want. Please include your
HTML here to make this question a minimal, complete, and verifiable example.– Andy Hoffman
Mar 23 at 19:04
THPSBlog not working and why are you using
position: absolute in #flex-banner ?– Hassan Siddiqui
Mar 23 at 19:13
THPSBlog not working and why are you using
position: absolute in #flex-banner ?– Hassan Siddiqui
Mar 23 at 19:13
(thpsblog.000webhostapp.com) it's a free hosting but seems to be working for me on chrome, sorry for that. Used absolute position so it would "stick" to the position of the body, the parent.
– Eduardo
Mar 23 at 20:05
(thpsblog.000webhostapp.com) it's a free hosting but seems to be working for me on chrome, sorry for that. Used absolute position so it would "stick" to the position of the body, the parent.
– Eduardo
Mar 23 at 20:05
add a comment |
1 Answer
1
active
oldest
votes
This should do the trick. I also would suggest using Bootstrap. It's much more simple to start with. Good luck!
#flex-banner
justify-content: space-evenly;
align-items: center;
answered Mar 23 at 20:10
rombie18rombie18
696
thanks for the Bootstrap recommendation, will give it a try! sadly it did not worked :(
– Eduardo
Mar 23 at 20:23
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
);
);
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%2f55317157%2fcannot-make-items-3-to-be-centered-on-top-of-other-elements-3-flexbox%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
This should do the trick. I also would suggest using Bootstrap. It's much more simple to start with. Good luck!
#flex-banner
justify-content: space-evenly;
align-items: center;
answered Mar 23 at 20:10
rombie18rombie18
696
thanks for the Bootstrap recommendation, will give it a try! sadly it did not worked :(
– Eduardo
Mar 23 at 20:23
add a comment |
This should do the trick. I also would suggest using Bootstrap. It's much more simple to start with. Good luck!
#flex-banner
justify-content: space-evenly;
align-items: center;
answered Mar 23 at 20:10
rombie18rombie18
696
thanks for the Bootstrap recommendation, will give it a try! sadly it did not worked :(
– Eduardo
Mar 23 at 20:23
add a comment |
This should do the trick. I also would suggest using Bootstrap. It's much more simple to start with. Good luck!
#flex-banner
justify-content: space-evenly;
align-items: center;
answered Mar 23 at 20:10
rombie18rombie18
696
This should do the trick. I also would suggest using Bootstrap. It's much more simple to start with. Good luck!
#flex-banner
justify-content: space-evenly;
align-items: center;
answered Mar 23 at 20:10
rombie18rombie18
696
answered Mar 23 at 20:10
rombie18rombie18
696
answered Mar 23 at 20:10
rombie18rombie18
696
answered Mar 23 at 20:10
rombie18rombie18
696
696
thanks for the Bootstrap recommendation, will give it a try! sadly it did not worked :(
– Eduardo
Mar 23 at 20:23
add a comment |
thanks for the Bootstrap recommendation, will give it a try! sadly it did not worked :(
– Eduardo
Mar 23 at 20:23
thanks for the Bootstrap recommendation, will give it a try! sadly it did not worked :(
– Eduardo
Mar 23 at 20:23
thanks for the Bootstrap recommendation, will give it a try! sadly it did not worked :(
– Eduardo
Mar 23 at 20:23
add a comment |
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.
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%2f55317157%2fcannot-make-items-3-to-be-centered-on-top-of-other-elements-3-flexbox%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
The link to your website doesn't help explain what you want. Please include your
HTMLhere to make this question a minimal, complete, and verifiable example.– Andy Hoffman
Mar 23 at 19:04
THPSBlog not working and why are you using
position: absolutein#flex-banner?– Hassan Siddiqui
Mar 23 at 19:13
(thpsblog.000webhostapp.com) it's a free hosting but seems to be working for me on chrome, sorry for that. Used absolute position so it would "stick" to the position of the body, the parent.
– Eduardo
Mar 23 at 20:05