Can align text to center at flex display
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}
What my problem is, that i cant align the text to center horizontally. Vertically, i aligned it the center, but horizontally, i cant.
(When the text is longer, its centered horizontally?! If i see it right.)
I tryed adding the <a> element display:block and text-align:center, but it didnt solved my problem.
I attach a photo of the site.Photo-Click here
The <a> element is in a <h2> element.
<h2> css:
line-height: 22px;
margin-top: 10px;
margin-bottom: 5px;
font-size: 16px;
height: 55px;
font-weight: 600;
display: flex;
align-items: center;
text-align: center;
The <a>-element css:
color: #333;
-webkit-transition: color .5s;
-moz-transition: color .5s;
-ms-transition: color .5s;
-o-transition: color .5s;
transition: color .5s;
What am i doing wrong?
html css twitter-bootstrap flexbox
edited Nov 16 '18 at 17:19
Paulie_D
76.1k96991
asked Nov 16 '18 at 17:00
max777max777
336
add a comment |
What my problem is, that i cant align the text to center horizontally. Vertically, i aligned it the center, but horizontally, i cant.
(When the text is longer, its centered horizontally?! If i see it right.)
I tryed adding the <a> element display:block and text-align:center, but it didnt solved my problem.
I attach a photo of the site.Photo-Click here
The <a> element is in a <h2> element.
<h2> css:
line-height: 22px;
margin-top: 10px;
margin-bottom: 5px;
font-size: 16px;
height: 55px;
font-weight: 600;
display: flex;
align-items: center;
text-align: center;
The <a>-element css:
color: #333;
-webkit-transition: color .5s;
-moz-transition: color .5s;
-ms-transition: color .5s;
-o-transition: color .5s;
transition: color .5s;
What am i doing wrong?
html css twitter-bootstrap flexbox
edited Nov 16 '18 at 17:19
Paulie_D
76.1k96991
asked Nov 16 '18 at 17:00
max777max777
336
are you using bootstrap classes?
– BartoszTermena
Nov 16 '18 at 17:06
show us your html code
– BartoszTermena
Nov 16 '18 at 17:07
Welcome to Stack Overflow! Questions seeking code help must include the shortest code necessary to reproduce it in the question itself preferably in a Stack Snippet. See How to create a Minimal, Complete, and Verifiable example
– Paulie_D
Nov 16 '18 at 17:19
stackoverflow.com/q/39678610/3597276
– Michael_B
Nov 16 '18 at 18:11
add a comment |
What my problem is, that i cant align the text to center horizontally. Vertically, i aligned it the center, but horizontally, i cant.
(When the text is longer, its centered horizontally?! If i see it right.)
I tryed adding the <a> element display:block and text-align:center, but it didnt solved my problem.
I attach a photo of the site.Photo-Click here
The <a> element is in a <h2> element.
<h2> css:
line-height: 22px;
margin-top: 10px;
margin-bottom: 5px;
font-size: 16px;
height: 55px;
font-weight: 600;
display: flex;
align-items: center;
text-align: center;
The <a>-element css:
color: #333;
-webkit-transition: color .5s;
-moz-transition: color .5s;
-ms-transition: color .5s;
-o-transition: color .5s;
transition: color .5s;
What am i doing wrong?
html css twitter-bootstrap flexbox
edited Nov 16 '18 at 17:19
Paulie_D
76.1k96991
asked Nov 16 '18 at 17:00
max777max777
336
What my problem is, that i cant align the text to center horizontally. Vertically, i aligned it the center, but horizontally, i cant.
(When the text is longer, its centered horizontally?! If i see it right.)
I tryed adding the <a> element display:block and text-align:center, but it didnt solved my problem.
I attach a photo of the site.Photo-Click here
The <a> element is in a <h2> element.
<h2> css:
line-height: 22px;
margin-top: 10px;
margin-bottom: 5px;
font-size: 16px;
height: 55px;
font-weight: 600;
display: flex;
align-items: center;
text-align: center;
The <a>-element css:
color: #333;
-webkit-transition: color .5s;
-moz-transition: color .5s;
-ms-transition: color .5s;
-o-transition: color .5s;
transition: color .5s;
What am i doing wrong?
html css twitter-bootstrap flexbox
html css twitter-bootstrap flexbox
edited Nov 16 '18 at 17:19
Paulie_D
76.1k96991
asked Nov 16 '18 at 17:00
max777max777
336
edited Nov 16 '18 at 17:19
Paulie_D
76.1k96991
asked Nov 16 '18 at 17:00
max777max777
336
edited Nov 16 '18 at 17:19
Paulie_D
76.1k96991
edited Nov 16 '18 at 17:19
Paulie_D
76.1k96991
edited Nov 16 '18 at 17:19
Paulie_D
76.1k96991
76.1k96991
asked Nov 16 '18 at 17:00
max777max777
336
asked Nov 16 '18 at 17:00
max777max777
336
asked Nov 16 '18 at 17:00
max777max777
336
336
are you using bootstrap classes?
– BartoszTermena
Nov 16 '18 at 17:06
show us your html code
– BartoszTermena
Nov 16 '18 at 17:07
Welcome to Stack Overflow! Questions seeking code help must include the shortest code necessary to reproduce it in the question itself preferably in a Stack Snippet. See How to create a Minimal, Complete, and Verifiable example
– Paulie_D
Nov 16 '18 at 17:19
stackoverflow.com/q/39678610/3597276
– Michael_B
Nov 16 '18 at 18:11
add a comment |
are you using bootstrap classes?
– BartoszTermena
Nov 16 '18 at 17:06
show us your html code
– BartoszTermena
Nov 16 '18 at 17:07
Welcome to Stack Overflow! Questions seeking code help must include the shortest code necessary to reproduce it in the question itself preferably in a Stack Snippet. See How to create a Minimal, Complete, and Verifiable example
– Paulie_D
Nov 16 '18 at 17:19
stackoverflow.com/q/39678610/3597276
– Michael_B
Nov 16 '18 at 18:11
are you using bootstrap classes?
– BartoszTermena
Nov 16 '18 at 17:06
are you using bootstrap classes?
– BartoszTermena
Nov 16 '18 at 17:06
show us your html code
– BartoszTermena
Nov 16 '18 at 17:07
show us your html code
– BartoszTermena
Nov 16 '18 at 17:07
Welcome to Stack Overflow! Questions seeking code help must include the shortest code necessary to reproduce it in the question itself preferably in a Stack Snippet. See How to create a Minimal, Complete, and Verifiable example
– Paulie_D
Nov 16 '18 at 17:19
Welcome to Stack Overflow! Questions seeking code help must include the shortest code necessary to reproduce it in the question itself preferably in a Stack Snippet. See How to create a Minimal, Complete, and Verifiable example
– Paulie_D
Nov 16 '18 at 17:19
stackoverflow.com/q/39678610/3597276
– Michael_B
Nov 16 '18 at 18:11
stackoverflow.com/q/39678610/3597276
– Michael_B
Nov 16 '18 at 18:11
add a comment |
2 Answers
2
active
oldest
votes
Without seeing your code in context with the rest of the html and css, I would put justify-content: center ; on the parent element ie the h2. I am assuming this is set to be 100% of width to match the width of the image.
Check this out for full info on flex:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
answered Nov 16 '18 at 17:07
YpoulakasYpoulakas
9116
add a comment |
display: flex defines an element as a flex container and enables flex properties on all of its direct children. Instead of applying flex to <h2>, you need to apply it to the parent container for it to work.
.container {
width: 200px;
height: 150px;
display: flex;
justify-content: center;
align-items: center;
border: 1px solid black;
}<div class='container'>
<h2>
<a>Game Title</a>
</h2>
</div>answered Nov 17 '18 at 0:00
putipongputipong
1809
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%2f53342325%2fcan-align-text-to-center-at-flex-display%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
Without seeing your code in context with the rest of the html and css, I would put justify-content: center ; on the parent element ie the h2. I am assuming this is set to be 100% of width to match the width of the image.
Check this out for full info on flex:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
answered Nov 16 '18 at 17:07
YpoulakasYpoulakas
9116
add a comment |
Without seeing your code in context with the rest of the html and css, I would put justify-content: center ; on the parent element ie the h2. I am assuming this is set to be 100% of width to match the width of the image.
Check this out for full info on flex:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
answered Nov 16 '18 at 17:07
YpoulakasYpoulakas
9116
add a comment |
Without seeing your code in context with the rest of the html and css, I would put justify-content: center ; on the parent element ie the h2. I am assuming this is set to be 100% of width to match the width of the image.
Check this out for full info on flex:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
answered Nov 16 '18 at 17:07
YpoulakasYpoulakas
9116
Without seeing your code in context with the rest of the html and css, I would put justify-content: center ; on the parent element ie the h2. I am assuming this is set to be 100% of width to match the width of the image.
Check this out for full info on flex:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
answered Nov 16 '18 at 17:07
YpoulakasYpoulakas
9116
answered Nov 16 '18 at 17:07
YpoulakasYpoulakas
9116
answered Nov 16 '18 at 17:07
YpoulakasYpoulakas
9116
answered Nov 16 '18 at 17:07
YpoulakasYpoulakas
9116
9116
add a comment |
add a comment |
display: flex defines an element as a flex container and enables flex properties on all of its direct children. Instead of applying flex to <h2>, you need to apply it to the parent container for it to work.
.container {
width: 200px;
height: 150px;
display: flex;
justify-content: center;
align-items: center;
border: 1px solid black;
}<div class='container'>
<h2>
<a>Game Title</a>
</h2>
</div>answered Nov 17 '18 at 0:00
putipongputipong
1809
add a comment |
display: flex defines an element as a flex container and enables flex properties on all of its direct children. Instead of applying flex to <h2>, you need to apply it to the parent container for it to work.
.container {
width: 200px;
height: 150px;
display: flex;
justify-content: center;
align-items: center;
border: 1px solid black;
}<div class='container'>
<h2>
<a>Game Title</a>
</h2>
</div>answered Nov 17 '18 at 0:00
putipongputipong
1809
add a comment |
display: flex defines an element as a flex container and enables flex properties on all of its direct children. Instead of applying flex to <h2>, you need to apply it to the parent container for it to work.
.container {
width: 200px;
height: 150px;
display: flex;
justify-content: center;
align-items: center;
border: 1px solid black;
}<div class='container'>
<h2>
<a>Game Title</a>
</h2>
</div>answered Nov 17 '18 at 0:00
putipongputipong
1809
display: flex defines an element as a flex container and enables flex properties on all of its direct children. Instead of applying flex to <h2>, you need to apply it to the parent container for it to work.
.container {
width: 200px;
height: 150px;
display: flex;
justify-content: center;
align-items: center;
border: 1px solid black;
}<div class='container'>
<h2>
<a>Game Title</a>
</h2>
</div>.container {
width: 200px;
height: 150px;
display: flex;
justify-content: center;
align-items: center;
border: 1px solid black;
}<div class='container'>
<h2>
<a>Game Title</a>
</h2>
</div>.container {
width: 200px;
height: 150px;
display: flex;
justify-content: center;
align-items: center;
border: 1px solid black;
}<div class='container'>
<h2>
<a>Game Title</a>
</h2>
</div>answered Nov 17 '18 at 0:00
putipongputipong
1809
answered Nov 17 '18 at 0:00
putipongputipong
1809
answered Nov 17 '18 at 0:00
putipongputipong
1809
answered Nov 17 '18 at 0:00
putipongputipong
1809
1809
add a comment |
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%2f53342325%2fcan-align-text-to-center-at-flex-display%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
are you using bootstrap classes?
– BartoszTermena
Nov 16 '18 at 17:06
show us your html code
– BartoszTermena
Nov 16 '18 at 17:07
Welcome to Stack Overflow! Questions seeking code help must include the shortest code necessary to reproduce it in the question itself preferably in a Stack Snippet. See How to create a Minimal, Complete, and Verifiable example
– Paulie_D
Nov 16 '18 at 17:19
stackoverflow.com/q/39678610/3597276
– Michael_B
Nov 16 '18 at 18:11