html - Flexbox not working on button or fieldset elements -

-

i'm trying center inner elements of <button>-tag flexbox's justify-content: center. safari not center them. can apply same style other tags , works intended (see <p>-tag). button left-aligned.

try firefox or chrome , can see difference.

is there user agent style have overwrite? or other solution problem?

div {    display: flex;    flex-direction: column;    width: 100%;  }  button, p {    display: flex;    flex-direction: row;    justify-content: center;  }
<div>    <button>      <span>test</span>      <span>test</span>    </button>    <p>      <span>test</span>      <span>test</span>    </p>  </div>

and jsfiddle: http://jsfiddle.net/z3sfwtn2/2/

the problem <button> element cannot flex container in browsers.

depending on browser, html elements not accept display changes. 3 of these elements are:

  • <button>
  • <fieldset>
  • <legend>

the idea maintain level of common sense when styling html elements. instance, rule prevents authors turning fieldset table.

however, there easy workaround in case:

solution: wrap content of button in span, , make span flex container.

adjusted html (wrapped button content in span)

<div>     <button>         <span><!-- using div works not valid html -->             <span>test</span>             <span>test</span>         </span>     </button>     <p>         <span>test</span>         <span>test</span>     </p> </div>

adjusted css (targeted span)

button > span, p {     display: flex;     flex-direction: row;     justify-content: center; }

revised demo

note: although cannot flex containers, button elements can flex items.

references:


Comments

Post a Comment

Popular posts from this blog

c - zlib and gdi32 with OpenSSL? -

-
this follow question undefined reference rsa_generate_key in openssl? have openssl program generate rsa key, follows : #include <stdio.h> #include <openssl/rsa.h> #include <openssl/pem.h> int main(int argc, char* argv[]) { rsa *r = null; int ret; r = rsa_new(); bignum *bne = null; ret = rsa_generate_key_ex(r, 2048, bne, null); return 0; } when compile gcc -i../include rsatest.c -lcrypto -l. i undefined reference errors functions in libraries gdi32 , zlib. so correct this, have add -lz , -lgdi32, as gcc -i../include/ rsatest.c -lcrypto -lz -lgdi32 -l. my question is, aren't static libcrypto , libssl self sufficient? in why having add libraries make work? there option should have added while compiling library prevent this? i'm using 64 bit windows mingw compiler. made openssl library of msys , make.
Read more

java - inputmismatch exception -

-
Image
this question has answer here: scanner skipping nextline() after using next(), nextint() or other nextfoo()? 14 answers import java.util.*; public class ngg { static scanner numberentered; static scanner userinput = new scanner(system.in); static int guessednumber; static int randomnumber = (int) (math.random()* 11); static scanner reply; static string answer; public static void main(string[] args) { guesschecker(guessednumber); } public static void guesschecker(int userguess) { while (userguess != randomnumber) { intro(); userguess = intchecker(); if (userguess == randomnumber) { system.out.println("congradulations!"); system.exit(0); } else { system.out.println("that incorrect!");...
Read more

ios - Align baselines with characters in large line heights with Text Kit -

-
Image
when draw attributed string fixed line height text kit, characters aligned bottom of line fragment. while make sense on 1 line characters varying in size, breaks flow of text multiple lines. baselines appear decided largest descender each line. i've found article people behind sketch explaining exact problem in bit more detail , showing solution does, not explaining how achieved this. this want basically: when showing 2 lines large line height, result far ideal: the code i'm using: let smallfont = uifont.systemfont(ofsize: 15) let bigfont = uifont.systemfont(ofsize: 25) let paragraphstyle = nsmutableparagraphstyle() paragraphstyle.minimumlineheight = 22 paragraphstyle.maximumlineheight = 22 var attributes = [ nsfontattributename: smallfont, nsparagraphstyleattributename: paragraphstyle ] let textstorage = nstextstorage() let textcontainer = nstextcontainer(size: cgsize(width: 250, height: 500)) let layoutmanager = nslayoutmanager() textstorage.append(n...
Read more