+ 1

How to align "welcome " in this code without changing its width and height?

link to the code-https://code.sololearn.com/WE7tMFPMkZTs/?ref=app

26th Oct 2017, 4:51 AM

Jitesh Gupta

11 Answers

+ 6

If you mean verticaly centered, use "display:flex" on 'welcome' container (and related properties to center both verticaly and horizontaly -- so, no need of padding in it, and/or margin on <h1> element } <div style="background-color:black; color :white; width:310px; height:60px; display:flex; align-items:center; justify-content:center;"> <h1>welcome</h1> </div> Anyway, it's not a good habit to use fixed size to fit a particular device display, as it will become unadapted on majority of devices ^^ [edit] Other ways to vertical center: https://code.sololearn.com/WewcrAlN1m8k/?ref=app

26th Oct 2017, 11:48 AM

visph

+ 6

Flexbox model is a (modern) powerful tool to handle layout in another logic than default html box model (with inline and block types): https://css-tricks.com/snippets/css/a-guide-to-flexbox/

26th Oct 2017, 5:05 PM

visph

+ 5

Sure it works: I have no doubt about that ;) However, if you want to be really sure that maximum browsers will support it, you need to add prefixed versions of these 'flex' properties (at least '-webkit-' wich is required for old android versions, or some webkit based desktop browsers not up to date ;P

26th Oct 2017, 11:52 AM

visph

+ 3

26th Oct 2017, 5:26 AM

👑 Prometheus 🇸🇬

+ 3

is it ok? <style> h1{ margin:0px; padding:0px; } .welcome{ background-color:black; color :white; position:fixed; width:310px; text-align:center; height:40px; } </style> <body> <div class="welcome"> <h1>welcome </h1> </div> </body>

26th Oct 2017, 8:31 AM

Elizabeth🌸